从 Webpack Tapable 详解

Webpack本质基于事件流，流程就是将各个插件串联执行，实现此功能的核心就是tapable。

tapable 是一个类似于 Node.js 中的 EventEmitter的库，更专注于自定义事件的触发和处理。webpack 通过 tapable 将实现与流程解耦，所有具体实现通过插件的形式存在。

最终：webpack 通过 tapable 的钩子设计完美实现与流程解耦开来

tapable api：

const {
    SyncHook,
    SyncBailHook,
    SyncWaterfallHook,
    SyncLoopHook,
    AsyncParallelHook,
    AsyncParallelBailHook,
    AsyncSeriesHook,
    AsyncSeriesBailHook,
    AsyncSeriesWaterfallHook 
 } = require("tapable");

 

同步钩子

 

异步钩子