圖解Webpack——實現Plugin

關注公眾號「執鳶者」，回復「書籍」獲取大量前端學習資料,回復「前端視頻」獲取大量前端教學視頻。

面試工作加分項!
Plugin是webpack生態系統的重要組成部分，其目的是解決loader無法實現的其他事，可用於執行範圍更廣的任務，為webpack帶來很大的靈活性。目前存在的plugin並不能完全滿足所有的開發需求，所以定製化符合自己需求的plugin成為學習webpack的必經之路。下面將逐步闡述plugin開發中幾個關鍵技術點並實現plugin。

一、Webpack構建流程

在實現自己的Plugin之前，需要了解一下Webpack的構建流程（下圖）。Webpack的構建流程類似於一條生產線（webpack的事件流機制），在特定時機會廣播對應的事件，插件就可以監聽這些事件的發生，從而在特定的時機做特定的事情。

上圖中展示了Webpack構建流程的三個階段及每個階段廣播出來的事件。

初始化階段：啟動構建；緊接著從配置文件和Shell語句中讀取並合併參數，得到最終參數；用上一步得到的參數初始化Compiler對象並加載所有配置的插件。

從Entey出發，針對每個Module串行調用對應的Loader去翻譯文件的內容，再找到該Module依賴的Module，遞歸地進行編譯處理，得到每個模塊被翻譯後的最終內容及它們之間的依賴關係。

根據入口和模塊之間的依賴關係，組裝成一個個包含多個模塊的Chunk，再將每個Chunk轉換成一個單獨的文件加入到輸出列表中，最終將所需輸出文件的內容寫入文件系統中。

二、編寫Plugin

編寫Plugin主要分為四個步驟：

2.1 基本結構

class MyPlugin {
constructor(options) {}

apply(compiler) {
console.log(compiler);
compiler.hooks.emit.tap('MyPlugin', () => {
console.log('plugin is used!!!');
})
}
}

module.exports = MyPlugin;

2.2 apply方法

apply 方法在安裝插件時，會被 webpack compiler 調用一次。apply 方法可以接收一個 webpack compiler 對象的引用，從而可以在回調函數中訪問到 compiler 對象。

2.3 鉤子函數

在webpack整個編譯過程中暴露出來大量的Hook供內部/外部插件使用，將Hook註冊後即可實現對整個webpack事件流中對應事件的監聽。這些鉤子函數的核心是Tapable,該包暴露出很多鉤子類，利用這些類創建了上述鉤子函數。常見的鉤子主要有以下幾種：

暴露在compiler和compilation上的鉤子函數均是基於上述鉤子構建。

2.4 鉤子函數註冊方式

在plugin中，鉤子註冊方式有三種：tap、tapAsync、tapPromise，根據鉤子函數的類型採用相應的方法進行註冊。同步鉤子函數利用tap註冊，異步鉤子函數利用tap、tapAsync、tapPromise進行註冊。

tap
tap可以用來註冊同步鉤子也能用來註冊異步鉤子。

compiler.hooks.compile.tap('MyPlugin', compilationParams => {
console.log('以同步方式觸及compile鉤子')
});

tapAsync
tapAsync能夠用來註冊異步鉤子，並通過callback告知Webpack異步邏輯執行完畢。

compiler.hooks.run.tapAsync('MyPlugin', (compiler, callback) => {
console.log('tapAsync 異步');
callback();
});

tapPromise
tapPromise能夠用來註冊異步鉤子，其通過返回Promise來告知Webpack異步邏輯執行完畢。（實現方式有兩種，一種是通過返回Promse函數，另一種是利用async實現）。

// 方式一
compiler.hooks.run.tapPromise('MyPlugin', (compiler) => {
return new Promise(resolve => setTimeout(resolve, 1000)).then(() => {
console.log('tapPromise 異步')
})
})

// 方式二
compiler.hooks.run.tapPromise('MyPlugin', async (compiler) => {
await new Promise(resolve => setTimeout(resolve, 1000));
console.log('tapPromise 異步 async')
})

