一、前言
webpack是目前前端开发中最流行的打包工具,不仅能实现 JS 打包,还能将 CSS 文件,图片文件,甚至是 LESS 文件打包,每一个文件都是一个独立的模块,并且实现按需加载。使用时需要安装 webpack 、 webpack-cli 、webpack-dev-server三个基础模块。
二、常用 webpack 配置如下
module.exports = {
entry: './src/index.js',
output:{
filename:'bundle.js',
path:path.resolve(__dirname,'dist')
},
module:{
rules:[
{
test: /\.js$/,
loader: 'babel-loader?cacheDirectory=true',
include: [
resolve('src'),
],
exclude:path.resolve(__dirname, 'node_modules')
},
{
test:/\.css$/,
use:[
'style-loader',
'css-loader',
'postcss-loader'
]
},{
test:/\.(png|svg|jpg|gif)$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
}
]
}
}
三、配置参数说明
mode:两种 mode 模式可供选择,一种是开发环境,命令为 webpack --mode = development,打包出来的文件未经过压缩;一种是生产环境,命令是 webpack --mode = production ,打包出来的文件是经过压缩的。
entry:资源入口文件,所有的资源最后会打包成一个 JS 文件。
output:打包之后存放的文件路径。path 为相对路径,filename 为打包后的文件名。
module:rules 配置编译规则,test 正则匹配,exclude 排除特定条件,use-loader,test 匹配到的解析器模块,use-options,与use-loader配合使用。
plugins:插件。plugins 与 loader 的区别在于,loader 只是一个解析模块,比如将 ES5 解析成 ES6,LESS 文件解析成 CSS 文件,为了兼容浏览器。而 plugins 是将 loader 之后的文件进行优化分类、压缩、提供公共代码等。
devServer:服务器配置,contentBase 文件路径,compress 是否启动 gzip 压缩,host 主机地址,port 端口号,publicPath。
四、常用 plugins
1. extract-text-webpack-plugin 与 mini-css-extract-plugin
分离 .css 分解,后者需要 webpack 4.2.0 版本以上。
2. UglifyJsPlugin
压缩 js 文件,减小 js 文件。
3. html-webpack-plugin 与 html-loader
生成 html 文件。
4. clean-webpack-plugin
每次构建之前清理历史打包文件。