directory

 - src - sim ---- 简单的模拟实现 - /.js$/ ---- 使用

Detailed

Webpack 就像一条生产线, 要经过一系列的处理流程才能将源文件转换成输出结果。这条生产线上的每个流程都是单一的, 多个流程之间存在依赖关系。只能完成当前处理后才会转交到下一个流程。

插件就像一个插入到生产线中的一个功能, 它会在特定的时机对生产线上的资源进行处理。

这条生产线很复杂, Webpack则是通过 tapable 核心库来组织这条生产线。

Webpack 在运行中会通过 tapable 提供的钩子进行广播事件, 插件只需要监听它关心的事件,就可以加入到这条生产线中,去改变生产线的运作。使得 Webpack整体扩展性很好。

Tapable Hook

Tapable 提供同步(Sync)和异步(Async)钩子类。而异步又分为 异步串行、异步并行钩子类。

右键图片,在新标签中查看完整图片

逐个分析每个钩子类的使用及其原理

同步钩子类

• SyncHook
• SyncBailHook
• SyncWaterfallHook
• SyncLoopHook

同步钩子类通过实例的 tap 方法监听函数, 通过 call发布事件

SyncHook

同步串行不关心订阅函数执行后的返回值是什么。其原理是将监听(订阅)的函数存放到一个数组中, 发布时遍历数组中的监听函数并且将发布时的 arguments传递给监听函数

