Understanding Tapable: Hooks and Flow Control in Webpack

Tapable is a flow‑control library used by webpack that provides synchronous and asynchronous hook mechanisms for plugin communication.

The library centers on the Hook class, which manages a list of tapped functions (taps) and provides methods such as tap, tapAsync, tapPromise for subscription and call, callAsync, promise for publishing.

When creating a hook, an args array defines the number of parameters passed to tapped functions; the SyncHook example shows instantiation, registration with tap, and invocation via call.

const syncHook = new SyncHook(["name", "age"]);<br>syncHook.tap("1", (name, age, sex) => { console.log("1", name, age, sex); return 1; });<br>syncHook.tap("2", (name, age) => { console.log("2", name, age); return 2; });<br>syncHook.call("zs", 18, "男");

The source code analysis breaks down the internal implementation: the _tap method normalizes options, validates name, stores type and fn, runs interceptors, and inserts the options into the taps array.

_tap(type, options, fn) {<br>  if (typeof options === "string") { options = { name: options.trim() }; }<br>  else if (typeof options !== "object" || options === null) { throw new Error("Invalid tap options"); }<br>  // … validation and insertion …<br>}

Event publishing uses _createCall, which calls the compile method; each hook type (SyncHook, AsyncParallelHook, etc.) implements a factory that generates a Function via new Function(args, body).

The article then shows the generated function code for various hooks: SyncHook, AsyncParallelHook, AsyncSeriesHook, SyncBailHook, AsyncParallelBailHook, AsyncSeriesBailHook, SyncWaterfallHook, AsyncSeriesWaterfallHook, SyncLoopHook, and AsyncSeriesLoopHook, illustrating how results propagate, bail behavior, waterfall chaining, and looping.

// SyncHook generated function<br>(function anonymous(name, age) {<br>  "use strict";<br>  var _x = this._x;<br>  var _fn0 = _x[0]; _fn0(name, age);<br>  var _fn1 = _x[1]; _fn1(name, age);<br>})();

Finally, tapable employs lazy delegation: the first call to call reassigns this.call to the compiled function, avoiding repeated compilation.

const CALL_DELEGATE = function(...args) {<br>  this.call = this._createCall("sync");<br>  return this.call(...args);<br>};