plugin 可以看作是对 webpack 功能的一个扩展
比如：当 webpack 生成文件时，顺便多生成一个说明描述文件
再比如：当 webpack 编译启动时，控制台输出一句话 表示 webpack 启动了
就是，当 xxx 的时候，我们要做 xxx 事情的时候，就需要 plugin
如图：
红点可以看作是一个个事件触发点， 这些事件可以对 plugin 进行监听
plugin 本质是一个带有 apply 方法的对象
var plugin = {
apply: function(compiler) {
// 在这里注册事件，类似于 window.onload
}
}
通常，我们将该对象写成构造函数的模式
class MyPlugin {
apply(compiler) {
// 在这里注册事件，类似于 window.onload
}
}
var plugin = new MyPlugin();
要将插件应用到 webpack，需要把插件对象配置到 webpack 的 plugins 数组中
var MyPlugin = require("./plugins/MyPlugin");
module.exports = {
plugins: [
new MyPlugin();
]
}
介绍下 plugin 的 apply 方法的 compiler 参数：
compiler 是一个对象，是在初始化阶段构建的，整个 webpack 打包期间只有一个 compiler 对象
后续完成打包工作的事 compiler 对象内部创建的 compilation
apply 方法会在创建好 compiler 对象后调用，并向方法传入一个 compiler 对象
注意：在整个构建过程中 compiler 对象只会创建一次，所以 plugin 的 apply 方法也只会被调用一次
compiler 对象提供了大量的钩子函数（hooks，可以理解为事件），plugin 的开发者可以注册这些钩子函数
class MyPlugin{
apply(compiler){
compiler.hooks.事件名称.事件类型(name, function(compilation){
//事件处理函数
})
}
}
- 事件名称：即要监听的事件名，即钩子名，所有的钩子：https://www.webpackjs.com/api/compiler-hooks
-
事件类型：这一部分使用的是 Tapable API，这个小型的库是一个专门用于钩子函数监听的库
-
tap：注册一个同步的钩子函数，函数运行完毕则表示事件处理结束 -
tapAsync：注册一个基于回调的异步的钩子函数，函数通过调用一个回调表示事件处理结束 -
tapPromise：注册一个基于 Promise 的异步的钩子函数，函数通过返回的 Promise 进入已决状态表示事件处理结束
-
- 处理函数：处理函数有一个事件参数 compilation
module.exports = class MyPlugin {
apply(compiler) {
// 注册事件
compiler.hooks.done.tap("MyPlugin-done", function(compilation) {
// 事件处理函数
console.log("编译完成");
})
}
}
