看了官网和一些其它技术文章，我觉得webpack插件主要搞清楚几个问题：1. 他用来做为什么。2，什么时候做。3.怎么做。
webpack做了什么
监听编译中的事件，把功能嵌入到webpack的编译流程中
功能包括很多，比如说，输出一些信息，修改文件，或者修改文件名等等。
什么时候做
借一张图说话。
20200616220856437.png
webpack编译流程的每一步都会触发事件，而plugin就是处理这些事件的。
那么它到底包括哪些事件？这需要了解webpack的构建流程；
- 校验配置文件 ：读取命令行传入或者webpack.config.js文件，初始化本次构建的配置参数
- 生成Compiler对象：执行配置文件中的插件实例化语句new MyWebpackPlugin()，为webpack事件流挂上自定义hooks
- 进入entryOption阶段：webpack开始读取配置的Entries，递归遍历所有的入口文件
- run/watch：如果运行在watch模式则执行watch方法，否则执行run方法
- compilation：创建Compilation对象回调compilation相关钩子，依次进入每一个入口文件(entry)，使用loader对文件进行编译。通过compilation我可以可以读取到module的resource（资源路径）、loaders（使用的loader）等信息。再将编译好的文件内容使用acorn解析生成AST静态语法树。然后递归、重复的执行这个过程， 所有模块和和依赖分析完成后，执行 compilation 的 seal 方法对每个 chunk 进行整理、优化、封装webpack_require来模拟模块化操作.
- emit：所有文件的编译及转化都已经完成，包含了最终输出的资源，我们可以在传入事件回调的compilation.assets上拿到所需数据，其中包括即将输出的资源、代码块Chunk等等信息。
怎么做
提供一个class或原型方法，必须包含apply方法，该方法只在安装插件被Webpack compiler执行一次
class HelloPlugin{
// 在构造函数中获取用户给该插件传入的配置
constructor(options){
}
// Webpack 会调用 HelloPlugin 实例的 apply 方法给插件实例传入 compiler 对象
apply(compiler) {
// 在emit阶段插入钩子函数，用于特定时机处理额外的逻辑；
compiler.hooks.emit.tap('HelloPlugin', (compilation) => {
// 在功能流程完成后可以调用 webpack 提供的回调函数；
});
// 如果事件是异步的，会带两个参数，第二个参数为回调函数，在插件处理完任务时需要调用回调函数通知webpack，才会进入下一个处理流程。
compiler.plugin('emit',function(compilation, callback) {
// 支持处理逻辑
// 处理完毕后执行 callback 以通知 Webpack
// 如果不执行 callback，运行流程将会一直卡在这不往下执行
callback();
});
}
}
module.exports = HelloPlugin;
webpack中最核心的负责编译的Compiler和负责创建bundles的Compilation都是Tapable的实例，可以直接在 Compiler 和 Compilation 对象上广播和监听事件，方法如下：
/**
* 广播事件
* event-name 为事件名称，注意不要和现有的事件重名
*/
compiler.apply('event-name',params);
compilation.apply('event-name',params);
/**
* 监听事件
*/
compiler.plugin('event-name',function(params){});
compilation.plugin('event-name', function(params){});
apply方法中插入钩子的一般形式如下：
// compiler提供了compiler.hooks，可以根据这些不同的时刻去让插件做不同的事情。
compiler.hooks.阶段.tap函数('插件名称', (阶段回调参数) => {
});
compiler.run(callback)
Compiler 和 Compilation 的区别
Compiler 代表了整个 Webpack 从启动到关闭的生命周期，而 Compilation 只是代表了一次新的编译，只要文件有改动，compilation就会被重新创建。
Compiler钩子
https://webpack.docschina.org/api/compiler-hooks/
Compilation钩子
https://webpack.docschina.org/api/compilation-hooks/
