在上一节主要讲了webpack配置文件的基本概念,比如entry, output, mode, loaders。这节主要通过代码来讲解plugins中的常用插件,例如 html-webpack-plugin,clean-webpack-plugin,provide-webpack-plugin以及splitChunksPlugin
1.html-webpack-plugin
HtmlWebpackPlugin简化了HTML文件的创建,以便为你的webpack包提供服务。主要用于创建自己所需要的html模板。
假设项目目录为下图
将此配置项通过webpack打包后,只会生成main.bundle.js文件
要想将打包后的文件部署到项目上,这时候必须得要一个html文件,但是仅有的html文件又没有引入main.bundle.js文件,只能每次都将index.html文件复制粘贴到dist文件夹中并手动引入main.bundle.js文件
所以这个时候就应该通过html-webpack-plugin插件来完成对html文件的引入。
通过npm install --save-dev html-webpack-plugin安装html-webpack-plugin插件
安装成功后,在webpack.config.js中引入文件并在plugins属性中使用HtmlWebpackPlugin插件
然后再对项目输入npm run build打包
打包成功后,发现dist文件夹中已经引入了html文件,且文件名为demo.html文件
查看demo.html文件,发现demo.html中已自动引入了main.bundle.js
2.clean-webpack-plugin
在打包过程中,我们可能会对html文件名称进行修改,比如我们把HtmlWebpackPlugin中的配置项filename属性改成index.html。然后打包
打包后发现有两个html文件,demo.html文件是我们不需要的,为了解决这个场景,我们就通过引用clean-webpack-plugin插件来清理上一次所打包的文件。
首先安装clean-webpack-plugin插件
npm install --save-dev clean-webpack-plugin
安装成功后通过
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
然后再plugins中配置CleanWebpackPlugin插件(注意:应该在HtmlWebpackPlugin前配置)
配置完之后再次打包,然后发现之前引入的demo.html文件不见了。
3.provide-webpack-plugin
假设在add.js中需要把x数字打印出来
在main.js中已经引入了jquery
这种情况下打包会成功,但是查看打包过后的文件却出现报错
主要是因为在add.js中并没有引入jquery,导致': jquery},打包之后就不会有该报错了
splitChunksPlugin
从webpack4开始,commonsChunkPlugin已被删除,取而代之的是splitChunksPlugin(也就是optimization.splitChunks)和optimization.runtimeChunk,下面我们来看optimization.splitChunks的默认配置
splitChunks: {
chunks: "async", // 当文件为异步的时候,才满足开启code splitting的条件,如果为all的话代表可对同步或者异步的代码进行分割
minSize: 30000, // 代码分割的条件是不能小于30kb
minChunks: 1, // 最少引入chunk的数量为1
maxAsyncRequests: 5, // 按需加载并行请求数量不能大于5
maxInitialRequests: 3, // 初始最大并行请求数量不能大于3
automaticNameDelimiter: '~', // 分了后的chunk命名的连接符
name: true, //
cacheGroups: { // 缓存组,如果都满足以上条件时,则在这里面进行判断
vendors: { // 默认插件名称为vendors
test: /[\\/]node_modules[\\/]/, // 插件通常都是在node_modules进行引入
priority: -10 // 优先级为-10,负值越小,优先级越高
},
default: { // 除了插件外的其它chunk命名为default~
minChunks: 2, // 最少引入相同chunk的数量为2,也就是说当引入chunk引用次数为1次的时候不会产生代码分割。
priority: -20, // 优先级为-20,也就是分割的代码先进入vendors判断之后才能进入default判断。
reuseExistingChunk: true
}
}
}
主要用于webpack的代码分割功能。当打包出的代码很大的情况下,可通过splitChunksPlugin插件,然后如上进行配置去解决相应的问题。