webpack plugin

webpack plugin

webpack完成的复杂炫酷的功能依赖于插件机制，webpack的插件机制依赖于核心的库， tapable
tapable是一个类似于nodejs的eventEmitter的库， 主要是控制钩子函数的发布喝定于，当时，tapable提供您的hook机制比较全面，分为同步和异步两个大类， 根据事件执行的终止条件的不同

const {SyncHook}= require('tapable')
const hook = new SyncHook(['arg1', 'arg2'])
hook.tap('a', function(arg1, arg2) {console.log('ar')
})
hook.tap('b',function(arg1, arg2) {console.log('b')
})
hook.call(1, 2)

BasicHook: 执行每一个，不关心函数的返回值，有SyncHook, AsyncParallelHook, AsyncSeriesHook
BailHook: 顺序执行hook，遇到第一个结果result!=undefined则返回，不在执行
SyncBailHook, AsyncSeriesBailHook, AsyncParallelBailHook

tapable => sync => SyncHook=> SyncBailHook=> SyncWaterfallHook=> SyncLoopHook=> Async => AsyncParallel => AsyncParallelHook => AsyncParallelBailHook=> AsyncSeries   => AsyncSeriesHook=> AsyncParallelBailHook=> AsyncSeriesLoopHook=> AsyncSeriesWaterfallHook

每个Hook的用法
Basic: 不关心回调函数返回值，[SyncHook, AsyncParallelHook, AsyncSeriesHook]
Bail: 只要其中一个监听函数的返回值，不为undefined，则终止执行。 [SyncBailHook, AsyncParallelHook, AsyncSeriesBailHook]
waterfall: 前一个监听函数的返回值部位undefined，则作为下一个监听函数的第一个参数
[SyncWaterfallHook, AsyncSeriesWaterfallHook]
Loop: 如果有一个监听函数的返回值不为undefined， 则终止向下执行，从头开始执行，直到所有监听函数的返回值为undefined。[SyncLoopHook, AsyncSeriesLoopHook]~