2.5 Compiler和Compilation

Compiler和Compilation是Plugin和Webpack之間的橋梁，所以了解其具體含義至關重要，其含義如下：

Compiler 對象包含了 Webpack 環境的所有配置信息，包含options、loaders、plugins等信息。這個對象在 Webpack 啟動時被實例化，它是全局唯一的，可以簡單地將它理解為 Webpack 實例。

Compilation 對象包含了當前的模塊資源、編譯生成資源、變化的文件等。當 Webpack以開發模式運行時，每當檢測到一個文件發生變化，便有一次新的 Compilation 被 創建。Compilation對象也提供了很多事件回調供插件進行擴展。通過 Compilation也能讀取到 Compiler 對象。

三、自定義鉤子函數

難道鉤子函數只有官方給的哪些嗎？肯定不是的，我們能夠自己按照自己的需求實現一個鉤子函數，實現該鉤子函數主要分為以下幾個步驟：

調用tabable包，選擇合適的鉤子

將自己定義的鉤子函數掛載到compiler或compilation上

在需要的位置註冊該鉤子函數

在你所需要的時機觸發對應的鉤子函數

// 該代碼中有註冊的同步鉤子函數和異步鉤子函數和其觸發過程
const { SyncHook, AsyncSeriesHook } = require('tapable');

class MyHookPlugin {
constructor() {}

apply(compiler) {
// 掛載
compiler.hooks.myHook = new SyncHook(['arg1', 'arg2']);
compiler.hooks.myAsyncHook = new AsyncSeriesHook(['arg1', 'arg2']);

// 註冊
// 同步
compiler.hooks.myHook.tap('myHook', (arg1, arg2) => {
console.log('自己定義的鉤子函數被觸發', arg1, arg2);
})

// 異步1
compiler.hooks.myAsyncHook.tapAsync('myHook', (arg1, arg2, callback) => {
console.log('異步鉤子 tapAsync ', arg1, arg2);
callback();
});
// 異步2
compiler.hooks.myAsyncHook.tapPromise('myHook', (arg1, arg2) => {
return new Promise((resolve) => {
resolve({arg1, arg2});
}).then((context) => {
console.log('異步鉤子 tapPromise', context)
})
});

compiler.hooks.environment.tap('myHookPlugin', () => {
// 觸發
// 同步
compiler.hooks.myHook.call(1, 2);
// 異步1
compiler.hooks.myAsyncHook.callAsync(1, 2, err => {
console.log('觸發完畢…… callAsync')
})
// 異步2
compiler.hooks.myAsyncHook.promise(1, 2).then(err => {
console.log('觸發完畢…… promise')
})
})
}
}

module.exports = MyHookPlugin;

四、實現Plugin

本節是Plugin實戰，在生成資源到output目錄之前生成資源清單。

class MyPlugin {
constructor(options) {

}

apply(compiler) {
compiler.hooks.emit.tapAsync('MyPlugin', (compilation, callback) => {
console.log('plugin is used!!!', "emit事件");
const mainfest = {}
for (const name of Object.keys(compilation.assets)) {
// compilation.assets[name].size()獲取輸出文件的大小;compilation.assets[name].source()獲取內容
mainfest[name] = compilation.assets[name].size();
console.log(compilation.assets[name].source())
}

compilation.assets['mainfest.json'] = {
source() {
return JSON.stringify(mainfest);
},
size() {
return this.source().length;
}
};

callback();
});
}
}

module.exports = MyPlugin;

註：本文只是起到拋磚引玉的作用，希望各位大佬多多指點。

相關章節
圖解Webpack————基礎篇
圖解Webpack————優化篇
圖解Webpack————實現Loader

歡迎大家關注公眾號(回復「深入淺出Webpack」獲取深入淺出Webpack的pdf版本，回復「webpack05」獲取本節的思維導圖,回復「書籍」獲取大量前端學習資料,回復「前端視頻」獲取大量前端教學視頻)