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属性中添加这个类型的实例对象，完成插件使用；

17行，引入插件对象

此时打包后，会在dist中自动生成一个使用了bundle.js的空白html文件

image.png

至此，webpack可以动态生成应用所需的html文件了，但是仍需要有些改动的地方：

• 对于生成的html文件，页面title必须要改；

• 还需要自定义页面的meta标签和一些基础的DOM结构

即少量修改靠配置项，大量修改靠模版

简单的修改，通过在HtmlWebpackPlugin对象中修改参数：

如果是大量的自定义，最好的做法是在源代码中添加一个用于生成html的模版，然后让这个插件根据模版去生成页面;

在src文件夹下新建一个html文件，然后根据我们的需要在这个文件中添加相应的元素。对于模板中动态的内容，可以使用 Lodash 模板语法输出，模板中可以通过 htmlWebpackPlugin.options 访问这个插件的配置数据，例如我们这里输出配置中的 title 属性，具体代码如下：

有了模版文件之后，在webpack.config.js里修改对应配置属性

template属性，配置模版文件地址

此时再打包文件，生成的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插件