```javascript
const {SyncHook} = require('tapable')
let hook = new SyncHook(['name'])
hook.tap('demo', function(params) {console.log('demo', params)
})
hook.tap('demo2', function(params) {console.log('demo2', params)return true
})
hook.tap('demo3', function(params) {console.log('demo3', params)
})
hook.call('hello SyncHook')

class SyncHook {constructor(args = []) {this._args = argsthis.tasks = []}tap(name, task) {this.tasks.push(task)}call(...args) {const params = args.slice(0, this._args.length)this.tasks.forEash(task => task(...params))}
}

const {SyncBailHook} = require('tapable')
let hook = new SyncBailHook(['name'])
hook.tap('demo', function(params) {console.log('demo', params)
})
hook.tap('demo2', function(params) {console.log('demo2', params)return true
})
hook.tap('demo3', function(params) {console.log('demo3', params)
})
hook.call('hello SyncBailHook')

SyncBailHook钩子遇到回调函数中返回结果不为undefined的时候，则跳过下面所有的逻辑

class SyncBailHook {constructor(args) {this._args = _argsthis.tasks = []}tap(name, task) {this.tasks.push(task)}call() {const args = Array.from(arguments).slice(0, this._args.length)for(let i = 0; i < this.tasks.length; i++) {if(result !== undefiend) {break}}}
}

SyncWaterfallHook

const {SyncWaterfallHook} = require('tapable')
const hook = new SyncWaterfallHook(['author', 'age'])
hook.tap('测试1', (params1, params2) => {console.log('测试1接受的参数', params1, params2)
})
hook.tap('测试2', (params1, params2) => {console.log('测试2接受的参数', params1, params2)
})
hook.tap('测试3',(params1, params2) => {console.log('测试3接受的参数', params1, params2)
})
hook.call('嘎嘎嘎', '99')

syncWaterfallHook是一个同步的，瀑布类型的hook，瀑布类型的钩子就是如果前一个事件的函数结果部位undefined，则result会作为后一个事件函数的第一个参数，也就是上一个函数的执行结果会成为下一个函数的参数

const {SyncLoopHook} = require('tapable')
const hook = new SyncLoopHook([])
let count = 5
hook.tap('测试1', () => {console.log("测试1里面的count", count)if([1, 2, 3].includes(count) {return undefiend} else {count--return "123"})
}) 
hook.tap('测试2', () => {console.log("测试2里面的count", count)if([1, 2].includes(count) {return undefiend} else {count--return "123"})
})
hook.tap("测试3", () => {console.log("测试3里面的count",count)if([1].includes(count) {return undefiend} else {count--return "123"})
})
hook.call()

syncLoophook=>asyncparallelHook是一个异步并行，基本类型的Hook， 与同步不同的地方在于

• 会同时开启多个异步任务，而且需要通过tapSaync

const {AsyncParallelHook} = require("tapable")
const hook = new AsyncParallelHook(['author', 'age'])
console.log('time')
hook.tapAsync('测试1', (params1, params2) {setTimeout(() => {console.log('测试1接受的参数'， params1, params2)callback()}, 2000)
})
hook.tapAsync('测试2', (params1, params2, callback) {console.log("测试2接受的参数", params1, params2)callback()
})
hook.tapAsync('测试3',(params1, params2,callback) => {console.log("测试3接受的参数", params1, params2)callback()
})
hook.callAsync('嘎嘎嘎', "99",(err, result) => {console.log("这个是成功的回调",err, result)console.timeEnd("time")
})

AsyncParallelBailHook是一个异步并行，保险类型的hook，只要其中一个有返回值， 就会执行callAsync中的回调

const {AsyncParallelHook} = require('tapable')
const hook = new AsyncParallelBailHook(['author', 'age'])
console.time('time')
hook.tapAsync('测试1', (params1, params2, callback) => {console.log('测试1接受的参数',params1, params2)setTimeout(() => {callback()},1000)
})
hook.tapAsync("测试2", (params1,params2,callback) => {console.log('测试2接受的参数',params1, params2) setTimeout(() => {callback(null, '测试2有返回值')}, 2000)
})
hook.tapAsync('测试3', (params1, params2, callback) => {console.log('测试3接受的参数',params1, params2)setTimeout(()=> {callback(null, '测试3有返回值')}, 3000)
})
hook.callAsync("嘎嘎嘎", "99", (err, result) => {//等全部都完成了才会走到这里来console.log("这是成功后的回调", result);console.timeEnd("time");
});

AsyncSeriesHook是一个异步的，串行的类型的hook，只有前面的执行完成了，后面的才会执行

const {AsyncSeriesHook} = require('tapable')
const hook = new AsyncSeriesHook(['author', 'age'])
console.time('time')
hook.tapAsync('测试1'， (params1, params2, callback) => {console.log('测试1接受的参数', params1, params2)setTimeout(() => {callback()}, 1000)
})
hook.tapAsync('测试2'， (params1, params2, callback) => {console.log('测试2接受的参数', params1, params2)setTimeout(() => {callback()}, 2000)
})
hook.tapAsync('测试3'， (params1, params2, callback) => {console.log('测试3接受的参数', params1, params2)setTimeout(() => {callback()}, 3000)
})
console.timeEnd()

AsyncSeriesBailHook 是一个异步串行，保险类型的hook，在串行的执行过程中，只要其中一个有返回值，后面就不会执行

const {AsyncSeriesBailHook} = require('tapable')
const hook = new AsyncParallelHook(['author', 'age'])
hook.tapAsync('测试1',(params1, params2, callback) => {console.log('测试1接受的参数',params1, params2)setTimeout(() => {callback()}, 1000)
})
hook.tapAsync('测试2',(params1, params2,callback) {console.log('测试2接受的参数',params1, params2)setTimeout(() => {callback()}, 2000)
}) 
hook.tapAsync('测试3',(params1, params2,callback) {console.log('测试3接受的参数',params1, params2)setTimeout(() => {callback()}, 3000)
}) 
hook.callAsync("嘎嘎嘎", "99", (err, result) => {//等全部都完成了才会走到这里来console.log("这是成功后的回调", result);console.timeEnd("time");
});

AsyncSeriesWaterfallHook是一个异步串行，瀑布类型的hook， 如果前一个事件函数的结果result!==undefined,则result会作为后一个事件函数的第一个参数，也就是上一个函数的执行结果会称为下一个函数的参数

const {AsyncSeriesWaterfallHook} = require('tapable')
const hook = new AsyncSeriesWaterfallHook(['author', 'age'])
console.time('time')
hook.tapAsync("测试1", (params1, params2, callback) => {console.log('测试1接受的参数', params1, params2)setTimeout(() => {callback(() => {callback(null, '2')}, 1000)})
})
hook.tapAsync("测试2", (params1, params2, callback) => {console.log('测试2接受的参数', params1, params2)setTimeout(() => {callback(null, '3')},2000)
})
hook.tapAsync("测试3", (param1, param2, callback) => {console.log("测试3接收的参数：", param1, param2);setTimeout(() => {callback(null, "4");}, 3000);
});hook.callAsync("嘎嘎嘎", "99", (err, result) => {//等全部都完成了才会走到这里来console.log("这是成功后的回调", err, result);console.timeEnd("time");
});

Tapable拦截器
Tapable提供的所有的hook都支持注入Interception，它和Axios的拦截器的效果非常类似,可以通过拦截器对整个Tapable发布/订阅流程进行监听，从而触发对应的逻辑

const hook = new SyncHook(['arg1', 'arg2', 'arg3'])
hook.intercept({// 每次调用hook实例的tap，方法注册回调函数的时候，就会调用该方法// 并且接受tap作为参数，还可以对tap进行修改register: (tapInfo) => {console.log(`${tapInfo.name} is doing its job`)return tapInfo},// 通过hook实例对象上的call方法时候触发拦截器call: (arg1, arg2, arg3) => {console.log('starting to calculate routes')}// 在调用被注册的每一个事件函数之前执行tap: (tap) => {console.log(tap, 'tap'))}// loop类型钩子中，每个事件函数被调用前触发拦截器方法 loop:(...args) => {console.log(args, 'loop')}
})