class SyncHook { constructor(options) { this.options = options this.hooks = [] //存放监听函数的数组 } tap(name, callback) { this.hooks.push(callback) } call(...args) { for (let i = 0; i < this.hooks.length; i++) { this.hooks[i](...args) } }}const synchook = new SyncHook(‘name‘)// 注册监听函数synchook.tap(‘name‘, (data) => { console.log(‘name‘, data)})synchook.tap(‘age‘, (data) => { console.log(‘age‘, data)})// 发布事件synchook.call(‘qiqingfu‘)

打印结果:

name qiqingfuage qiqingfu

SyncBailHook

同步串行, 但是如果监听函数的返回值不为 null, 就终止后续的监听函数执行

class SyncBailHook { constructor(options) { this.options = options this.hooks = [] } tap(name, callback) { this.hooks.push(callback) } call(...args) { let ret, i = 0 do { // 将第一个函数的返回结果赋值给ret, 在while中如果结果为 true就继续执行do代码块 ret = this.hooks[i++](...args) } while(!ret) }}const syncbailhook = new SyncBailHook(‘name‘)syncbailhook.tap(‘name‘, (data) => { console.log(‘name‘, data) return ‘我的返回值不为null‘})syncbailhook.tap(‘age‘, (data) => { console.log(‘age‘, data)})syncbailhook.call(‘qiqingfu‘)

执行结果

name qiqingfu

SyncWaterfallHook

同步串行瀑布流, 瀑布流指的是第一个监听函数的返回值,做为第二个监听函数的参数。第二个函数的返回值作为第三个监听函数的参数,依次类推...

class SyncWaterfallHook { constructor(options) { this.options = options this.hooks = [] } tap(name, callback) { this.hooks.push(callback) } call(...args) { let [firstHook, ...otherHooks] = this.hooks /** * 通过解构赋值先取出第一个监听函数执行 * 并且将第一个函数的执行结果传递给第二个, 第二个传递给第三个,迭代的过程 */ let ret = firstHook(...args) otherHooks.reduce((f,n) => { return n(f) }, ret) }}const syncWaterfallHook = new SyncWaterfallHook(‘name‘)syncWaterfallHook.tap(‘name‘, data => { console.log(‘name‘, data) return 23})syncWaterfallHook.tap(‘age‘, data => { console.log(‘age‘, data)})syncWaterfallHook.call(‘qiqingfu‘)

打印结果

name qiqingfuage 23

SyncLoopHook

同步串行, 如果监听函数的返回值为 true, 则反复执行当前的监听函数,直到返回指为 undefind则继续执行下面的监听函数

class SyncLoopHook { constructor(options) { this.options = options this.hooks = [] } tap(name, callback) { this.hooks.push(callback) } call(...args) { for (let i = 0; i < this.hooks.length; i++) { let hook = this.hooks[i], ret do{ ret = hook(...args) }while(ret === true && ret !== undefined) } }}const syncLoopHook = new SyncLoopHook(‘name‘)let n1 = 0syncLoopHook.tap(‘name‘, data => { console.log(‘name‘, data) return n1 < 2 ? true : undefined})syncLoopHook.tap(‘end‘, data => { console.log(‘end‘, data)})syncLoopHook.call(‘qiqingfu‘)

执行结果

name qiqingfuname qiqingfuname qiqingfu 第三次打印的时候, n1的指为2, 返回值为 undefined则执行后面的监听函数end qiqingfu

异步钩子

• 异步并行 (Parallel)
  • AsyncParallelHook
  • AsyncParalleBailHook
• 异步串行 (Series)
  • AsyncSeriesHook
  • AsyncSeriesBailHook
  • AsyncSeriesWaterfallHook

凡有异步,必有回调

同步钩子是通过 tap来监听函数的, call来发布的。

异步钩子是通过 tapAsync 或 tapPromise 来监听函数,通过 callAsync 或 promise来发布订阅的。

AsyncParallelHook

异步并行, 监听的函数会一块执行, 哪个函数先执行完就先触发。不需要关心监听函数的返回值。

class AsyncParallelHook { constructor(options) { this.options = options this.asyncHooks = [] } // 订阅 tapAsync(name, callback) { this.asyncHooks.push(callback) } // 发布 callAsync(...args) { /** * callAsync(arg1, arg2,..., cb) * 发布的时候最后一个参数可以是回调函数 * 订阅的每一个函数的最后一个参数也是一个回调函数,所有的订阅函数执行完 * 且都调用了最后一个函数,才会执行cb */ const finalCallback = args.pop() let i = 0 // 将这个作为最后一个参数传过去,使用的时候选择性调用 const done = () => { ++i === this.asyncHooks.length && finalCallback() } this.asyncHooks.forEach(hook => { hook(...args, done) }) }}const asyncParallelHook = new AsyncParallelHook(‘name‘)asyncParallelHook.tapAsync(‘name‘, (data, done) => { setTimeout(() => { console.log(‘name‘, data) done() }, 2000)})asyncParallelHook.tapAsync(‘age‘, (data, done) => { setTimeout(() => { console.log(‘age‘, data) done() }, 3000)})console.time(‘time‘)asyncParallelHook.callAsync(‘qiqingfu‘, () => { console.log(‘监听函数都调用了 done‘) console.timeEnd(‘time‘)})

打印结果

name qiqingfuage qiqingfu监听函数都调用了 donetime: 3002.691ms

AsyncParalleBailHook

暂时不理解

AsyncSeriesHook

异步串行钩子类, 不关心 callback的参数。异步函数一个一个的执行,但是必须调用 done函数。

class AsyncSeriesHook { constructor(options) { this.options = options this.asyncHooks = [] } tapAsync(name, callback) { this.asyncHooks.push(callback) } callAsync(...args) { const finalCallback = args.pop() let i = 0 const done = () => { let task = this.asyncHooks[i++] task ? task(...args, done) : finalCallback() } done() }}const asyncSeriesHook = new AsyncSeriesHook(‘name‘)asyncSeriesHook.tapAsync(‘name‘, (data, done) => { setTimeout(() => { console.log(‘name‘, data) done() }, 1000)})asyncSeriesHook.tapAsync(‘age‘, (data, done) => { setTimeout(() => { console.log(‘age‘, data) done() }, 2000)})console.time(‘time‘)asyncSeriesHook.callAsync(‘qiqingfu‘, () => { console.log(‘end‘) console.timeEnd(‘time‘)})

执行结果

name qiqingfuage qiqingfuendtime: 3010.915ms

AsyncSeriesBailHook

同步串行钩子类, callback的参数如果不是 null, 后面所有的异步函数都不会执行,直接执行 callAsync方法的回调函数

class AsyncSeriesBailHook { constructor(options) { this.options = options this.asyncHooks = [] } tapAsync(name, callback) { this.asyncHooks.push(callback) } callAsync(...args) { const finalCallback = args.pop() let i = 0 const done = data => { if (data) return finalCallback() let task = this.asyncHooks[i++] task ? task(...args, done) : finalCallback() } done() }}const asyncSeriesBailHook = new AsyncSeriesBailHook(‘name‘)asyncSeriesBailHook.tapAsync(‘1‘, (data, done) => { setTimeout(() => { console.log(‘1‘, data) done(null) }, 1000)})asyncSeriesBailHook.tapAsync(‘2‘, (data, done) => { setTimeout(() => { console.log(‘2‘, data) done(null) }, 2000)})console.time(‘times‘)asyncSeriesBailHook.callAsync(‘qiqingfu‘, () => { console.log(‘end‘) console.timeEnd(‘times‘)})

打印结果

1 qiqingfu2 qiqingfuendtimes: 3012.060ms

AsyncSeriesWaterfallHook

同步串行钩子类, 上一个监听函数 callback(err, data)的第二个参数, 可以作为下一个监听函数的参数

class AsyncSeriesWaterfallHook { constructor(options) { this.options = options this.asyncHooks = [] } tapAsync(name, callback) { this.asyncHooks.push(callback) } callAsync(...args) { const finalCallback = args.pop() let i = 0, once const done = (err, data) => { let task = this.asyncHooks[i++] if (!task) return finalCallback() if (!once) { // 只执行一次 task(...args, done) once = true } else { task(data, done) } } done() }}const asyncSeriesWaterfallHook = new AsyncSeriesWaterfallHook(‘name‘)asyncSeriesWaterfallHook.tapAsync(‘1‘, (data, done) => { setTimeout(() => { console.log(‘1‘, data) done(null, ‘第一个callback传递的参数‘) }, 1000)})asyncSeriesWaterfallHook.tapAsync(‘2‘, (data, done) => { setTimeout(() => { console.log(‘2‘, data) done(null) }, 1000)})console.time(‘timer‘)asyncSeriesWaterfallHook.callAsync(‘qiqingfu‘, () => { console.log(‘end‘) console.timeEnd(‘timer‘)})

打印结果

1 qiqingfu2 第一个callback传递的参数endtimer: 2015.445ms

END

如果理解有误, 麻烦纠正!

参考文章

webpack4.0源码分析之Tapable

webpack 4.0 Tapable 类中的常用钩子函数源码分析