tapable 是一个类似于 Node.js 中的 EventEmitter 的库，但更专注于自定义事件的触发和处理。webpack 通过 tapable 将实现与流程解耦，所有具体实现通过插件的形式存在。

Tapable 和 webpack 的关系

webpack 是什么？

本质上，webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部构建一个 依赖图(dependency graph)，此依赖图对应映射到项目所需的每个模块，并生成一个或多个 bundle。

webpack 的重要模块

  • 入口（entry）
  • 输出（output）
  • loader（对模块的源代码进行转换）
  • plugin（webpack 构建流程中的特定时机注入扩展逻辑来改变构建结果或做你想要的事）

插件(plugin)是 webpack 的支柱功能。webpack 自身也是构建于你在 webpack 配置中用到的相同的插件系统之上。

webpack 的构建流程

webpack 本质上是一种事件流的机制，它的工作流程就是将各个插件串联起来，而实现这一切的核心就是 Tapable。webpack 中最核心的负责编译的 Compiler 和负责创建 bundle 的 Compilation 都是 Tapable 的实例(webpack5 前)。webpack5 之后是通过定义属性名为 hooks 来调度触发时机。Tapable 充当的就是一个复杂的发布订阅者模式

tabable的工作流程

实例化hook注册事件监听

  1. const { SyncHook } = require('tapable');
  2. // 实例化hook
  3. const hook = new SyncHook(['name', 'age']);
  5. hook.tap('1', (name, age) => {
  6.   console.log('1===>', name, age);
  7. });
  9. //注册事件监听
  10. hook.tap('2', (name, age) => {
  11.   console.log('2===>', name, age);
  12. });
  13. hook.tap('3', (name, age) => {
  14.   console.log('3===>', name, age);
  15. });

通过hooke触发事件监听

  1. // 触发事件监听
  2. hook.call('zce', 100);

执行懒编译生成的可执行代码

Hooke

tapable 对外暴露了 9 种 Hooks 类。这些 Hooks 类的作用就是通过实例化来创建一个执行流程，并提供注册和执行方法，Hook 类的不同会导致执行流程的不同。
分未同步和异步，异步又分为并行和串行两种模式

  1. const {
  2.     SyncHook,
  3.     SyncBailHook,
  4.     SyncWaterfallHook,
  5.     SyncLoopHook,
  6.     AsyncParallelHook,
  7.     AsyncParallelBailHook,
  8.     AsyncSeriesHook,
  9.     AsyncSeriesBailHook,
  10.     AsyncSeriesWaterfallHook
  11.  } = require("tapable");

分类

按同步、异步（串行、并行）分类

  • Sync：只能被同步函数注册，如 myHook.tap()
  • AsyncSeries：可以被同步的，基于回调的，基于 promise 的函数注册，如 myHook.tap()，myHook.tapAsync() ， myHook.tapPromise()。执行顺序为串行
  • AsyncParallel：可以被同步的，基于回调的，基于 promise 的函数注册，如 myHook.tap()，myHook.tapAsync() ， myHook.tapPromise()。执行顺序为并行

image.png

按执行模式分类

  • Basic：执行每一个事件函数，不关心函数的返回值
    • image.png
  • Bail：执行每一个事件函数，遇到第一个结果 result !== undefined 则返回，不再继续执行
    • image.png
  • Waterfall：如果前一个事件函数的结果 result !== undefined,则 result 会作为后一个事件函数的第一个参数
  • image.png
  • Loop：不停的循环执行事件函数，直到所有函数结果 result === undefined
  • image.png

image.png

同步钩子

注册和回调

注册 执行
tap call

SyncHook

  1. const { SyncHook } = require('tapable');
  3. let hook = new SyncHook(['name', 'age']);
  5. hook.tap('fn1', function (name, age) {
  6.   console.log('fn1--->', name, age);
  7. });
  9. hook.tap('fn2', function (name, age) {
  10.   console.log('fn2--->', name, age);
  11. });
  13. hook.call('zoe', 18);

image.png

SynBailHook

