您好,登錄后才能下訂單哦!
webpack
作為前端最火的構(gòu)建工具,是前端自動(dòng)化工具鏈最重要的部分,使用門檻較高。本系列是筆者自己的學(xué)習(xí)記錄,比較基礎(chǔ),希望通過(guò)問(wèn)題 + 解決方式的模式,以前端構(gòu)建中遇到的具體需求為出發(fā)點(diǎn),學(xué)習(xí)webpack
工具中相應(yīng)的處理辦法。(本篇中的參數(shù)配置及使用方式均基于webpack4.0版本
)
plugin
機(jī)制是webpack
中另一個(gè)核心概念,它基于事件流框架tapable
,你可以參考瀏覽器環(huán)境中的【DOM事件模型】,【SPA模型中的生命周期鉤子】或是node環(huán)境中的【EventEmitter模塊】來(lái)理解其作用。plugin
系統(tǒng)提供給開(kāi)發(fā)者監(jiān)聽(tīng)webpack
生命周期并在特定事件觸發(fā)時(shí)執(zhí)行指定操作的能力。
當(dāng)然,要寫一個(gè)真正能實(shí)現(xiàn)一定功能的插件,你還需要了解Compiler和Compilation這兩個(gè)概念,網(wǎng)上可以找到非常多相關(guān)的文章(《webpack-docs/plugin》)。
從表現(xiàn)上看,Compiler暴露了和webpack
整個(gè)生命周期相關(guān)的鉤子,通過(guò)如下的方式訪問(wèn):
//基本寫法
compiler.hooks.someHook.tap(...)
//如果希望在entry配置完畢后執(zhí)行某個(gè)功能
compiler.hooks.entryOption.tap(...)
//如果希望在生成的資源輸出到output指定目錄之前執(zhí)行某個(gè)功能
compiler.hooks.emit.tap(...)
webpack
在重要的生命周期節(jié)點(diǎn)上都提供了事件鉤子,我們可以借此加入一些自定義的功能。我們來(lái)編寫一個(gè)插件,直觀地看看webpack
中涉及的鉤子:
//check-compiler-hooks-plugin.js
const pluginName = 'checkCompilerHooksPlugin';
module.exports = class checkCompilerHooksPlugin {
apply(compiler){
//打印出entryOption執(zhí)行完畢時(shí)Compiler暴露的鉤子
for(var hook of Object.keys(compiler.hooks)){
console.log(hook);
}
}
}
可以看到Compiler
上可以使用的鉤子(當(dāng)然這種方式看到的鉤子和實(shí)際觸發(fā)順序無(wú)關(guān)):
注意上圖中Compiler.hooks暴露的事件鉤子中有一個(gè)compilation,下一小節(jié)將解釋它。
Compilation暴露了與模塊
和依賴
有關(guān)的粒度更小的事件鉤子,官方文檔中的說(shuō)法是模塊會(huì)經(jīng)歷加載(loaded),封存(sealed),優(yōu)化(optimized),分塊(chunked),哈希(hashed)和重新創(chuàng)建(restored)這幾個(gè)典型步驟,從上面的示例可以看到,compilation是Compiler生命周期中的一個(gè)步驟,使用compilation
相關(guān)鉤子的通用寫法為:
compiler.hooks.compilation.tap('SomePlugin',function(compilation, callback){
compilation.hooks.someOtherHook.tap('SomeOtherPlugin',function(){
....
})
});
我們仿照上面的方法就可以查看到compilation
對(duì)象上(compilation事件觸發(fā)時(shí),在回調(diào)函數(shù)中取得的引用)暴露的事件鉤子。
Compiler和Compilation暴露的事件鉤子總數(shù)超過(guò)30個(gè),具體信息可以直接在官方文檔直接查詢API,在特定的階段鉤入想要添加的自定義功能。想要更好地理解
plugin
的作用機(jī)制,還需要了解webpack
的整個(gè)生命周期以及事件流框架tapable
.
根據(jù)webpack
官方文檔的說(shuō)明,一個(gè)自定義的plugin
需要包含:
apply
方法官網(wǎng)給出了一個(gè)基本的結(jié)構(gòu)示例:
//console-log-on-build-webpack-plugin.js
const pluginName = 'ConsoleLogOnBuildWebpackPlugin';
class ConsoleLogOnBuildWebpackPlugin {
apply(compiler){
compiler.hooks.run.tap(pluginName, compilation=>{
console.log('webpack構(gòu)建過(guò)程開(kāi)始');
});
}
}
將其添加到webpack插件中后可以看到運(yùn)行中觸發(fā)了傳入的回調(diào)函數(shù):
在《webpack4.0各個(gè)擊破(4)——javascript & splitChunks》一文中,我們使用splitChunks
功能對(duì)初始模塊進(jìn)行代碼分割,在為多頁(yè)面應(yīng)用模型的html入口插入script標(biāo)簽時(shí)遇到了無(wú)法自動(dòng)插入的問(wèn)題,那么本節(jié)我們用一個(gè)webpack-dispatch-chunk-plugin
來(lái)解決一下這個(gè)問(wèn)題。
處理的邏輯就是利用html-webpack-plugin
暴露的更改資源標(biāo)簽的事件鉤子htmlWebpackPluginAlterAssetTags
來(lái)進(jìn)行資源處理,此時(shí)資源已經(jīng)離過(guò)模塊化和代碼分割并已經(jīng)在名稱中加入了hash標(biāo)記,只需要此時(shí)過(guò)濾掉名稱中含有vendors
且不包含相應(yīng)入口名稱的新的chunk
即可,當(dāng)然這只是一個(gè)基本功能,想要?jiǎng)討B(tài)實(shí)現(xiàn)功能,還需要將上例中checkMap
部分變?yōu)閷?duì)Compiler或是Compilation上對(duì)應(yīng)屬性的引用,本篇不再贅述。
[1] webpack之內(nèi)部運(yùn)行機(jī)制》
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。