webpack4.X核心工具库之tapable实例对象Hook

一.tapable简介

tapable为webpack底层的核心工具库，webpack许多功能的实现都是跟它密不可分的,webpack的编译流程为配置初始化--->内容编译--->输出编译后内容，这三个的整体执行过程可以称之为

事件驱动型事件流工作机制，这个机制将不同的工作流串联起来完成所有的工作，其中最为核心的两个部分是 负责编译的complier 负责创建bundles的compilation。tapable本身是一个独立的库

在webpack中进行了大量的使用，tapable工作流程是 实例化hook注册事件监听---->通过hook触发事件监听---->执行懒编译生成的可执行代码。

二.Hook简介

Hook本质是tapable实例对象,hook执行机制可分为同步和异步，对于异步来说又存在着并行和串行两种，其中hook的执行特点如下：

Hook:普通钩子,监听器之间互相独立不干扰。

BailHook：熔断钩子,某个监听返回非undefined时后续不执行。

WaterfallHook:瀑布沟子，上一个监听返回值可传递至下一个。

LoopHook:循环钩子,如果当前未返回false则一直执行。

tapable库同步钩子分为SynckHook，SyncBailHook，SyncWaterfallHook，SyncLoopHook。

tapable库异步串行钩子分为AsyncSeriesHook,AsyncSeresBailHook,AsynvSeriesWaterfallHook。

tapable库异步并行钩子分为AsyncParalleHook,AsyncParalleBailHook。

三.同步钩子的使用

1.同步钩子之syncHook

const { SyncHook } =require('tapable')
            //钩子实例
            let hook =new SyncHook(['name','age'])
            hook.tap('fn1',function(name,age){
                console.log('fn1---->',name,age)
            })
            hook.tap('fn2',function(name,age){
                console.log('fn2---->',name,age)
                return 'res'
            })
            hook.tap('fn3',function(name,age){
                console.log('fn3---->',name,age)
            })
            //触发监听
            hook.call('lw','18') //打印结果为 fn1-----> lw 18 fn2-----> lw 18 fn3-----> lw 18

上述代码中即便fn2 return了后面的fn3依然会执行。

2.同步钩子之syncBialHook

const { SyncBailHook } =require('tapable')
                 //钩子实例
                 let hook =new SyncBailHook(['name','age'])
                 hook.tap('fn1',function(name,age){
                     console.log('fn1---->',name,age)
                 })
                 hook.tap('fn2',function(name,age){
                     console.log('fn2---->',name,age)
                   return 'res'
                 })
                 hook.tap('fn3',function(name,age){
                     console.log('fn3---->',name,age)
                 })
                 //触发监听
                 hook.call('lw','100') //打印结果为 fn1-----> lw 18 fn2-----> lw 18

上述代码中与SyncHook不同的是fn2中添加一个return （非undefined） 后面的fn3不会执行，说明这条流水线断掉了

3.同步钩子之syncWaterfallHooks

const { SyncWaterfallHook } =require('tapable')
                //钩子实例
                let hook =new SyncWaterfallHook(['name','age'])
                hook.tap('fn1',function(name,age){
                    console.log('fn1---->',name,age)
                    return 'ret1'
                })
                hook.tap('fn2',function(name,age){
                    console.log('fn2---->',name,age)
                    return 'ret2'
                })
                hook.tap('fn3',function(name,age){
                    console.log('fn3---->',name,age)
                    return 'ret3'
                })
                //触发监听
                hook.call('lw','100') //打印结果为 fn1-----> lw 18 fn2-----> ret1 18 fn3-----> ret2 18

这个钩子的特点是通过上一个监听返回的ret1传给下一个钩子函数fn2 然后返回 依次类推 所以又叫瀑布沟子

4.同步钩子之SyncLoopHook

const { SyncLoopHook } =require('tapable')
                //钩子实例
                let hook =new SyncLoopHook(['name','age'])
                let count1=0
                let count2=0
                let count3=0
                hook.tap('fn1',function(name,age){
                    console.log('fn1---->',name,age)
                    if(++count1==1){
                        count1=0
                        return undefined
                    }
                    return true;
                })
                hook.tap('fn2',function(name,age){
                    console.log('fn2---->',name,age)
                    if(++count2==2){
                        count2=0
                        return undefined
                    }
                    return true
                })
                hook.tap('fn3',function(name,age){
                    console.log('fn3---->',name,age)
                })
                //触发监听
                hook.call('lw','100')
                //打印结果为:
                //fn1-----> lw 18 fn2-----> lw 18 fn1-----> lw 18 fn2-----> lw 18 fn3-----> lw 18

从打印结果可以看出循环执行了2遍,第一次执行到了fn2停止，第二次3个函数执行完经调试代码得知底层是一个do while循环,while的重新执行条件为return内容为true。

