webpack 核心的compiler、compilation对象均依赖了tapable,tapable是一套完整的事件触发管理机制,webpack的插件本质是监听compiler、compilation对象派发的各种事件,完成特定任务。
tapable概览:
如图tapable源码暴露的主要Hooks
Hooks分类:
1、同步钩子
SyncHook:同步串行执行不关心返回值,如下图所示,虽然先注册的B、后注册A,但是注册A时指定了在B之前执行。所以最终打印结果为 ['A','B'] 。
SyncBailHook:可以中断的同步钩子,串行同步执行,有一个返回值不为undefined则跳过剩下的逻辑,如下例子将会跳过“B”的执行,因为A事件返回了true,而非undefined。执行结果只打印了A
SyncWaterfallHook:无法中断的流水式钩子,串行同步执行,上一个注册事件的返回值可以作为下一个注册函数的入参,无法中断注册事件的执行,所有注册的事件回掉函数都会被执行。如下例子打印值为: 1 2 3
SyncLoopHook:监听函数返回undefined结束执行,否则循环执行。如下代码plus打印3次。
2、异步钩子
AsyncParallelHook:异步并行执行钩子,如下列子,总耗时为异步耗时最长路径而不是加和,因为setTimeout本身并不是准确,所以总耗时在3秒多一点
AsyncParallelBailHook:异步并行可熔断钩子。其实对于真正的异步并行也无法熔断,比如promise,但在在此之上注册的同步回掉任务可熔断。例子一可熔断,但二无论reject或者异步中返回非undefined都无法中断其他异步任务
AsyncSeriesHook:异步串行钩子,异步任务串行执行。如下例子执行总耗时是两个异步任务执行耗时之和
AsyncSeriesBailHook:异步串行可熔断钩子,遇到其中一个任务reject,则中断之后的异步任务执行。如下列子任务B无法执行。
AsyncSeriesWaterfallHook:异步串行流水式钩子,无法中断,上一任务的返回可传递给下一任务作为参数,继续处理。
上面例子打印结果如下: