tapable 是 webpack 的底层依赖包，用以实现 webpack hook（插件）功能。
最近发现 rush.js 也在用 tapable，所以有必要对 tapable 再进一步了解和学习。
测试项目
仓库：github: thzt/debug-tapable
tapable v2.2.1
./debug-tapable
├── README.md
├── node_modules
├── package.json
├── pnpm-lock.yaml
├── src
| └── index.js
└── test
└── index.test.js
代码执行过程
为了简单起见，我们只看 SyncHook
预编译
tapable 会对添加给 hook 的 plugin 进行预编译。
hook.call 并不是直接调用每个 plugin，而是做了一些调整。
例如， 上述例子中，hook.call 实际调用的函数是以下编译结果，它是由 new Function 生成的，
生成的匿名函数如下，
编译的过程，会受到多种因素影响，例如 hook 类型、tap 了多少 plugin、以及是否绑定了拦截器。
预编译过程
下面我们来看一下 tapable 是如何生成代码的，
const hook = new SyncHook(['arg1', 'arg2']); // 初始化一个 hook
const hook = new Hook(args, name); // 父类
this.call = CALL_DELEGATE; // hook.call 实际进行调用的函数
this._x = undefined; // 保存各个 plugin
hook.compile = COMPILE; // 对 plugin 进行编译的方法
hook.intercept(...); // 注册拦截器
this._resetCompilation();
hook.tap('plugin1', (x1, x2) => {}); // 注册 plugin1
this._tap("sync", options, fn);
options = this._runRegisterInterceptors(options);
const newOptions = interceptor.register(options);
// 调用我们注册 register 拦截器
this._insert(options); // 把 plugin 信息存起来 {fn,name,type}
hook.tap('plugin2', (x1, x2) => {}); // 注册 plugin2
...
hook.call('hello', 'world'); // 调用 hook，实际是调用 CALL_DELEGATE
this.call = this._createCall("sync"); // 创建一个编译产物
return this.compile({taps,interceptors,args,type}); // 编译，调用的是 COMPILE
factory.setup(this, options); // 把 plugin 都放到 this._x 中
return factory.create(options); // 创建编译产物
this.init(options); // 把参数名放到 this._args 中
fn = new Function(...); // 使用 new Function 生成新的函数
this.args() // 生成参数列表：'arg1, arg2'
this.header() // 一些前置变量：'var _context;\nvar _x = this._x;\nvar _taps = this.taps;\nvar _interceptors = this.interceptors;\n'
this.contentWithInterceptors(...) // '_interceptors[0].call(arg1, arg2);\nvar _fn0 = _x[0];\n_fn0(arg1, arg2);\nvar _fn1 = _x[1];\n_fn1(arg1, arg2);\n'
this.getInterceptor(i) // 根据是否注册了拦截器，生成代码：'_interceptors[0].call(arg1, arg2);\n'
this.content(...) // 同下
this.callTapsSeries(...) // 'var _fn0 = _x[0];\n_fn0(arg1, arg2);\nvar _fn1 = _x[1];\n_fn1(arg1, arg2);\n'
this.callTap(...) // 'var _fn1 = _x[1];\n_fn1(arg1, arg2);\n'
this.getTapFn(tapIndex) // '_x[1]'
return this.call(...args); // 调用编译产物
// 调到了刚才用 new Function 创建的函数里面
(function anonymous(arg1, arg2
) {
"use strict";
var _context;
var _x = this._x;
var _taps = this.taps;
var _interceptors = this.interceptors;
_interceptors[0].call(arg1, arg2);
var _fn0 = _x[0];
_fn0(arg1, arg2);
var _fn1 = _x[1];
_fn1(arg1, arg2);
})
其他类型的 hook 会生成不同的匿名函数，compile 过程取决于这些因素，this.compile({taps,interceptors,args,type})。
注册了多少 plugin，是否注册了拦截器，hook 参数，以及 hook 的类型。
