在上一节主要讲了webpack配置文件的基本概念，比如entry, output, mode, loaders。这节主要通过代码来讲解plugins中的常用插件，例如 html-webpack-plugin,clean-webpack-plugin,provide-webpack-plugin以及splitChunksPlugin
1.html-webpack-plugin
HtmlWebpackPlugin简化了HTML文件的创建，以便为你的webpack包提供服务。主要用于创建自己所需要的html模板。
假设项目目录为下图
image.png
image.png
将此配置项通过webpack打包后，只会生成main.bundle.js文件
image.png
要想将打包后的文件部署到项目上，这时候必须得要一个html文件，但是仅有的html文件又没有引入main.bundle.js文件，只能每次都将index.html文件复制粘贴到dist文件夹中并手动引入main.bundle.js文件
image.png
所以这个时候就应该通过html-webpack-plugin插件来完成对html文件的引入。
通过npm install --save-dev html-webpack-plugin安装html-webpack-plugin插件
安装成功后，在webpack.config.js中引入文件并在plugins属性中使用HtmlWebpackPlugin插件
image.png
然后再对项目输入npm run build打包
打包成功后，发现dist文件夹中已经引入了html文件，且文件名为demo.html文件
image.png
查看demo.html文件，发现demo.html中已自动引入了main.bundle.js
image.png
2.clean-webpack-plugin
在打包过程中，我们可能会对html文件名称进行修改，比如我们把HtmlWebpackPlugin中的配置项filename属性改成index.html。然后打包
image.png
打包后发现有两个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前配置）
image.png
配置完之后再次打包，然后发现之前引入的demo.html文件不见了。
image.png
3.provide-webpack-plugin
假设在add.js中需要把x数字打印出来
image.png
在main.js中已经引入了jquery
image.png
这种情况下打包会成功，但是查看打包过后的文件却出现报错
image.png
主要是因为在add.js中并没有引入jquery,导致': jquery},打包之后就不会有该报错了
image.png
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插件，然后如上进行配置去解决相应的问题。
网友评论