四.异步钩子的使用

对于异步钩子的使用,在添加事件监听时会存在三种方式:tap tapAsync tapPromise。

1.tapable库异步并行钩子

//第一种方式 tap
                const { AsyncParallelHook } =require('tapable')
                //钩子实例
                let hook =new AsyncParallelHook(['name'])
                hook.tap('fn1',function(name){
                    console.log('fn1---->',name)
                })
                hook.tap('fn2',function(name){
                    console.log('fn2---->',name)
                })
                hook.callAsync('lw',function(){
                    console.log('回调操作最后执行')
                })
                //打印结果 fn1---->lw fn2----->lw  最后执行回调

并行钩子的tap方法是同步进行的，只是从打印结果的话很难看出同步进行,下面通过另一种方式改动下看下效果。

//第二种方式 tapAsync
                //通过settimeOut异步操作,如果为并行执行的话,执行结果应该偏向于大的时间数值，我们用console.time标记下
                //代码如下:
                const { AsyncParallelHook } =require('tapable')
                //钩子实例
                let hook =new AsyncParallelHook(['name'])
                console.time('time')
                hook.tapAsync('fn1',function(name,callback){
                    setTimeout(()=>{
                        console.log('fn1---->',name)
                        callback()
                    },1000)
                })

                hook.tapAsync('fn2',function(name,callback){
                    setTimeout(()=>{
                        console.log('fn2---->',name)
                        callback()
                    },2000)
                })

                hook.callAsync('lw',function(){
                    console.log('回调操作最后执行')
                    console.timeEnd('time')
                })
                //打印结果为fn1--->lw fn2--->lw 同步打印出来 time:2.002s 所以证明是并行执行

//第三种方式 tapPromise
                const { AsyncParallelHook } =require('tapable')
                //钩子实例
                let hook =new AsyncParallelHook(['name'])
                console.time('time')
                hook.tapPromise('fn1',function(name){
                    return new Promise(function(resolve,reject){
                        setTimeout(()=>{
                            console.log('fn1---->',name)
                            resolve()
                        },1000)
                    })
                })

                hook.tapPromise('fn2',function(name){
                    return new Promise(function(resolve,reject){
                        setTimeout(()=>{
                            console.log('fn2---->',name)
                            resolve()
                        },2000)
                    })
                })

                hook.promise('lw').then(()=>{
                    console.log('end执行了')
                    console.timeEnd('time')
                })
                //打印结果为fn1--->lw fn2--->lw 同步打印出来 time:2.002s 同样并行执行

//AsyncParallelBailHook
                const { AsyncParallelBailHook } =require('tapable')
                //钩子实例
                let hook =new AsyncParallelBailHook(['name'])
                console.time('time')
                hook.tapAsync('fn1',function(name,callback){
                    setTimeout(()=>{
                        console.log('fn1---->',name)
                        callback()
                    },1000)
                })
                hook.tapAsync('fn2',function(name,callback){
                    setTimeout(()=>{
                        console.log('fn2---->',name)
                        callback('err')
                    },2000)
                })
                hook.tapAsync('fn3',function(name,callback){
                    setTimeout(()=>{
                        console.log('fn3---->',name)
                        callback()
                    },3000)
                })

                hook.callAsync('lw',function(){
                    console.log('最后的回调执行了')
                    console.timeEnd('time')
                })
                //打印结果为fn1---->lw fn2--->lw 最后函数回调执行了 time:2.002s fn3--->lw

从打印结果来看fn2里面callback('err') 返回错误 所以在fn2进行时阻断掉了,总运行时长接近2s最后fn3也打印出来是因为终归有个settimeout控制着所以到达3s会被打印。

2.tapable库异步串行钩子

const { AsyncSeriesHook } =require('tapable')
                //钩子实例
                let hook =new AsyncSeriesHook(['name'])
                console.time('time')
                hook.tapPromise('fn1',function(name){
                    return new Promise(function(resolve,reject){
                        setTimeout(()=>{
                            console.log('fn1---->',name)
                            resolve()
                        },1000)
                    })
                })

                hook.tapPromise('fn2',function(name){
                    return new Promise(function(resolve,reject){
                        setTimeout(()=>{
                            console.log('fn2---->',name)
                            resolve()
                        },2000)
                    })
                })

                hook.promise('lw').then(()=>{
                    console.log('end执行了')
                    console.timeEnd('time')
                })
                //打印结果为fn1--->lw fn2--->lw  time:3.002s（1s+2s） 串行和我们的同步钩子是很接近的，只不过多了一步回调操作

/**************************************************************************************************************************************************************************/
“如约而至”是个多么美好的词，等的辛苦，却从不辜负。