Webpack4 学习笔记 - 04：使用 Plugins 插件
什么是 Plugins ？
Plugins 顾名思义，就是插件，它可以在 webpack 运行到某个时刻的时候，来做一些事情。
下面就举一些使用 Plugins 的例子。
使用 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'); //引入plugin
module.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 模板文件：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Webpack App</title> </head> <body> <div id="root"></div> </body> </html>
配置这个模板文件：
plugins: [new HtmlWebpackPlugin({template: 'src/index.html'})]再运行打包命令，查看结果，发现生成的 html 文件已经把
<div id="root"></div>
添加上去了，说明模板文件的配置起了作用。打开页面会看到正确输出了 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 文件夹。