如果中间有值返回了值，一旦有地方断掉了，后面就不会执行
尝试咋fn2返回非undefined

  1. const { SyncBailHook } = require('tapable');
  3. let hook = new SyncBailHook(['name', 'age']);
  5. hook.tap('fn1', function (name, age) {
  6.   console.log('fn1--->', name, age);
  7. });
  9. hook.tap('fn2', function (name, age) {
  10.   console.log('fn2--->', name, age);
  11.   return 1;
  12. });
  14. hook.tap('fn3', function (name, age) {
  15.   console.log('fn3--->', name, age);
  16. });
  18. hook.call('lg', 100);

image.png

当fn2返回了一个undefined的时候后面的fn3就会继续执行了

  1.  const { SyncBailHook } = require('tapable');
  3. let hook = new SyncBailHook(['name', 'age']);
  5. hook.tap('fn1', function (name, age) {
  6.   console.log('fn1--->', name, age);
  7. });
  9. hook.tap('fn2', function (name, age) {
  10.   console.log('fn2--->', name, age);
  11.   return undefined;
  12. });
  14. hook.tap('fn3', function (name, age) {
  15.   console.log('fn3--->', name, age);
  16. });
  18. hook.call('lg', 100);

image.png

SynWaterfallHook

  1. const { SyncWaterfallHook } = require('tapable');
  3. let hook = new SyncWaterfallHook(['name', 'age']);
  5. hook.tap('fn1', function (name, age) {
  6.   console.log('fn1--->', name, age);
  7.   return 'ret1';
  8. });
  10. hook.tap('fn2', function (name, age) {
  11.   console.log('fn2--->', name, age);
  12.   return 'ret2';
  13. });
  15. hook.tap('fn3', function (name, age) {
  16.   console.log('fn3--->', name, age);
  17.   return 'ret3';
  18. });
  20. hook.call('zce', 33);

image.png

如果中间有值返回了undefined,name就继续传递上一个的回调

  1. const { SyncWaterfallHook } = require('tapable');
  3. let hook = new SyncWaterfallHook(['name', 'age']);
  5. hook.tap('fn1', function (name, age) {
  6.   console.log('fn1--->', name, age);
  7.   return 'fn1的回调';
  8. });
  10. hook.tap('fn2', function (name, age) {
  11.   console.log('fn2--->', name, age);
  12.   return undefined;
  13. });
  15. hook.tap('fn3', function (name, age) {
  16.   console.log('fn3--->', name, age);
  17.   return 'ret3';
  18. });
  20. hook.call('zce', 33);

image.png

SynLoopHook

  1. const { SyncLoopHook } = require('tapable');
  3. let hook = new SyncLoopHook(['name', 'age']);
  5. let count1 = 0;
  6. let count2 = 0;
  7. let count3 = 0;
  9. hook.tap('fn1', function (name, age) {
  10.   console.log('fn1--->', name, age);
  11.   if (++count1 === 1) {
  12.     count1 = 0;
  13.     return undefined;
  14.   }
  15.   return true;
  16. });
  18. hook.tap('fn2', function (name, age) {
  19.   console.log('fn2--->', name, age);
  20.   if (++count2 === 2) {
  21.     count2 = 0;
  22.     return undefined;
  23.   }
  24.   return true;
  25. });
  27. hook.tap('fn3', function (name, age) {
  28.   console.log('fn3--->', name, age);
  29. });
  31. hook.call('foo', 100);

image.png

只要某一个环节返回的不是undefined,那么就从这个环节开始循环

异步串行钩子

注册和回调

异步钩子对于注册有两种方式

注册 执行 参数
tapAsync callAsync callback（err first）
tapPromise promise resolve/reject

tapAsync

  1. const { AsyncParallelHook } = require('tapable');
  3. let hook = new AsyncParallelHook(['name']);
  5. console.time('time');
  6. hook.tapAsync('fn1', function (name, callback) {
  7.   setTimeout(() => {
  8.     console.log('fn1--->', name);
  9.     callback();
  10.   }, 1000);
  11. });
  13. hook.tapAsync('fn2', function (name, callback) {
  14.   setTimeout(() => {
  15.     console.log('fn2--->', name);
  16.     callback();
  17.   }, 1000);
  18. });
  20. hook.callAsync('zce', function (err) {
  21.   console.log(err);
  22.   console.log(name);
  23.   console.log('最后的回调执行了');
  24.   console.timeEnd('time');
  25. });

