分享 vivo 互联网技术干货与沙龙活动，推荐最新行业动态与热门会议。
分类： JavaScript
2021-03-10 09:55:29
Webpack 基于 tapable 构建了其复杂庞大的流程管理系统，基于 tapable 的架构不仅解耦了流程节点和流程的具体实现，还保证了 Webpack 强大的扩展能力；学习掌握tapable，有助于我们深入理解 Webpack。
The tapable package expose many Hook classes,which can be used to create hooks for plugins.
tapable 提供了一些用于创建插件的钩子类。
个人觉得 tapable 是一个基于事件的流程管理工具。
tapable于2020.9.18发布了v2.0版本。此文章内容也是基于v2.0版本。
tapable有两个基类：Hook和HookCodeFactory。Hook类定义了Hook interface(Hook接口)， HookCodeFactoruy类的作用是动态生成一个流程控制函数。生成函数的方式是通过我们熟悉的New Function(arg，functionBody)。
tapable会动态生成一个可执行函数来控制钩子函数的执行。我们以SyncHook的使用来举一个例子，比如我们有这样的一段代码：
|
1
2
3
4
5
|
// SyncHook使用
import { SyncHook } from '../lib';
const syncHook = new SyncHook();
syncHook.tap('x', () => console.log('x done'));
syncHook.tap('y', () => console.log('y done'));
|
上面的代码只是注册好了钩子函数，要让函数被执行，还需要触发事件（执行调用）
|
1
|
syncHook.call();
|
syncHook.call()在调用时会生成这样的一个动态函数：
|
1
2
3
4
5
6
7
8
9
|
function anonymous() {
"use strict";
var _context;
var _x = this._x;
var _fn0 = _x[0];
_fn0();
var _fn1 = _x[1];
_fn1();
}
|
这个函数的代码非常简单：就是从一个数组中取出函数，依次执行。注意：不同的调用方式，最终生成的的动态函数是不同的。如果把调用代码改成：
|
1
|
