【JavaScript设计模式】增强版发布订阅模式——Webpack的核心Tapable（一）

本文链接：https://blog.csdn.net/pfourfire/article/details/126889520

Tapable简介

Webpack整体架构的实现就是靠它的插件系统，其中Compiler和Compilation负责管理整个构建流程，同时暴露出一些Hook，然后由不同职责的插件来监听这些Hook，并在合适的时机完成具体的工作。Tapable是整个Webpack插件系统的核心，Webpack中的所有插件都继承了Tapable类（Webpack5中已不再继承）。而从Tapable的一些特性中可以看出，Tapable其实是一种增强版的发布订阅模式。先看看Tapable提供了哪些Hook：

序号	Hook类型	Hook名称	监听方法	是否可并行
1	SyncHook	同步钩子	tap	否
2	SyncBailHook	同步熔断钩子	tap	否
3	SyncWaterfallHook	同步瀑布钩子	tap	否
4	SyncLoopHook	同步循环钩子	tap	否
5	AsyncParallelHook	异步并行钩子	tap	tapAsync
6	AsyncParallelBailHook	异步并行熔断钩子	tap	tapAsync
7	AsyncSeriesHook	异步串行钩子	tap	tapAsync
8	AsyncSeriesBailHook	异步串行熔断钩子	tap	tapAsync
9	AsyncSeriesLoopHook	异步串行循环钩子	tap	tapAsync
10	AsyncSeriesWaterfallHook	异步串行瀑布钩子	tap	tapAsync

Sync：同步。> Async：异步。> Bail：当一个hook注册了多个回调方法，若任意一个回调方法返回了不为undefined的值，就不再执行后面的回调方法。> Waterfall：当一个hook注册了多个回调方法，前一个回调执行完了才会执行下一个回调，而前一个回调的执行结果会作为参数传给下一个回调函数。> Loop：当一个hook注册了回调方法，如果这个回调方法返回了true就重复循环这个回调，只有当这个回调返回undefined才执行下一个回调。> Parallel：当一个hook注册了多个回调方法，这些回调同时开始并行执行。> Series：当一个hook注册了多个回调方法，前一个执行完了才会执行下一个。

下载Tapable（v2.2.1）的源码，打开/index.js：

exports.SyncHook = require("./SyncHook");
exports.SyncBailHook = require("./SyncBailHook");
exports.SyncWaterfallHook = require("./SyncWaterfallHook");
exports.SyncLoopHook = require("./SyncLoopHook");
exports.AsyncParallelHook = require("./AsyncParallelHook");
exports.AsyncParallelBailHook = require("./AsyncParallelBailHook");
exports.AsyncSeriesHook = require("./AsyncSeriesHook");
exports.AsyncSeriesBailHook = require("./AsyncSeriesBailHook");
exports.AsyncSeriesLoopHook = require("./AsyncSeriesLoopHook");
exports.AsyncSeriesWaterfallHook = require("./AsyncSeriesWaterfallHook");
exports.HookMap = require("./HookMap");
exports.MultiHook = require("./MultiHook");

可以看到，Tapable导出了10个钩子函数和2个工具类。其中每一个…Hook.js文件都对应一个钩子函数的实现。而HookMap.js和MultiHook.js分别定义了Tapable的两个工具类：HookMap和MultiHook。余下两个文件：Hook.js和HookCodeFactory.js分别定义了Tapable的核心类：Hook和HookCodeFactory，Tapable中的所有钩子函数都继承自这两个类。