在callback中传参就是error

  1. const { AsyncParallelHook } = require('tapable');
  3. let hook = new AsyncParallelHook(['name']);
  5. console.time('time');
  6. hook.tapAsync('fn1', function (name, callback) {
  7.   setTimeout(() => {
  8.     console.log('fn1--->', name);
  9.     callback(1);
  10.   }, 1000);
  11. });
  13. hook.tapAsync('fn2', function (name, callback) {
  14.   setTimeout(() => {
  15.     console.log('fn2--->', name);
  16.     callback();
  17.   }, 1000);
  18. });
  20. hook.callAsync('zce', function (err) {
  21.   console.log(err);
  22.   console.log('最后的回调执行了');
  23.   console.timeEnd('time');
  24. });

image.png
注意此时
此时能够抛出fn2是因为callback发出err是在定时器当中，当发出callbackError的时候定时器已经注册了
如果改成如下

  1. const { AsyncParallelHook } = require('tapable');
  3. let hook = new AsyncParallelHook(['name']);
  5. console.time('time');
  6. hook.tapAsync('fn1', function (name, callback) {
  7.   callback(1);
  8.   setTimeout(() => {
  9.     console.log('fn1--->', name);
  10.   }, 1000);
  11. });
  13. hook.tapAsync('fn2', function (name, callback) {
  14.   setTimeout(() => {
  15.     console.log('fn2--->', name);
  16.     callback();
  17.   }, 1000);
  18. });
  20. hook.callAsync('zce', function (err) {
  21.   console.log(err);
  22.   console.log('最后的回调执行了');
  23.   console.timeEnd('time');
  24. });

image.png
就不会触发fn2
promise

  1. const { AsyncParallelHook } = require('tapable');
  3. let hook = new AsyncParallelHook(['name']);
  5. console.time('time');
  7. hook.tapPromise('fn1', function (name) {
  8.   return new Promise(function (resolve, reject) {
  9.     setTimeout(() => {
  10.       console.log('fn1--->', name);
  11.       resolve();
  12.     }, 1000);
  13.   });
  14. });
  16. hook.tapPromise('fn2', function (name) {
  17.   return new Promise(function (resolve, reject) {
  18.     setTimeout(() => {
  19.       console.log('fn2--->', name);
  20.       resolve();
  21.     }, 2000);
  22.   });
  23. });
  25. hook.promise('foo').then(() => {
  26.   console.log('end执行了');
  27.   console.timeEnd('time');
  28. });

AsyncSeriesHook

钩子函数会串行执行，会保证执行的顺序，上一个钩子结束后，下一个钩子才会开始，执行事件注册的回调函数会最后执行。

  1. const hook = AsyncSeriesHook(['arg']);
  2. const start = Date.now();
  4. hook.tapAsync('listen1', (arg, callback) => {
  5.   console.log(`listen1==耗时：${Date.now() - start}`)
  6.   setTimeout(() => {
  7.     callback();
  8.   }, 1000);
  9. });
  10. hook.tapAsync('listen2', (arg, callback) => {
  11.   console.log(`listen2==耗时：${Date.now() - start}`)
  12.   setTimeout(() => {
  13.     callback();
  14.   }, 2000);
  15. });
  17. hook.callAsync('hello', () => {
  18.   console.log(`回调函数执行，耗时：${Date.now() - start}`);
  19. });
  21. /**
  22.   输出：
  23.   listen1==耗时：1
  24.   listen2==耗时：1013
  25.   回调函数执行，耗时：3018
  26.  */

AsyncSeriesBailHook

钩子函数会异步串行执行，但只要有一个钩子函数调用callback时传入了一个非undefined值，那么执行事件时注册的回调函数就会执行，剩下的钩子函数将不会执行。

  1. const hook = AsyncSeriesBailHook(['arg']);
  2. const start = Date.now();
  4. hook.tapAsync('listen1', (arg, callback) => {
  5.   console.log('listen1')
  6.   setTimeout(() => {
  7.     callback(true);
  8.   }, 1000);
  9. });
  10. hook.tapAsync('listen2', (arg, callback) => {
  11.   console.log('listen2')
  12.   setTimeout(() => {
  13.     callback();
  14.   }, 2000);
  15. });
  17. hook.callAsync('hello', () => {
  18.   console.log(`回调函数执行，耗时：${Date.now() - start}`);
  19. });
  21. /**
  22.   输出：
  23.   listen1
  24.   回调函数执行，耗时：1014
  25.  */

