Webpack原理分享(一)

Webpack原理分享,这一小节主要介绍一下webpack中重要的基类Tapable

Webpack原理分享(一)

Tapable详解

什么是Tapable?

  1. 提供事件订阅,发布功能的小型库
  2. Webpack中重要对象的基类,为compiler,compilation等 对象提供插件系统

Tapable接口列表

  1. Tapable.prototype.plugin 注册事件

  2. Tapable.prototype.applyPlugin(applyPlugins,applyPluginsWaterfall...) 触发事件

  3. Tapable.prototype.hasPlugins 判断是否存在事件

  4. Tapable.prototype.apply 应用插件

Tapable.prototype.plugin

事件注册方法

1
void plugin(names: string|string[], handler: Function)

name:事件名称
handler: 触发事件后运行的回调函数

Tapable.prototype.applyPlugin…

事件触发方法

  1. applyPlugins
  2. applyPluginsWaterfall
  3. applyPluginsAsync
  4. applyPluginsBailResult
  5. applyPluginsAsyncWaterfall
  6. applyPluginsAsyncSeries
  7. applyPluginsParallel
  8. applyPluginsParallelBailResult

事件触发分类

根据回调函数的调用顺序分为2类

串行调用

示意图
涉及到的方法:
applyPlugins
applyPluginsWaterfall
applyPluginsAsync = applyPluginsAsyncSeries
applyPluginsBailResult
applyPluginsAsyncWaterfall

1. Task之间相互独立

applyPlugins

同步地按照注册顺序,依次调用Task

1
void applyPlugins(name: string, args: any...)

name:事件名称
args :Task实参,可为多个

applyPluginsBailResult

同步地按照注册顺序,依次调用Task,一旦有Task的return值!==undefined,则不会执行剩下的Task,且applyPluginsBailResult的返回值为该Task的返回值

1
any applyPluginsBailResult(name: string, args: any...)

name:事件名称
args :Task实参,可为多个

applyPluginsAsync

默认Task为异步执行,Task中最后一个形参为callback,Task中手动调用callback执行下一个Task,如为callback传入!=undefined实参,则不会执行下一个Task,并且调用callback

1
2
3
4
5
void applyPluginsAsync(
name: string,
args: any...,
callback: (err?: Error) -> void
)

name:事件名称
args:Task实参,可为多个
callback:当所有Task全部执行完毕后调用的回调函数

2. Task之间可传递值

applyPluginsWaterfall

同步地按照注册顺序调用Task,每个Task的return值将作为下一个Task的第一个实参传入

1
2
3
4
5
any applyPluginsWaterfall(
name: string,
init: any,
args: any...
)

name:事件名称
init:第一个Task的第一个实参
args:Task除第一个实参外剩下的实参

applyPluginsAsyncWaterfall​​​​​​​

默认Task为异步执行,Task第一个形参为上一个Task调用callback传下来的第二个实参,第一个Task为init,第二个实参为callback,Task中手动调用callback执行下一个Task,如callback第一个实参为!=undefined则不会调用下一个Task,并且调用callback

1
2
3
4
5
applyPluginsAsyncWaterfall(
name: string,
init: any,
callback: (err: Error, result: any) -> void
)

name:事件名称
init:第一个Task的第一个实参
args:Task除第一个实参外剩下的实参
callback:所有Task调用结束后的回调

并行调用

示意图

applyPluginsParallel

Task默认为异步执行,Task中手动调用callback表明该Task已结束,当Task全部结束时,会最终调用callback,如某个Task为callback传入实参!=undefined,则会提前执行callback

1
2
3
4
5
applyPluginsParallel(
name: string,
args: any...,
callback: (err?: Error) -> void
)

name:事件名称
args:Task实参,可多个
callback:所有Task结束后的回调函数

applyPluginsParallelBailResult

Task默认为异步执行,Task中手动调用callback表明该Task已结束,当Task全部结束时,会最终调用callback,最终callback的实参根据Task的注册顺序,寻找第一个为callback传递的实参

1
2
3
4
5
applyPluginsParallelBailResult(
name: string,
args: any...,
callback: (err?: Error) -> void
)

name:事件名称
args:Task实参,可多个
callback:所有Task结束后的回调函数

应用插件

Tapable.prototype.apply

调用该方法会触发传入构造函数所有实例的apply方法

1
2
3
4
5
6
7
8
9
function Plugin(){}
Plugin.prototype.apply = function(instance){
instance.plugin('test', function(){})
};
var a = new Tapable(new Plugin());
a.apply();
0%