plugin根据webpack打包过程中的钩子进行监听，和事件的触发类似。

我们使用webpack或则设置好的npm run webpack指令打包项目时，会遇到很多问题。这些问题大部分我们可以给webpack挂载插件plugin进行处理。

Plugin插件

我们写个简单的webpack配置作后面讲解的依据：

//webpack.config.js
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
module.exports = {
    entry: __dirname + "/src/index.js",
    output: {
        path: __dirname + "/dist",
        filename: '[hash:6].js'
    },
    module: {
        rules: [
            { test: /\.css$/i, use: ['style-loader', 'css-loader'], },
        ],
    },
    //插件，也是我们讲解的部分。
    plugins: [
        new CleanWebpackPlugin()
    ],
}

接下来我们通过第一个插件来学习写法。

CleanWebpackPlugin 清除

顾名思义，这个插件是清除的功能，我们每次webpack打包都会产生新的输出文件main.js，如我们使用哈希命名，就会导致输出文件的堆积（哈希命名每次的输出文件名字不相同）。而CleanWebpackPlugin插件可以帮助我们自动删除原来的输出文件。

我们先下载这个插件，再在webpack配置文件中引入和使用。

npm i clean-webpack-plugin --save-dev

plugin 接收一个数组，数组里是多个插件实例，所以我们需要提前引入对应插件模块，这是和loader不同一点。

//webpack.config.js
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
......
    plugins: [
        new CleanWebpackPlugin()
    ],

然后我们去webpack打包项目，就会自动删除上一次的输出文件（使用哈希命名效果更加明显）。

HtmlWebpackPlugin 自动引用

我们一开始使用webpack打包还有一个麻烦的情况就是：我们需要手动向html中引入输出文件（main.js）。

    <script src="8733c7.js"></script>

一旦输出文件名字修改，我们就需要手动去修改src属性的值，通过HtmlWebpackPlugin插件我们将html文件也放入src文件中，不同于loader，这里我们通过插件对html文件进行处理，再输出到dist文件夹中。

具体的插件配置使用：

npm i html-webpack-plugin --save-dev

//webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
......
        new HtmlWebpackPlugin({
            hash: true,    //为所有包含的脚本和CSS文件附加唯一的编译哈希，这对缓存清除很有用
            template: __dirname+'/src/main.html',    //来自哪里 模板文件
            filename: 'index.html', //打包后生成的文件名  放在output.path里面
            inject: 'body',         //引入js的位置:引入js的位置:  'head'-头部引入 'body'/true--</body>之前引入 false不引入
            minify: {				  //压缩项配置
                removeComments: true, //是否清除HTML注释  
                collapseWhitespace: true, //是否压缩HTML  
                removeScriptTypeAttributes: true, //是否删除< script>的type="text/javascript"  
                removeStyleLinkTypeAttributes: true, //是否删除< style>和< link>的type="text/css"  
                minifyJS: false, //是否压缩页内JS  
                minifyCSS: true //是否压缩页内CSS  
            }
        }),

相关的配置项比较繁杂，建议记录下来，使用时方便查看。

写篇文章让自己学会webpack——（4）常用plugin

Plugin插件

CleanWebpackPlugin 清除

HtmlWebpackPlugin 自动引用

其他插件