webpack - tapable 简记

发表于 更新于 分类于 Disqus： 本文字数： 596 阅读时长 ≈ 1 分钟

记录 webpack 的 tapable 库的用法。

基本用法

  1. owner: 实例化一种 Hook 类，比如 SyncHook。
  2. client：插入事件回调
  3. onwer: 触发某事件，调用事件回调
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const { SyncHook } = require('tapable')

// new
const syncHook = new SyncHook(['eventArg1', 'eventArg2'])

// tap
syncHook.tap('MyEventName', (eventArg1, eventArg2) => {
	console.log('MyEventName Args:', eventArg1, eventArg2)
})

// call
syncHook.call('value1', 'value2')

// output:
// MyEventName Args: value1 value2

核心设计

Hook.call() 是由 HookCodeFactory.create() 动态创建的，为了提高在触发 大量的事件回调 时的性能，通过动态生成 硬编码 的Function，来达到 减少循环和遍历开销，编译优化，避免重复解析 的性能优化目的。

UML