共计 2187 个字符，预计需要花费 6 分钟才能阅读完成。
1. 概念
webpack 中的插件（plugin）在打包过程中运行到某个时刻的时候，会帮助你做一些事情。
2. HtmlWebpackPlugin
在之前的 demo 中，打包后的 dist 目录中的 index.html 是我们手动添加进去的，里面使用 <script> 引入 main.js 文件也是手写的，这是非常不方便的，此时就可以使用 HtmlWebpackPlugin 帮助我们解决这个问题了。
这个插件的作用就是生成一个 HTML 文件，该 HTML 文件里自动地就包含了 <script> 标签加载入口文件。
2.1 使用方式
npm install --save-dev html-webpack-plugin// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: 'src/index.js',
// ...
plugins: [new HtmlWebpackPlugin()
]
}执行命令打包，可以看到 dist 目录下就生成了一个 index.html 文件，里面的内容是这样的：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Webpack App</title>
</head>
<body>
<script type="text/javascript" src="main.js"></script></body>
</html> 但是问题又来了，生成的 index.html 缺少了一些内容，比如 <div id="root">root</div>，这里可以使用该插件的一些配置来实现。
2.2 配置
// webpack.config.js
plugins: [
new HtmlWebpackPlugin({template: 'src/index.html'})
]上面使用了 template 选项，那么最终打包生成的 dist/index.html 就是以 src/index.html 为模板来生成的。
更多的配置选项查阅 html-webpack-plugin#options。
3. CleanWebpackPlugin
这个插件的作用是删除 webpack 输出目录，比如打包生成的是 dist 目录，那么这个插件就会把 dist 目录删除掉。
3.1 使用
npm install --save-dev clean-webpack-plugin// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin')
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
module.exports = {
entry: 'src/index.js',
// ...
plugins: [
new CleanWebpackPlugin({verbose: true}),
new HtmlWebpackPlugin()]
}使用 CleanWebpackPlugin 时设置了 verbose 选项为 true，它的作用是在控制台中输出日志。
执行打包命令（假设之前已经打包生成了 dist 目录），可以看到控制台输出了以下内容：
clean-webpack-plugin: removed dist\bundle.js
clean-webpack-plugin: removed dist\index.html
Hash: 99aed0b5824ba9a08cca
Version: webpack 4.40.2
Time: 407ms
Built at: 2019-10-28 21:18:02
Asset Size Chunks Chunk Names
bundle.js 3.83 KiB main [emitted] main
index.html 222 bytes [emitted]
Entrypoint main = bundle.js
[./src/index.js] 59 bytes {main} [built]
Child html-webpack-plugin for "index.html":
1 asset
Entrypoint undefined = index.html
[./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html] 378 bytes {0} [built]
[./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {0} [built]
[./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {0} [built]
+ 1 hidden module可以看到，webpack 先执行了 clean-webpack-plugin 插件，将 dist/bundle.js 和 dist/index.html 删除，然后进行打包，最后执行 html-webpack-plugin 插件生成 index.html 文件（也就是不同的插件是会在 webpack 打包过程中的不同时刻执行的）。
更多内容查阅 clean-webpack-plugin。
