tapable
\
\
webpack的事件核心，Compiler和Compilation 都基于这个实现，类似于node的EventEmitter
\
事件名称
| 事件名称 | 类型 | 描述 |
|---|---|---|
| SyncHook | 同步钩子 | |
| SyncBailHook | 同步熔断钩子 | 如果返回一个非undefined的值就停止向下执行 |
| SyncWaterfallHook | 同步瀑布钩子 | 把上一步钩子的执行结果返回出去，可以拿到上一步的结果 |
| SyncLoopHook | 同步循环钩子 | 如果返回值不是undefined就一直执行该钩子 |
| AsyncParallelHook | 异步并行钩子 | 如果所有异步任务结束时，就会执行最终这个hook |
| AsyncParallelBailHook | 异步并行熔断钩子 | 执行完第一个hook，然后停止，直接执行最终hook |
| AsyncSeriesHook | 异步串行钩子 | 按顺序执行hook |
| AsyncSeriesBailHook | 异步串行熔断钩子 | 只要一个hook有返回值，立马执行最终的，并停止执行 |
| AsyncSeriesWaterfallHook | 异步串行瀑布钩子 | 串行执行，并且前一个插件的返回值，会作为后一个插件的参数 |
\
注册钩子
\
- 同步钩子通过tap进行调用
- 异步钩子通过tap、tapAsync、tapPromise
\
调用方式
\
-同步钩子通过 xxx.call() 去执行
\
- 异步钩子通过 xxx.callAsync() xxx.callPromise执行
\
const {
SyncHook,
SyncBailHook,
SyncWaterfallHook,
SyncLoopHook,
AsyncParallelHook,
AsyncParallelBailHook,
AsyncSeriesHook,
AsyncSeriesBailHook,
AsyncSeriesWaterfallHook
} = require("tapable");
class Car {
constructor() {
this.hooks = {
accelerate: new SyncHook(["newSpeed"]),
brake: new SyncHook(),
calculateRoutes: new AsyncParallelHook(["source", "target", "routesList"])
};
}
}
const myCar = new Car();
myCar.hooks.brake.tap("WarningLampPlugin", () => warningLamp.on());myCar.hooks.accelerate.tap("LoggerPlugin", newSpeed => console.log(`Accelerating to ${newSpeed}`));
