Webpack 插件机制的目的是为了增强 Webpack 在项目自动化构建方面的能力。
上一节，Loader负责完成项目中各样资源的加载，从而实现项目整体模块化。
这一节，Plugin能力更广，负责解决除了资源模块打包外的其他自动化工作；
我在这里先介绍几个插件最常见的应用场景：
- 实现自动在打包之前清除 dist 目录（上次的打包结果）；
- 自动生成应用所需要的 HTML 文件；
- 根据不同环境为代码注入类似 API 地址这种可能变化的部分；
- 拷贝不需要参与打包的资源文件到输出目录；
- 压缩 Webpack 打包完成后输出的文件；
- 自动发布打包结果到服务器实现自动部署。
总之，有了Plugin，Webpack几乎’无所不能’，借助插件我们可以轻松实现前端工程化中的绝大多数功能，使得很多初学者把Webpack和前端工程化混淆；
接下来计划先通过一些常用插件的使用，了解Plugin机制，
再通过自己开发一个插件，理解Plugin原理；
常用插件：
1、clean-webpack-plugin，自动清除输出目录的插件
通过之前的尝试，我们发现webpack每次打包的结果就是直接覆盖到dist目录。但dist目录中可能存在一些在上次打包操作时遗留的文件，此时会出现一些已经移除的文件还冗余其中的情况，最终导致线上部署的时候出现多余文件，这显然很不合理；
更合理的做法就是，每次打包前清理一遍dist目录，保证实时性，每次都是最新的；
clean-webpack-plugin插件就实现了这个需求，它是个第三方npm包，用前需要安装下：
$ npm install clean-webpack-plugin --save-dev
此时执行打包之后，dist文件会被清空，然后重新生成打包文件；
P.S. 报错：如果output不配置path的话，会报错clean-webpack-plugin: options.output.path not defined. Plugin disabled...
解决：在output中声明path属性如下图，或者选择clean属性配置(webpack新版本的替代解决方案)
webpack 5.20.0升级后，output.clean选项可以再打包之前清理输出目录；已经替代了这个插件的作用
2、 html-webpack-plugin，用于生成 HTML 的插件
首先，我们要知道html文件，一般都是通过硬编码的方式，单独存放在项目根目录中。此时会有问题：项目发布时，我们同时要发布根目录下的html+dist里的所有打包文件，还要确保上线后html代码中的资源文件路径正确，非常麻烦；如果打包结果输出的目录或者文件名发生变化，html代码中所对应的script标签也需要我们手动修改；
解决这个问题最好的办法就是让webpack在打包的同时，自动生成对应的html文件，让webpack将打包的bundle文件自动引入页面中；此时需要html-webpack-plugin
$ npm install html-webpack-plugin --save-dev
安装后，返回配置文件。引入并在plugin属性中添加这个类型的实例对象，完成插件使用；
此时打包后，会在dist中自动生成一个使用了bundle.js的空白html文件
至此，webpack可以动态生成应用所需的html文件了，但是仍需要有些改动的地方：
对于生成的html文件，页面title必须要改；
还需要自定义页面的meta标签和一些基础的DOM结构
即少量修改靠配置项，大量修改靠模版
简单的修改，通过在HtmlWebpackPlugin对象中修改参数：
如果是大量的自定义，最好的做法是在源代码中添加一个用于生成html的模版，然后让这个插件根据模版去生成页面;
在src文件夹下新建一个html文件，然后根据我们的需要在这个文件中添加相应的元素。对于模板中动态的内容，可以使用 Lodash 模板语法输出，模板中可以通过 htmlWebpackPlugin.options 访问这个插件的配置数据，例如我们这里输出配置中的 title 属性，具体代码如下：
有了模版文件之后，在webpack.config.js里修改对应配置属性
此时再打包文件，生成的html就是根据模版内容产生的文件了
关于 html-webpack-plugin 插件，除了自定义输出文件的内容，同时输出多个 HTML 文件也是一个非常常见的需求，除非我们的应用是一个单页应用程序，否则一定需要输出多个 HTML 文件。
如果需要同时输出多个 HTML 文件，其实也非常简单，我们回到配置文件中，这里通过 HtmlWebpackPlugin 创建的对象就是用于生成 index.html 的，那我们完全可以再创建一个新的实例对象，用于创建额外的 HTML 文件。
例如，这里我们再来添加一个 HtmlWebpackPlugin 实例用于创建一个 about.html 的页面文件，我们需要通过 filename 指定输出文件名，这个属性的默认值是 index.html，我们把它设置为 about.html，具体配置如下：
完成以后我们再次回到命令行终端，运行打包命令，然后我们展开 dist 目录，此时 dist 目录中就同时生成了 index.html 和 about.html 两个页面文件。
根据这个尝试我们就应该知道，如果需要创建多个页面，就需要在插件列表中加入多个 HtmlWebpackPlugin 的实例对象，让每个对象负责一个页面文件的生成。
下一节，我们手写一个Loader加载器和Plugin插件