webpack的通用配置(2)-plugins

在上一节主要讲了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插件，然后如上进行配置去解决相应的问题。