AsyncSeriesWaterfallHookHook

钩子函数会异步串行执行，前一个钩子函数通过调用callback传入的参数会作为下一个钩子函数的参数，当所有钩子函数执行结束后，才会触发执行事件时注册的回调函数，该回调函数中接收了最后一个钩子函数返回的参数。

  1. const hook = AsyncSeriesWaterfallHook(['arg']);
  2. const start = Date.now();
  4. hook.tapAsync('listen1', (arg, callback) => {
  5.   console.log('listen1', arg)
  6.   setTimeout(() => {
  7.     callback(null, `${arg} listen1`);
  8.   }, 1000);
  9. });
  10. hook.tapAsync('listen2', (arg, callback) => {
  11.   console.log('listen2', arg)
  12.   setTimeout(() => {
  13.     callback(null, `${arg} listen2`);
  14.   }, 2000);
  15. });
  17. hook.callAsync('hello', (_, arg) => {
  18.   console.log(`回调函数执行，耗时：${Date.now() - start}, arg:`, arg);
  19. });
  21. /**
  22.   输出：
  23.   listen1 hello
  24.   listen2 hello listen1
  25.   回调函数执行，耗时：3016, arg: hello listen1 listen2
  26.  */

异步并行钩子

AsyncParallelHook

钩子函数会异步并行执行，当所有钩子函数的回调函数都执行后，才会触发执行事件时注册的回调函数。

  1. const hook = AsyncParallelHook(['arg']);
  2. const start = Date.now();
  4. hook.tapAsync('listen1', (arg, callback) => {
  5.   console.log('listen1', arg)
  6.   setTimeout(() => {
  7.     callback();
  8.   }, 1000);
  9. });
  10. hook.tapAsync('listen2', (arg, callback) => {
  11.   console.log('listen2', arg);
  12.   setTimeout(() => {
  13.     callback();
  14.   }, 2000);
  15. });
  17. hook.callAsync('hello', () => {
  18.   console.log(`回调函数执行，耗时：${Date.now() - start}`);
  19. });
  21. /**
  22.   输出：
  23.   listen1 hello
  24.   listen2 hello
  25.   回调函数执行，耗时：2013
  26.  */

callback传递一个err的时候回立即调用回调

  1. const hook = AsyncParallelHook(['arg']);
  2. const start = Date.now();
  4. hook.tapAsync('listen1', (arg, callback) => {
  5.   console.log('listen1', arg)
  6.   setTimeout(() => {
  7.     callback(1);
  8.   }, 1000);
  9. });
  10. hook.tapAsync('listen2', (arg, callback) => {
  11.   console.log('listen2', arg);
  12.   setTimeout(() => {
  13.     callback();
  14.   }, 2000);
  15. });
  17. hook.callAsync('hello', (err) => {
  18.   console.log(err)
  19.   console.log(`回调函数执行，耗时：${Date.now() - start}`);
  20. });
  22. /**
  23.   输出：
  24.   listen1 hello
  25.   1
  26.   回调函数执行，耗时：2013
  27.  */

AsyncParallelBailHook

钩子函数会异步并行执行，当某个钩子函数中调用callback时，传入了一个非undefined的值，那么执行事件时注册的回调函数会立即执行。

  1. const { AsyncParallelBailHook } = require('tapable');
  3. const hook = AsyncParallelBailHook(['arg']);
  4. const start = Date.now();
  6. hook.tapAsync('listen1', (arg, callback) => {
  7.   setTimeout(() => {
  8.     console.log('listen1', arg);
  9.     callback(true);
  10.   }, 1000);
  11. });
  12. hook.tapAsync('listen2', (arg, callback) => {
  13.   setTimeout(() => {
  14.     console.log('listen2', arg);
  15.     callback();
  16.   }, 2000);
  17. });
  19. hook.callAsync('hello', () => {
  20.   console.log(`回调函数执行，耗时：${Date.now() - start}`);
  21. });
  23. /**
  24.   输出：
  25.   listen1 hello
  26.   回调函数执行，耗时：1015
  27.   listen2 hello
  28.  */

