webpack 底层外围是一个独立的工具库tapable
webpack编译过程，能够看作 事件驱动型事件工作机制
外围的两个： 负责编译的complier，负责创立bundles的compilation都是tapable的实例对象
- 配置初始化
- 内容编译
- 输入编译后内容
tapable工作流程
- 实例化hook注册事件监听
- 通过hook触发事件监听
- 执行懒编译生成的可执行代码
hook自身是实例对象，在tapable库中存在几种不同类，每个类实例都是一种hook实例（钩子），不同钩子领有不同执行特点，
从执行机制将hook分为同步和异步，异步分为并行串行两种模式
Hook不同机制执行特点
- Hook：一般钩子，监听器之间相互独立不烦扰
- BailHook：熔断钩子，某个监听返回非undefined时后续不执行
- WaterfallHook：瀑布钩子，上一个监听的返回值可传递至下一个
- LoopHook：循环钩子，如果以后未返回false则始终执行
总结：
- tapable是个库，外部提供不同类，能够实例化出不同hook
- hook分为同步异步两类，无论哪类都蕴含下面四个执行特点
tapable库同步钩子
- SyncHook
- SyncBailHook
- SyncWaterfallHook
- SyncLoopHook
tapable库异步串行钩子
- AsyncSeriesHook
- AsyncSeriesBailHook
- AsyncSeriesWaterfallHook
tapable库异步并行钩子
- AsyncParallelHook
- AsyncParallelBailHook
同步钩子应用
装置：yarn add tapable --dev
应用：导入->实例化->增加监听->触发监听
测试SyncHook
// 导入const { SyncHook } = require('tapable')// 实例化let hook = new SyncHook(['name','age'])// 增加事件监听hook.tap('fn1',function(name,age){ // 钩子监听触发时会执行此函数体 console.log("SyncHook:fn1-->",name,age);})// 触发监听函数hook.call('mcgee',18)流式监听,能够定义多个监听事件顺次解决内容
const { SyncHook } = require('tapable')let hook = new SyncHook(['name','age'])// 增加事件监听hook.tap('fn1',function(name,age){ console.log("SyncHook:fn1-->",name,age); // SyncHook:fn1--> mcgee 18})hook.tap('fn2',function(name,age){ console.log("SyncHook:fn2-->",name+"爸爸",age+30); // SyncHook:fn2--> mcgee爸爸 48})hook.call('mcgee',18)测试SyncBailHook
留神fn1return了非undefined的值，因而fn2不会执行，熔断的含意
const { SyncBailHook } = require('tapable')let hook = new SyncBailHook(['name','age'])hook.tap('fn1',function(name,age){ console.log("SyncBailHook:fn1-->",name,age); return 1; })hook.tap('fn2',function(name,age){ console.log("SyncBailHook:fn2-->",name+"爸爸",age+30);})hook.call('mcgee',18)测试SyncWaterfallHook
返回值会被下一个监听获取
const { SyncWaterfallHook } = require('tapable')let hook = new SyncWaterfallHook(['name','age'])hook.tap('fn1',function(name,age){ console.log("SyncWaterfallHook:fn1-->",name,age); // SyncWaterfallHook:fn1--> mcgee 18 return "爸爸"})hook.tap('fn2',function(name,age){ console.log("SyncWaterfallHook:fn2-->",name,age+30); // SyncWaterfallHook:fn2--> 爸爸 48})hook.call('mcgee',18)测试SyncLoopHook
如果监听未返回undefined,则始终执行,从新从taps数组里的第一个tap开始执行能够断点看一下
const { SyncLoopHook } = require('tapable')let hook = new SyncLoopHook(['name','age'])hook.tap('fn1',function(name,age){ console.log("SyncLoopHook:fn1-->",name,age); if(++count1 === 1) { count1 = 0 return undefined } return true})hook.tap('fn2',function(name,age){ console.log("SyncLoopHook:fn2-->",name,age+30);})hook.call('mcgee',18)测试AsyncParallelHook
对于异步钩子并行的应用，在增加事件监听时会存在三种形式
- tap
- tapAsync
- tapPromise
const { AsyncParallelHook } = require('tapable')let hook = new AsyncParallelHook(['name'])增加事件监听 tap
hook.tap('fn1',function(name){ // 钩子监听触发时会执行此函数体 console.log("AsyncParallelHook:fn1-->",name);})hook.tap('fn2',function(name){ console.log("AsyncParallelHook:fn2-->",name);})触发监听函数
hook.callAsync('mcgee',function(){ console.log("run~~"); // 执行的回调，顺次输入fn1,fn2,run~~~ console.timeEnd('time')})增加事件监听 tapAsync
console.time('time')hook.tapAsync('fn1',function(name,callback){ setTimeout(()=>{ console.log("AsyncParallelHook:fn1-->",name); callback() },1000)})hook.tapAsync('fn2',function(name,callback){ setTimeout(()=>{ console.log("AsyncParallelHook:fn2-->",name); callback() },2000)})触发监听函数
hook.callAsync('mcgee',function(){ console.log("run~~"); console.timeEnd('time')})增加事件监听 tapPromise
console.time('time')hook.tapPromise('fn1',function(name){ return new Promise(function(resolve,reject){ setTimeout(()=>{ console.log("AsyncParallelHook:fn1-->",name); resolve() },1000) })})hook.tapPromise('fn2',function(name){ return new Promise(function(resolve,reject){ setTimeout(()=>{ console.log("AsyncParallelHook:fn2-->",name); resolve() },2000) })})触发监听函数
hook.promise('foo').then(()=>{ console.log("run~~"); console.timeEnd('time') })测试AsyncParallelBailHook
熔断操作，通过callback函数谬误优先，fn2不会执行
const { AsyncParallelBailHook } = require('tapable')let hook = new AsyncParallelBailHook(['name'])console.time('time')hook.tapAsync('fn1',function(name,callback){ setTimeout(()=>{ console.log("AsyncParallelBailHook:fn1-->",name); callback('err') // callback回调中谬误优先 },1000)})hook.tapAsync('fn2',function(name,callback){ setTimeout(()=>{ console.log("AsyncParallelBailHook:fn2-->",name); callback() },2000)})触发监听函数
hook.callAsync('mcgee',function(){ console.log("run~~"); console.timeEnd('time')})测试AsyncSeriesHook
串行，上面代码会执行3s
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("AsyncSeriesHook:fn1-->",name); resolve() },1000) })})hook.tapPromise('fn2',function(name){ return new Promise(function(resolve,reject){ setTimeout(()=>{ console.log("AsyncSeriesHook:fn2-->",name); resolve() },2000) })})执行监听
hook.promise('foo').then(()=>{ console.log("run~~"); console.timeEnd('time') })基于SyncHook的源码剖析
从源码能够看出，node_modules/tapable/lib/Hook.js文件为所有钩子的基类文件，
其余钩子都是继承自Hook.js并对Hook.js内的办法进行改写的操作，
tap会将注册的内容存成对象，{type:'async',fn:f,name:'fn1'}再塞入Hook类的属性taps数组中
hook.tap('fn1',function(name){ console.log("AsyncParallelHook:fn1-->",name);})基于SyncHook的源码剖析2
- 导入
- 实例化 SyncHook 的基类hook，两个重要属性 _x 和 taps
- _x = [ f1, f2... ] tap注册的回调内容
- taps = [ {}, {} ] tap数组
- 调用 call 办法，应用了 HookCodeFactory 类 setup create
HookSyncHookHookCodeFactory// # hook.js 基类class Hook {constructor(args = []) { this.args = args this.taps = [] // 未来用于寄存组装好的 {} this._x = undefined // 未来在代码工厂函数中会给 _x = [f1, f2, f3....]}tap(options, fn) { if (typeof options === 'string') { options = { name: options } } options = Object.assign({ fn }, options) // { fn:... name:fn1 } // 调用以下办法将组装好的 options 增加至 [] this._insert(options)}_insert(options) { this.taps[this.taps.length] = options}call(...args) { // 01 创立未来要具体执行的函数代码构造 let callFn = this._createCall() // 02 调用上述的函数（args传入进去） return callFn.apply(this, args)}_createCall() { return this.compile({ taps: this.taps, args: this.args })}}module.exports = Hook// # SyncHook.jslet Hook = require('./Hook.js')//--------------------------------------------------------// 代码组装工厂 HookCodeFactory 基于不同hook子类（SyncHook，SyncBailHook），设置不同函数体的类class HookCodeFactory {args() { return this.options.args.join(',') // ["name", "age"]===> name, age}head() { return `var _x = this._x;`}content() { let code = `` for (var i = 0; i < this.options.taps.length; i++) { code += `var _fn${i} = _x[${i}];_fn${i}(${this.args()});` } return code}setup(instance, options) { // 先筹备后续须要应用到的数据 this.options = options // 这里的操作在源码中是通过 init 办法实现，而咱们以后是间接挂在了 this 身上 instance._x = options.taps.map(o => o.fn) // this._x = [f1, f2, ....]}create() { // 外围就是创立一段可执行的代码体而后返回 let fn // fn = new Function("name, age", "var _x = this._x, var _fn0 = _x[0]; _fn0(name, age);") fn = new Function( this.args(), this.head() + this.content() ) return fn}}//--------------------------------------------------------let factory = new HookCodeFactory()// 子类 SyncHookclass SyncHook extends Hook {constructor(args) { super(args)}compile(options) { // {taps: [{}, {}], args: [name, age]} factory.setup(this, options) return factory.create(options)}}module.exports = SyncHook应用下面的hook类
// # useHook.jsconst SyncHook = require('./SyncHook.js')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)})hook.call('zoe66', 18)/** * 01 实例化 hook ， 定义 _x = [f1, f2, ...] taps = [{}, {}] * 02 实例调用 tap taps = [{}, {}] * 03 调用 call 办法， HookCodeFactory setup create * 04 Hook SyncHook HookCodeFactory */#### 基于AsyncParallelHook的源码剖析
// # useHook.jsconst AsyncParallelHook = require('./AsyncParallelHook.js')let hook = new AsyncParallelHook(['name', 'age'])hook.tapAsync('fn1', function (name, age, callback) {console.log('fn1-->', name, age)callback()})hook.tapAsync('fn2', function (name, age, callback) {console.log('fn2-->', name, age)callback()})hook.callAsync('zoe66', 18)代码工程要批改的内容
class HookCodeFactory {head() { return `"use strict";var _context;var _x = this._x;`}content() { let code = `var _counter = ${this.options.taps.length};var _done = (function () { _callback(); });` for (var i = 0; i < this.options.taps.length; i++) { code += `var _fn${i} = _x[${i}];_fn${i}(name, age, (function () { if (--_counter === 0) _done(); }));` } return code}args({ after, before } = {}) { let allArgs = this.options.args if (before) allArgs = [before].concat(allArgs) if (after) allArgs = allArgs.concat(after) return allArgs.join(',') // ["name", "age"]===> name, age}}