Webpack packaging is an event flow mechanism that connects plugins together, and the core of this is tapable. And the Compiler responsible for compiling in the Webpack and the Compilation responsible for creating bundles are the actual columns of the Tapable constructor

Based on “webpack”: “^4.43.0”, this version of the package. After you install the Webpack, it comes with a tapable package. It is made up of the following JS files under the Tapable package.

Tapable is essentially a mechanism that controls the flow of execution between a series of registered events. Hooks are synchronous and asynchronous

Understand sync-type hooks

Syncook.js is a file that handles serial synchronized execution. After an event is triggered, all event handlers are executed in the order in which the event was registered.

const { SyncHook } = require('tapable'); Const syncHook = new syncHook ([)"name"."age"]); // Register the event syncook.tap ("1", (name, age) => {
  console.log("1", name, age);
});
syncHook.tap("2", (name, age) => {
  console.log("2", name, age);
});
syncHook.tap("3", (name, age) => {
  console.log("3", name, age); }); // Trigger the event to make the listener execute syncook.call ("kongzhiEvent-1", 18);
Copy the code

Syncbailhook. js also executes serially synchronously, if a return value is not null at the time the event handler is executed. The remaining unexecuted event handlers are skipped.

SyncWaterfallHook is executed sequentially and synchronously, with the return value of the last event handler passed as an argument to the next event handler, and so on.

SyncLoopHook is executed in serial synchronization. The event handler returns true to continue the loop, or undefined to end the loop.

Understand Async hooks

The Async type can register different types of plug-in hooks using TAP, tapSync, and tapPromise, which we can call with the Call, callAsync, and Promise methods, respectively.

Refer to the link

Webpack4 core module Tapable source code analysis