前言：
webpack很多人并不陌生，vue、react等框架开发必然少不了接触，但大部分人也只是vue-cli脚手架生成一堆代码，但是具体干啥用，看不懂；那么就让我们来解剖一下，看看都是干啥的。本篇文章更类似于webpack教程，也适合未接触webpack者使用。
了解webpack相关
什么是webpack
* Webpack是一个模块打包器(bundler)。
* 在Webpack看来, 前端的所有资源文件(js/json/css/img/less/...)都会作为模块处理
* 它将根据模块的依赖关系进行静态分析，生成对应的静态资源
理解Loader
* Webpack 本身只能加载JS/JSON模块，如果要加载其他类型的文件(模块)，就需要使用对应的loader 进行转换/加载
* Loader 本身也是运行在 node.js 环境中的 JavaScript 模块
* 它本身是一个函数，接受源文件作为参数，返回转换的结果
* loader 一般以 xxx-loader 的方式命名，xxx 代表了这个 loader 要做的转换功能，比如 json-loader。
配置文件(默认)
* webpack.config.js : 是一个node模块，返回一个 json 格式的配置信息对象
插件
* 插件件可以完成一些loader不能完成的功能。
* 插件的使用一般是在 webpack 的配置信息 plugins 选项中指定。
* CleanWebpackPlugin: 自动清除指定文件夹资源
* HtmlWebpackPlugin: 自动生成html文件的插件
* UglifyJSPlugin: 压缩js文件
学习文档 :
* webpack官网:https://www.webpackjs.com/
配置环境
初始化项目：
生成package.json文件
{
"name": "webpack_test",
"version": "1.0.0"
}
安装webpack
开发环境：webpack: 4.41.2
- npm install webpack -g //全局安装 - npm install webpack --save-dev //局部安装 - npm install webpack-cli -D
编译js
- webpack src/js/entry.js dist/bundle.js
查看页面效果
webpack_config配置文件说明
创建webpack.config.js
const path = require('path'); //path内置的模块，用来设置路径。
module.exports = {
entry: './src/js/entry.js', // 入口文件
output: { // 输出配置
filename: 'bundle.js', // 输出文件名
path: path.resolve(__dirname, 'dist') //输出文件路径配置
}
};
配置npm命令: package.json
"scripts": {
"build": "webpack"
},
这里不需要在webpack后面加js了，为什么？webpack在执行命令时先在当前项目下找配置文件，即webpack.config.js
打包应用
npm run build
模式（mode）
上面打包时会提示我们去设置'mode'，mode有两个值，分别是development和production，用来区别当前打包环境是生产环境还是开发环境。
如果你设置了mode: ‘development’，在项目里你可以使用 process.env.NODE_ENV 来获取当前的环境的值；
webpack.config.js
const path = require('path'); //path内置的模块，用来设置路径。
module.exports = {
mode: 'development',
entry: './src/js/entry.js', // 入口文件
output: { // 输出配置
filename: 'bundle.js', // 输出文件名
path: path.resolve(__dirname, 'dist') //输出文件路径配置
}
};
entry.js
document.write(`entry.js , this is ${process.env.NODE_ENV}`);
打包，查看页面展示
webpack_打包js、json、css文件、图片文件
打包js、json
webpack本身就能加载JS/JSON模块，所以不需要多余的配置
创建第二个js: src/js/math.js
export function square(x) {
return x * x;
}
export function cube(x) {
return x * x * x;
}
创建json文件: src/json/data.json
{
"name": "Tom",
"age": 12
}
更新入口js : entry.js
import {cube} from './math'
import data from '../json/data.json'
//注意data会自动被转换为原生的js对象或者数组
document.write("entry.js is work <br/>");
document.write(cube(2) + '<br/>');
document.write(JSON.stringify(data) + '<br/>')
编译
npm run build
查看页面效果
描述：
cube引入entry，使用es6 export分别暴露出，import也需要分别引入，但后缀名就自动省略了。
data引入entry，后缀名不能省略，data是个对象，说明，当引入json时会自动转化为原生js的对象。
打包css和图片文件
webpack本身是不支持打包css文件和图片文件的，所以我们需要引入loader
loader是用来预处理文件的，对import或者"加载的模块"源代码进行转化，并生成js文件。比如将less转为css，typescript转为javascript。
安装样式的loader
npm install css-loader style-loader --save-dev npm install file-loader url-loader --save-dev
补充：url-loader是对象file-loader的上层封装，使用时需配合file-loader使用。
配置loader
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192
}
}
]
}
]
}
打包css
创建样式文件: src/css/test.css
body {
background: #ccc;
}
更新入口js : entry.js
- import '../css/test.css'
执行打包命令：
npm run build
在浏览器查看背景颜色是否改变，还可以把css-loader注释掉，看下效果。但是打包时会报错
提醒你需要一个loader处理这个文件，所以你就会知道我们的loader是干啥用的，就是用来加载css文件的。
打包图片
向应用中添加2张图片:
* 小图:src/image/logo.png 小于8kb
* 大图: src/image/big.jpg 大于8kb
添加css样式 src/css/test.css
#box1 {
width: 60px;
height: 60px;
background-image: url("../image/logo.png");
}
#box2 {
width: 300px;
height: 300px;
background-image: url("../image/big.jpg");
}
index.html添加元素
<div id="box1"></div> <div id="box2"></div>
执行打包命令：
npm run build
然后我们会看到dist下面多了一张图片，是我们的big.jpg（大于8KB）
另外一张logo.jpg(小于8KB)不见了，页面上显示box1引入了base64的图片。
也就是我们的url-loader将图片转为了base64
webpack_热加载实现
为什么需要热加载
现在我们改变一下输出路径
webpack.config.js
output: { // 输出配置
filename: 'bundle.js', // 输出文件名
path: path.resolve(__dirname, 'dist/js') //输出文件路径配置
},
先清除一下dist下除了index.html的文件，改变一下index.html引入bundle.js的路径js/bundle.js
执行一下打包命令
npm run build
你会发现找不到图片了，这是因为会自动查找页面当前路径下的文件
解决办法：
*在 output输出配置中使用publicPath : 'dist/js/' //设置为index.html提供资源的路径,设置完后找所有的资源都会去当前目录下找。
* 将index.html放在dist/js/也可以解决。
但是这不是最好的办法，这时的路径限制性太大，还有你会发现我们每次改变代码都需要重新执行打包编译，查看，所以这时我们就需要引入webpack-dev-server
webpack-dev-server配置
下载
- npm install --save-dev webpack-dev-server
* webpack配置
devServer: {
contentBase: './dist'
},
* package配置
- "start": "webpack-dev-server --open"
* 编译打包应用并运行
- npm start
webpack_插件使用
* 常用的插件
* 使用html-webpack-plugin根据模板html生成引入script的页面
* 使用clean-webpack-plugin清除dist文件夹
* 使用uglifyjs-webpack-plugin压缩打包的js文件
插件配置（plugins）
* 下载
npm install --save-dev html-webpack-plugin clean-webpack-plugin
webpack.config.js
const path = require('path'); //path内置的模块，用来设置路径。
const HtmlWebpackPlugin = require('html-webpack-plugin'); //自动生成html文件的插件
const { CleanWebpackPlugin } = require('clean-webpack-plugin'); //清除之前打包的文件
module.exports = {
mode: 'development',
entry: './src/js/entry.js', // 入口文件
output: { // 输出配置
filename: 'bundle.js', // 输出文件名
// publicPath: 'js/',
path: path.resolve(__dirname, 'dist/js') //输出文件路径配置
},
module: {
rules: [{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.(png|jpg|gif)$/,
use: [{
loader: 'url-loader',
options: {
limit: 8192
}
}]
}
]
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({ template: './index.html' }),
],
devServer: {
contentBase: './dist'
}
};
创建页面: index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpack test</title>
</head>
<body>
<div id="app"></div>
<!--打包文件将自动通过script标签注入到此处-->
</body>
</html>
打包运行项目
npm run build npm start
参考项目地址：https://github.com/luxueyan1314/webpack-manuallyBuild
转载请注明：流年似水 » 前端工程化-webpack搭建
