webpack4.0各個(gè)擊破（7）——plugin篇-創(chuàng)新互聯(lián)

webpack作為前端最火的構(gòu)建工具，是前端自動(dòng)化工具鏈最重要的部分，使用門檻較高。本系列是筆者自己的學(xué)習(xí)記錄，比較基礎(chǔ)，希望通過問題 + 解決方式的模式，以前端構(gòu)建中遇到的具體需求為出發(fā)點(diǎn)，學(xué)習(xí)webpack工具中相應(yīng)的處理辦法。（本篇中的參數(shù)配置及使用方式均基于webpack4.0版本）

成都創(chuàng)新互聯(lián)公司2013年成立，先為雙江等服務(wù)建站，雙江等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為雙江企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

一. plugin概述

1.1 Plugin的作用

plugin機(jī)制是webpack中另一個(gè)核心概念，它基于事件流框架tapable，你可以參考瀏覽器環(huán)境中的【DOM事件模型】，【SPA模型中的生命周期鉤子】或是node環(huán)境中的【EventEmitter模塊】來理解其作用。plugin系統(tǒng)提供給開發(fā)者監(jiān)聽webpack生命周期并在特定事件觸發(fā)時(shí)執(zhí)行指定操作的能力。

當(dāng)然，要寫一個(gè)真正能實(shí)現(xiàn)一定功能的插件，你還需要了解Compiler和Compilation這兩個(gè)概念，網(wǎng)上可以找到非常多相關(guān)的文章（《webpack-docs/plugin》)。

1.2 Compiler

從表現(xiàn)上看，Compiler暴露了和webpack整個(gè)生命周期相關(guān)的鉤子，通過如下的方式訪問:

//基本寫法
compiler.hooks.someHook.tap(...)
//如果希望在entry配置完畢后執(zhí)行某個(gè)功能
compiler.hooks.entryOption.tap(...)
//如果希望在生成的資源輸出到output指定目錄之前執(zhí)行某個(gè)功能
compiler.hooks.emit.tap(...)

webpack在重要的生命周期節(jié)點(diǎn)上都提供了事件鉤子，我們可以借此加入一些自定義的功能。我們來編寫一個(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ā)順序無關(guān)):

注意上圖中Compiler.hooks暴露的事件鉤子中有一個(gè)compilation，下一小節(jié)將解釋它。

1.3 Compilation

Compilation暴露了與模塊和依賴有關(guān)的粒度更小的事件鉤子，官方文檔中的說法是模塊會(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對象上（compilation事件觸發(fā)時(shí)，在回調(diào)函數(shù)中取得的引用）暴露的事件鉤子。

Compiler和Compilation暴露的事件鉤子總數(shù)超過30個(gè)，具體信息可以直接在官方文檔直接查詢API，在特定的階段鉤入想要添加的自定義功能。想要更好地理解plugin的作用機(jī)制，還需要了解webpack的整個(gè)生命周期以及事件流框架tapable.

二. 如何寫一個(gè)plugin

根據(jù)webpack官方文檔的說明，一個(gè)自定義的plugin需要包含：

• 一個(gè)javascript命名函數(shù)
• 插件函數(shù)的prototype上要有一個(gè)apply方法
• 指定一個(gè)綁定到webpack自身的事件鉤子
• 注冊一個(gè)回調(diào)函數(shù)來處理webpack實(shí)例中的指定數(shù)據(jù)
• 處理完成后調(diào)用webpack提供的回調(diào)

官網(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)建過程開始'); 
        });
    }
}

將其添加到webpack插件中后可以看到運(yùn)行中觸發(fā)了傳入的回調(diào)函數(shù):

四. 實(shí)戰(zhàn)

在《webpack4.0各個(gè)擊破（4）——javascript & splitChunks》一文中，我們使用splitChunks功能對初始模塊進(jìn)行代碼分割，在為多頁面應(yīng)用模型的html入口插入script標(biāo)簽時(shí)遇到了無法自動(dòng)插入的問題，那么本節(jié)我們用一個(gè)webpack-dispatch-chunk-plugin來解決一下這個(gè)問題。

處理的邏輯就是利用html-webpack-plugin暴露的更改資源標(biāo)簽的事件鉤子htmlWebpackPluginAlterAssetTags來進(jìn)行資源處理，此時(shí)資源已經(jīng)離過模塊化和代碼分割并已經(jīng)在名稱中加入了hash標(biāo)記，只需要此時(shí)過濾掉名稱中含有vendors且不包含相應(yīng)入口名稱的新的chunk即可，當(dāng)然這只是一個(gè)基本功能，想要?jiǎng)討B(tài)實(shí)現(xiàn)功能，還需要將上例中checkMap部分變?yōu)閷?em>Compiler或是Compilation上對應(yīng)屬性的引用，本篇不再贅述。

【參考】

[1] webpack之內(nèi)部運(yùn)行機(jī)制》

創(chuàng)新互聯(lián)www.cdcxhl.cn，專業(yè)提供香港、美國云服務(wù)器，動(dòng)態(tài)BGP最優(yōu)骨干路由自動(dòng)選擇，持續(xù)穩(wěn)定高效的網(wǎng)絡(luò)助力業(yè)務(wù)部署。公司持有工信部辦法的idc、isp許可證， 機(jī)房獨(dú)有T級(jí)流量清洗系統(tǒng)配攻擊溯源，準(zhǔn)確進(jìn)行流量調(diào)度，確保服務(wù)器高可用性。佳節(jié)活動(dòng)現(xiàn)已開啟，新人活動(dòng)云服務(wù)器買多久送多久。

新聞名稱：webpack4.0各個(gè)擊破（7）——plugin篇-創(chuàng)新互聯(lián)
文章來源：http://muchs.cn/article24/cdisje.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供Google、網(wǎng)站排名、品牌網(wǎng)站設(shè)計(jì)、外貿(mào)網(wǎng)站建設(shè)、外貿(mào)建站、網(wǎng)站收錄

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)