tapable 是 webpack 的核心工具库。

工作流程

  1. 实例化 hook 注册事件监听
  2. 通过 hook 触发事件监听
  3. 运行懒编译的代码

Hook 分类

根据执行机制，hook 分为同步（Sync）和异步（Async）。异步 hook 根据执行方式又可以分为串行执行（Series）和并行执行（Parallel）。
根据执行特点，hook 又可以分为以下四类：

  • Hook : 普通钩子，监听器之间互相不干扰。
  • BailHook : 熔断钩子，某个监听返回非 undefined 时后续不执行。
  • WaterfallHook : 瀑布钩子，上一个监听的返回值可以传递给下一个。
  • LoopHook : 循环钩子，如果当前未返回 false 则一直执行。

hook.svg

同步钩子工作流程概述

  1. 导入钩子
    1. 导入钩子时，会自动创建一个对应的代码工厂 HookCodeFactory。
  2. 实例化钩子实例
    1. 创建一个 Hook 实例，传入形参，挂载args、taps、_x属性，重写构造函数，tap 方法，compile 方法，返回 hook 实例。
  3. 使用 tap 注册函数
    1. 把函数名、函数体合并成一个对象，将对象放入 taps 数组中。
  4. 触发事件
    1. 调用 call 方法，调用重写过的 compile 方法，
    2. 从 taps 数组中取出所有回调函数体，放入 _x 数组中。
    3. 从 _x 数组中取出事件函数，拼接成一段可执行代码。
    4. 传入实参到生成的可执行代码的自调用函数。

同步钩子源码实现

Hook类：

  1. class Hook {
  2.   constructor(args = []) {
  3.     this.args = args
  4.     this.taps = []  // 将来用于存放组装好的 {}
  5.     this._x = undefined // 将来在代码工厂函数中会给 _x = [f1, f2, ...]
  6.   }
  8.   tap(options, fn) {
  9.     if (typeof options === 'string') {
  10.       options = { name: options }
  11.     }
  12.     options = Object.assign({fn}, options) // { fn: func, name: fn1 }
  14.     // 调用一下方法将组装好的 options 添加至 []
  15.     this._insert(options)
  16.   }
  18.   _insert(options) {
  19.     this.taps[this.taps.length] = options
  20.   }
  22.   call(...args) {
  23.     // 01 创建将来要具体执行的函数代码结构
  24.     let callFn = this._createCall()
  25.     // 02 调用上述的函数（args传入进去）
  26.     return callFn.apply(this, args)
  27.   }
  29.   _createCall() {
  30.     return this.compile({
  31.       taps: this.taps,
  32.       args: this.args
  33.     })
  34.   }
  35. }
  37. module.exports = Hook

SyncHook类和代码工厂类：

  1. const Hook = require('./Hook')
  3. class HookCodeFactory {
  4.   args() {
  5.     return this.options.args.join(',') // ['name', 'age'] -> 'name,age'
  6.   }
  7.   head() {
  8.     return `var _x = this._x;`
  9.   }
  10.   content() {
  11.     let code = ''
  12.     for (let i = 0; i < this.options.taps.length; i++) {
  13.       // code += `var _fn0 = _x[0];_fn0(name, age)`
  14.       code += `var _fn${i} = _x[${i}];_fn${i}(${this.args()});`
  16.     }
  17.     return code
  18.   }
  19.   setup(instance, options) { // 先准备后续需要使用的数据
  20.     this.options = options // 这里的操作在源码中是通过 init 方法实现，目前只是直接挂载在 this 上
  21.     instance._x = options.taps.map(t => t.fn) // this._x = [f1, f2,...]
  22.   }
  23.   create() { // 核心是创建一段可执行的代码体然后返回
  24.     let fn
  25.     fn = new Function(this.args(), this.head() + this.content())
  26.     return fn
  27.   }
  28. }
  30. let factory = new HookCodeFactory()
  32. class SyncHook extends Hook {
  33.   constructor(args) {
  34.     super(args)
  35.   }
  37.   compile(options) { // options: { taps: [{}, {}...], args: [name, age] }
  38.     factory.setup(this, options)
  39.     return factory.create(options,)
  40.   }
  41. }
  43. module.exports = SyncHook

