2、webpack核心模塊——tapable

tapable 是 webpack 的一個(gè)核心工具，但也可用于其他地方，以提供類(lèi)似的插件接口。tapable模塊中暴露了Hook類(lèi)，pugins都是注冊(cè)在Hook的實(shí)例化對(duì)象上，這個(gè)類(lèi)暴露?tap,?tapAsync?和?tapPromise?方法，webpack中的插件會(huì)將所需執(zhí)行的函數(shù)通過(guò)tap 、tapAsync 、tapPromise等方法注冊(cè)到對(duì)應(yīng)鉤子上。這樣，webpack調(diào)用相應(yīng)鉤子時(shí)，散落在各文件的插件就會(huì)自動(dòng)執(zhí)行

插件類(lèi)型：同步事件（sync）、異步并行事件（asyncParallel）、同步串行事件（asyncSeries）

compiler對(duì)象——hooks（對(duì)應(yīng)的編譯周期詳情見(jiàn)https://www.webpackjs.com/api/compiler-hooks/）

sync插件用法及原理：

? ? ? 1、事件注冊(cè)

usage : compiler.hooks.beforeRun.tab( option , fn )?

option : String || Object = { name:xxx , before:String || [] , stage:number }

option支持String或Object格式，如果傳入對(duì)象，必須寫(xiě)name屬性，相當(dāng)于string；before:注冊(cè)的插件在哪些插件的前面，值可為string=>xxxplugin.name或者 [xxxplugin.name,xxxplugin2.name,...arg];stage:權(quán)重，權(quán)重大的排在事件管理中心的后面，默認(rèn)stage=0。

? ? ? 2、事件觸發(fā)

? ? ? compiler.hooks.beforeRun.callAsync(compiler,()=>{})

? ??基本原理：

? ??????