什么是 Plugins ？

plugins 顾名思义，就是插件，它可以在 webpack 运行到某个时刻的时候，来做一些事情。

使用 HtmlWebpackPlugin

HtmlWebpackPlugin 做什么用的呢？ 文档解析：该插件将为你生成一个 HTML5 文件， 其中包括使用 script 标签的 body 中的所有 webpack 包。

是不是这样呢，下面就来演示一下吧，首先把暂时没用的文件如 .css 和 index.html 都删掉，目录结构如下：

index.js 文件内容如下：

var root = document.getElementById('root');var wp = document.createElement('div');wp.innerText = 'Hello, Webpack';root.append(wp);

安装 HtmlWebpackPlugin 插件：

npm install html-webpack-plugin --save-dev

想要使用这个插件，就要在 webpack.config.js 中去引入它并配置：

const path = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');  //引入pluginmodule.exports = {    entry: {        main: './src/index.js'    },    output: {        filename: 'bundle.js',        path: path.resolve(__dirname, 'dist')    },    module: {},    plugins: [        new HtmlWebpackPlugin() // 实例化plugin    ],    mode: 'development'}

配置完成后，运行打包命令，查看结果，发现果然在 dist 目录下，自动创建好了一个 .html 文件：

并且自动把打包好的 js 文件给引入了进来：

到此，打包成功了，也证明了 HtmlWebpackPlugin 会在打包结束后，自动生成一个 html 文件，并把打包生成的 js 文件自动引入到这个 html 文件中去。

打包成功是成功了，但是运行 index.html 看一下， 会发现页面空白，什么也没有。这是因为写在 index.js 中的代码

var root = document.getElementById('root');

需要一个 id = root 的 div，但生成的文件中，并没有这个 div，怎么办呢？ 查看文档，发现 HtmlWebpackPlugin 可以配置一个模板文件，并且会使用这个模板文件来生成 html 文件。

在 src 目录下新建 index.html 模板文件：

配置这个模板文件：

plugins: [new HtmlWebpackPlugin({template: 'src/index.html'})]

再运行打包命令，查看结果，发现生成的 html 文件已经把

添加上去了，说明模板文件的配置起了作用。打开页面会看到正确输出了 Hello, Webpack 字样，到此打包正确完成了。

使用 CleanWebpackPlugin

修改一下 webpack.config.js 中的 output 配置， 把输出的文件名从 bundle.js 改为 main.js， 然后运行打包，查看一下结果：

这时候会发现，虽然 main.js 生成了，也被引入到了 index.html 文件中，但是原来的 bundle.js 还遗留了下来，需要去手动删除。如果项目较大，文件较多，改动较频繁，这样的遗留文件会越来越多，手动一个个删除肯定是费事费力的，这时就需要 CleanWebpackPlugin 来帮忙自动清理了。

安装 CleanWebpackPlugin：

npm install clean-webpack-plugin -D

和HtmlWebpackPlugin一样， 修改 webpack.config.js 的配置：

const path = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');const CleanWebpackPlugin = require('clean-webpack-plugin');module.exports = {    entry: {        main: './src/index.js'    },    output: {        filename: 'main.js',        path: path.resolve(__dirname, 'dist')    },    module: {},    plugins: [        new HtmlWebpackPlugin({            template: 'src/index.html'        }),        new CleanWebpackPlugin() // 最新版本会根据配置的output.path清空目录下的内容，但是不删除目录    ],    mode: 'development'}

运行打包，会看到 dist 目录下的 bundle.js 文件已将没有了。查看打包的过程：

这个过程说明了，一开始打包的时候，CleanWebpackPlugin 就把 dist 文件夹给删除了，每次打包，它都会删除 dist 文件夹。