使用自实现 SyncHook ：

  1. const SyncHook = require('./SyncHook')
  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('zce', 18)

异步钩子工作流程概述

异步钩子工作流程大致与同步钩子相同，主要有两个区别：

  1. 拼接代码时，代码工厂类的 args 方法传入了 after 参数，值为 ‘_callback’，这样一来生成的代码的自调用函数就会多一个形参 _callback。
  2. 生成的自调用函数有一个计数器 _counter，一个最后执行的 done 方法，done 方法调用 _callback 参数传进来的函数。

异步钩子源码实现

Hook 类：

  1. class Hook {
  2.   constructor(args = []) {
  3.     this.args = args
  4.     this.taps = []  // 将来用于存放组装好的 {}
  5.     this._x = undefined // 将来在代码工厂函数中会给 _x = [f1, f2, ...]
  6.   }
  8.   tapAsync(options, fn) {
  9.     if (typeof options === 'string') {
  10.       options = { name: options }
  11.     }
  12.     options = Object.assign({fn}, options) // { fn: func, name: fn1 }
  14.     // 调用一下方法将组装好的 options 添加至 []
  15.     this._insert(options)
  16.   }
  18.   _insert(options) {
  19.     this.taps[this.taps.length] = options
  20.   }
  22.   callAsync(...args) {
  23.     // 01 创建将来要具体执行的函数代码结构
  24.     let callFn = this._createCall()
  25.     // 02 调用上述的函数（args传入进去）
  26.     return callFn.apply(this, args)
  27.   }
  29.   _createCall() {
  30.     return this.compile({
  31.       taps: this.taps,
  32.       args: this.args
  33.     })
  34.   }
  35. }
  37. module.exports = Hook
  1. AsyncParallelHook 和 工厂类：
  1. const Hook = require('./Hook')
  3. class HookCodeFactory {
  4.   args({ before, after } = {}) {
  5.     let allArgs = this.options.args
  6.     if (before) allArgs = [before].concat(allArgs)
  7.     if (after) allArgs = allArgs.concat(after)
  8.     return allArgs.join(',')
  9.   }
  10.   head() {
  11.     return `"use strict";var _x = this._x;var _content;`
  12.   }
  13.   content() {
  14.     let code = `var _counter = ${this.options.taps.length}; var _done = (function () { _callback(); });`
  15.     for (let i = 0; i < this.options.taps.length; i++) {
  16.       code += `var _fn${i} = _x[${i}]; _fn${i}(${this.args()}, (function () { if (--_counter === 0) _done(); }));`
  18.     }
  19.     return code
  20.   }
  21.   setup(instance, options) { // 先准备后续需要使用的数据
  22.     this.options = options // 这里的操作在源码中是通过 init 方法实现，目前只是直接挂载在 this 上
  23.     instance._x = options.taps.map(t => t.fn) // this._x = [f1, f2,...]
  24.   }
  25.   create() { // 核心是创建一段可执行的代码体然后返回
  26.     let fn
  27.     fn = new Function(this.args({ after: '_callback' }), this.head() + this.content())
  28.     return fn
  29.   }
  30. }
  32. let factory = new HookCodeFactory()
  34. class AsyncParallelHook extends Hook {
  35.   constructor(args) {
  36.     super(args)
  37.   }
  39.   compile(options) { // options: { taps: [{}, {}...], args: [name, age] }
  40.     factory.setup(this, options)
  41.     return factory.create(options)
  42.   }
  43. }
  45. module.exports = AsyncParallelHook

使用自实现 AsyncParallelHook：

  1. const AsyncParallelHook = require('./AsyncParallelHook')
  3. let hook = new AsyncParallelHook(['name', 'age'])
  5. hook.tapAsync('fn1', function (name, age, callback) {
  6.   console.log('fn1--->', name, age)
  7.   callback()
  8. })
  11. hook.tapAsync('fn2', function (name, age, callback) {
  12.   console.log('fn2--->', name, age)
  13.   callback()
  14. })
  16. hook.callAsync('zce', 18, function () {
  17.   console.log('end')
  18. })