引言
围绕 Webpack 打包流程中最核心的机制就是所谓的 Plugin 机制。
所谓插件即是 webpack 生态中最关键的部分， 它为社区用户提供了一种强有力的方式来直接触及 webpack 的编译过程(compilation process)。
今天，我们来聊聊 Webpack 中必不可少的核心 Plugin 机制 ～
Plugin
本质上在 Webpack 编译阶段会为各个编译对象初始化不同的 Hook ，开发者可以在自己编写的 Plugin 中监听到这些 Hook ，在打包的某个特定时间段触发对应 Hook 注入特定的逻辑从而实现自己的行为。
关于 Plugin 中的 Hook 内部完全是基于 tapable 来实现
Plugin 中的常用对象
首先让我们先来看看 Webpack 中哪些对象可以注册 Hook :
别担心，也许对于这 5 个对象现在你会感觉到非常陌生，之后我会逐步带你攻克它们。
插件的基本构成
我们先来看这样一个最简单的插件，它会在 compilation（编译）完成时执行输出 done :
class DonePlugin {
apply(compiler) {
// 调用 Compiler Hook 注册额外逻辑
compiler.hooks.done.tap('Plugin Done', () => {
console.log('compilation done');
});
}
}
module.exports = DonePlugin;
此时，在 compilation 完成时打包终端会打印出来一行 compilation done。
我们可以看到一个 Webpack Plugin 主要由以下几个方面组成:
-
首先一个 Plugin 应该是一个 class，当然也可以是一个函数。
-
其次 Plugin 的原型对象上应该存在一个 apply 方法，当 webpack 创建 compiler 对象时会调用各个插件实例上的 apply 方法并且传入 compiler 对象作为参数。
-
同时需要指定一个绑定在 compiler 对象上的 Hook ， 比如 compiler.hooks.done.tap 在传入的 compiler 对象上监听 done 事件。
-
在 Hook 的回调中处理插件自身的逻辑，这里我们简单的做了 console.log。
-
根据 Hook 的种类，在完成逻辑后通知 webpack 继续进行。
插件的构建对象
上边我们有提到过 Webpack Plugin 中哪些对应可以进行 Hook 注册，接下来我会带你深入这 5 个对象。
理解它们是理解并应用 Webpack Plugin 的重中之重。
compiler 对象
class DonePlugin {
apply(compiler) {
// 调用 Compiler Hook 注册额外逻辑
compiler.hooks.done.tapAsync('Plugin Done', (stats, callback) => {
console.log(</
