在 上一篇文章 中，我们介绍了 webpack 4 的基本原理和核心流程；而在本篇文章中，我们将深入探讨 webpack4 中的另一个重要组成部分：tapable。
tapable 简介
tapable 是 webpack4 中的一个重要组件，它实现了一个发布-订阅模式的事件处理系统，使得 webpack 的各个内部组件可以灵活地进行通信和交互。
tapable 的核心理念是“钩子”（hook），一个钩子就是一个通过发布-订阅模式来收集和处理事件的函数集合。在 webpack 中，钩子通常是静态类常量（如 SyncHook、AsyncSeriesHook 等），对应特定的事件处理场景。
利用 tapable，webpack 的内部组件就可以通过钩子来发出事件或处理事件，从而实现代码转换、文件打包、资源加载等各种功能。
实例分析
下面我们以 SyncHook 钩子为例，来介绍 tapable 的具体使用方法。
安装
在使用 tapable 之前，我们需要先安装以下依赖：
npm install tapable --save-dev
初始化
在使用钩子之前，我们需要先初始化一个钩子，代码如下：
-- -------------------- ---- ------- ----- - -------- - - ------------------- ----- ---- - --- ----------------- --------- -- -- ----- ---- -------------------- ------ ----- -- - ------------------ ------- ------ ------------------ ------- ------ --- -- ---- ---------------- -------展开代码
在上述代码中，我们初始化了一个 SyncHook 钩子，并定义了两个事件参数 arg1 和 arg2。然后通过 hook.tap 方法注册一个事件处理函数，其中 MyPlugin 是一个可选参数，用于标识事件处理函数的来源；最后通过 hook.call 方法触发事件，并传入实际参数 foo 和 bar。
多个事件处理函数
在实际场景中，我们可能需要多个事件处理函数来处理同一个事件。这时，我们只需要使用 hook.tap 方法注册多个处理函数即可，如下所示：
-- -------------------- ---- ------- ----- ---- - --- ------------------- --------------------- ---- -- - ------------------ ---- ------ --- --------------------- ---- -- - ------------------ ---- ------ --- -----------------展开代码
在上述代码中，我们注册了两个事件处理函数 MyPlugin1 和 MyPlugin2，分别输出 Event 1 和 Event 2。当我们使用 hook.call 方法触发事件时，所有注册的事件处理函数按注册的顺序依次执行。
异步事件处理
在 webpack4 中，大部分钩子都是异步钩子，可以处理异步事件。比如 AsyncSeriesHook 钩子，可以按顺序处理异步事件。下面是一个实例：
-- -------------------- ---- ------- ----- - --------------- - - ------------------- ----- ---- - --- -------------------------- ---------------------------- ---- -- - ------ --- --------------- -- - ------------- -- - ------------------ ---- ------ ---------- -- ------ --- --- ---------------------------- ---- -- - ------ --- --------------- -- - ------------- -- - ------------------ ---- ------ ---------- -- ----- --- --- -------------------------------- -- - ---------------- -------- ---展开代码
在上述代码中，我们使用 AsyncSeriesHook 钩子来处理异步事件。在注册事件处理函数时，我们可以使用 hook.tapPromise 方法来注册一个返回 Promise 对象的事件处理函数。在事件处理函数中，我们使用 setTimeout 来模拟异步操作。然后使用 hook.callPromises 方法触发异步事件，并调用 then 方法处理结果。
在实际应用中，我们可以根据具体业务需要选择不同类型的钩子来处理事件。
结语
以上是关于 tapable 的简单介绍和使用方法。tapable 的 API 丰富多样，可以根据不同业务场景自由组合和扩展，灵活处理各种事件。在学习和使用 webpack4 的过程中，tapable 组件的理解和掌握也是必不可少的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c51cd56e1fc40e36e65f2e