Hook 类使用

Hook类使用

简单来说就是下面步骤

  1. 实例化构造函数 Hook
  2. 注册（一次或者多次）
  3. 执行（传入参数）
  4. 如果有需要还可以增加对整个流程（包括注册和执行）的监听-拦截器

以最简单的 SyncHook 为例：

  2. // 简单来说就是实例化 Hooks 类
  3. // 接收一个可选参数，参数是一个参数名的字符串数组
  4. const hook = new SyncHook(["arg1", "arg2", "arg3"]);
  5. // 注册
  6. // 第一个入参为注册名
  7. // 第二个为注册回调方法
  8. hook.tap("1", (arg1, arg2, arg3) => {
  9.   console.log(1, arg1, arg2, arg3);
  10.   return 1;
  11. });
  12. hook.tap("2", (arg1, arg2, arg3) => {
  13.   console.log(2, arg1, arg2, arg3);
  14.   return 2;
  15. });
  16. hook.tap("3", (arg1, arg2, arg3) => {
  17.   console.log(3, arg1, arg2, arg3);
  18.   return 3;
  19. });
  20. // 执行
  21. // 执行顺序则是根据这个实例类型来决定的
  22. hook.call("a", "b", "c");
  24. //------输出------
  25. // 先注册先触发
  26. 1 a b c
  27. 2 a b c
  28. 3 a b c

上面的例子为同步的情况，若注册异步则：

  1. let { AsyncSeriesHook } = require("tapable");
  2. let queue = new AsyncSeriesHook(["name"]);
  3. console.time("cost");
  4. queue.tapPromise("1", function (name) {
  5.   return new Promise(function (resolve) {
  6.     setTimeout(function () {
  7.       console.log(1, name);
  8.       resolve();
  9.     }, 1000);
  10.   });
  11. });
  12. queue.tapPromise("2", function (name) {
  13.   return new Promise(function (resolve) {
  14.     setTimeout(function () {
  15.       console.log(2, name);
  16.       resolve();
  17.     }, 2000);
  18.   });
  19. });
  20. queue.tapPromise("3", function (name) {
  21.   return new Promise(function (resolve) {
  22.     setTimeout(function () {
  23.       console.log(3, name);
  24.       resolve();
  25.     }, 3000);
  26.   });
  27. });
  28. queue.promise("weiyi").then((data) => {
  29.   console.log(data);
  30.   console.timeEnd("cost");
  31. });

HookMap 类使用

官方推荐将所有的钩子实例化在一个类的属性 hooks 上，如：

  1. class Car {
  2.     constructor() {
  3.         this.hooks = {
  4.             accelerate: new SyncHook(["newSpeed"]),
  5.             brake: new SyncHook(),
  6.             calculateRoutes: new AsyncParallelHook(["source", "target", "routesList"])
  7.         };
  8.     }
  9.     /* ... */
  10.     setSpeed(newSpeed) {
  11.         // following call returns undefined even when you returned values
  12.         this.hooks.accelerate.call(newSpeed);
  13.     }
  14. }

执行和注册

  1. const myCar = new Car();
  3. myCar.hooks.accelerate.tap("LoggerPlugin", newSpeed => console.log(`Accelerating to ${newSpeed}`));
  5. myCar.setSpeed(1)

而 HookMap 正是这种推荐写法的一个辅助类。具体使用方法：

  1. const keyedHook = new HookMap(key => new SyncHook(["arg"]))
  3. keyedHook.for("some-key").tap("MyPlugin", (arg) => { /* ... */ });
  4. keyedHook.for("some-key").tapAsync("MyPlugin", (arg, callback) => { /* ... */ });
  5. keyedHook.for("some-key").tapPromise("MyPlugin", (arg) => { /* ... */ });
  7. const hook = keyedHook.get("some-key");
  8. if(hook !== undefined) {
  9.     hook.callAsync("arg", err => { /* ... */ });
  10. }

MultiHook 类使用

相当于提供一个存放一个 hooks 列表的辅助类：

  1. const { MultiHook } = require("tapable");
  3. this.hooks.allHooks = new MultiHook([this.hooks.hookA, this.hooks.hookB]);