Webpack学习——如何自定义钩子

仅为学习记录

Tapable 库是Webpack 官方维护的钩子工具库，自定义钩子的核心是基于 Tapable 库实现 "事件注册 - 触发" 机制。让外部（或插件）能在特定节点执行自定义逻辑，实现功能扩展。

一、Tapable常用钩子

1、同步钩子

共同点

所有回调同步执行（按注册顺序依次执行，或满足条件终止）；
注册回调用

javascript 复制代码

tap(name, callback)；

触发钩子用

javascript 复制代码

call(...args)

区别

异步钩子

共同点

支持异步操作（如读取文件、请求接口）
注册回调分 3 种方式（按需选）

javascript 复制代码

tap(name, callback)：同步回调（兼容同步逻辑）；
tapAsync(name, (..., callback) => { ... callback() })：回调式异步（通过 callback() 通知完成）；
tapPromise(name, (..., callback) => Promise)：Promise 式异步（返回 Promise 通知完成）；

触发钩子

javascript 复制代码

回调式异步用 callAsync(...args, (err) => { ... })；
Promise 式异步用 promise(...args).then().catch()

区别

二、自定义钩子的核心步骤

选择钩子类型：根据需求选 Tapable 提供的钩子类
封装钩子 API：创建 "钩子管理器" 或 "插件系统"，封装 tap()（注册回调）和 call()（触发钩子），避免直接暴露Tapable 底层 API；
绑定和触发：外部（或插件）通过封装的 API 注册回调，在合适的时机（如用户点击、流程节点）触发钩子。

三、自定义一个简单的onClick钩子

当用户进行点击操作时触发钩子

新建一个钩子管理器

javascript 复制代码

// 1. 引入 Tapable 同步钩子
const { SyncHook } = require("tapable");

// 2. 钩子管理器
class TapableOnClick {
  constructor() {
    // 定义 onClick 钩子：声明触发时传递的参数（clickData）
    this.onClick = new SyncHook(["clickData"]);
  }

  // 注册回调：外部绑定点击逻辑（封装 Tapable 的 tap 方法）
  register(callback) {
    // 第一个参数是回调标识（调试用，可自定义），第二个是回调函数
    this.onClick.tap("OnClickCallback", callback);
  }

  // 触发钩子：模拟用户点击（封装 Tapable 的 call 方法）
  trigger(clickData) {
    this.onClick.call(clickData); // 传递实际点击数据
  }
}

触发钩子

javascript 复制代码

const TapableOnClick=new TapableOnClick()
document.addEventListener("click", (event) => {
    TapableOnClick.trigger(event)
});

四、Tapable常用钩子选型速查表

五、避坑点

同步钩子报错会阻断执行：Sync 系列钩子中，某个回调抛出错误，后续所有回调都不会执行；
异步钩子必须 "通知完成"：tapAsync 必须调用 callback()，tapPromise 必须返回
Promise，否则钩子会一直等待；
熔断钩子的 "终止条件"：Bail 系列钩子中，"返回非 undefined"（同步）或 "Promise resolved 非undefined"（异步）才会熔断，返回 undefined 或 Promise resolved undefined 会继续执行；
并行钩子的 "中断逻辑"：AsyncParallelBailHook触发熔断后，已启动的异步回调不会自动停止（需手动处理，如清除定时器、取消接口请求）。