揭秘webpack plugin

前言

Plugin(插件) 是 webpack 生態的的一個關鍵部分。它為社區提供了一種強大的方法來擴展 webpack 和開發 webpack 的編譯過程。本文將嘗試探索 webpack plugin，揭秘它的工作原理，以及如何開發一個 plugin。

一、Plugin 的作用

關於 Plugin 的作用，引用一下 webpack 官方的介紹：

Plugins expose the full potential of the webpack engine to third-party developers. Using staged build callbacks, developers can introduce their own behaviors into the webpack build process.

我把它通俗翻譯了下：
通過插件我們可以擴展 webpack，加入自定義的構建行為，使 webpack 可以執行更廣泛的任務，擁有更強的構建能力。

二、Plugin 工作原理

webpack 就像一條生產線，要經過一系列處理流程后才能將源文件轉換成輸出結果。 這條生產線上的每個處理流程的職責都是單一的，多個流程之間有存在依賴關系，只有完成當前處理后才能交給下一個流程去處理。
插件就像是一個插入到生產線中的一個功能，在特定的時機對生產線上的資源做處理。webpack 通過 Tapable 來組織這條復雜的生產線。 webpack 在運行過程中會廣播事件，插件只需要監聽它所關心的事件，就能加入到這條生產線中，去改變生產線的運作。
webpack 的事件流機制保證了插件的有序性，使得整個系統擴展性很好。
——「深入淺出 Webpack」

站在代碼邏輯的角度就是：webpack 在編譯代碼過程中，會觸發一系列 Tapable 鈎子事件，插件所做的，就是找到相應的鈎子，往上面掛上自己的任務，也就是注冊事件，這樣，當 webpack 構建的時候，插件注冊的事件就會隨着鈎子的觸發而執行了。

三、webpack 的一些底層邏輯

開發一個 plugin 比開發一個 loader 更高級一些（關於 loader 的開發，可以看我的另一篇文章「揭秘webpack loader」），因為我們會用到一些 webpack 比較底層的內部組件。因此我們需要了解一些 webpack 的底層邏輯。

webpack 內部執行流程

一次完整的 webpack 打包大致是這樣的過程：

• 將命令行參數與 webpack 配置文件 合並、解析得到參數對象。
• 參數對象傳給 webpack 執行得到 Compiler 對象。
• 執行 Compiler 的 run方法開始編譯。每次執行 run 編譯都會生成一個 Compilation 對象。
• 觸發 Compiler 的 make方法分析入口文件，調用 compilation 的 buildModule 方法創建主模塊對象。
• 生成入口文件 AST(抽象語法樹)，通過 AST 分析和遞歸加載依賴模塊。
• 所有模塊分析完成后，執行 compilation 的 seal 方法對每個 chunk 進行整理、優化、封裝。
• 最后執行 Compiler 的 emitAssets 方法把生成的文件輸出到 output 的目錄中。

webpack 底層基本流程圖

webpack 內部的一些鈎子

什么是鈎子

鈎子的本質就是：事件。為了方便我們直接介入和控制編譯過程，webpack 把編譯過程中觸發的各類關鍵事件封裝成事件接口暴露了出來，這些接口被很形象地稱做：hooks（鈎子）。開發插件，離不開這些鈎子。

Tapable

Tapable 為 webpack 提供了統一的插件接口（鈎子）類型定義，它是 webpack 的核心功能庫。webpack 中目前有十種 hooks，在 Tapable 源碼中可以看到，他們是：

// https://github.com/webpack/tapable/blob/master/lib/index.js

exports.SyncHook = require("./SyncHook");
exports.SyncBailHook = require("./SyncBailHook");
exports.SyncWaterfallHook = require("./SyncWaterfallHook");
exports.SyncLoopHook = require("./SyncLoopHook");
exports.AsyncParallelHook = require("./AsyncParallelHook");
exports.AsyncParallelBailHook = require("./AsyncParallelBailHook");
exports.AsyncSeriesHook = require("./AsyncSeriesHook");
exports.AsyncSeriesBailHook = require("./AsyncSeriesBailHook");
exports.AsyncSeriesLoopHook = require("./AsyncSeriesLoopHook");
exports.AsyncSeriesWaterfallHook = require("./AsyncSeriesWaterfallHook");

Tapable 還統一暴露了三個方法給插件，用於注入不同類型的自定義構建行為：

• tap：可以注冊同步鈎子和異步鈎子。
• tapAsync：回調方式注冊異步鈎子。
• tapPromise：Promise方式注冊異步鈎子。

webpack 里的幾個非常重要的對象，Compiler, Compilation 和 JavascriptParser 都繼承了 Tapable 類，它們身上掛着豐富的鈎子。

Compiler Hooks

Compiler 編譯器模塊是創建編譯實例的主引擎。大多數面向用戶的插件都首先在 Compiler 上注冊。

compiler上暴露的一些常用的鈎子：

鈎子	類型	什么時候調用
run	AsyncSeriesHook	在編譯器開始讀取記錄前執行
compile	SyncHook	在一個新的compilation創建之前執行
compilation	SyncHook	在一次compilation創建后執行插件
make	AsyncParallelHook	完成一次編譯之前執行
emit	AsyncSeriesHook	在生成文件到output目錄之前執行，回調參數： compilation
afterEmit	AsyncSeriesHook	在生成文件到output目錄之后執行
assetEmitted	AsyncSeriesHook	生成文件的時候執行，提供訪問產出文件信息的入口，回調參數：file，info
done	AsyncSeriesHook	一次編譯完成后執行，回調參數：stats

Compilation Hooks

Compilation 是 Compiler 用來創建一次新的編譯過程的模塊。一個 Compilation 實例可以訪問所有模塊和它們的依賴。在一次編譯階段，模塊被加載、封裝、優化、分塊、散列和還原。
Compilation 也繼承了 Tapabl 並提供了很多生命周期鈎子。

Compilation 上暴露的一些常用的鈎子：

鈎子	類型	什么時候調用
buildModule	SyncHook	在模塊開始編譯之前觸發，可以用於修改模塊
succeedModule	SyncHook	當一個模塊被成功編譯，會執行這個鈎子
finishModules	AsyncSeriesHook	當所有模塊都編譯成功后被調用
seal	SyncHook	當一次compilation停止接收新模塊時觸發
optimizeDependencies	SyncBailHook	在依賴優化的開始執行
optimize	SyncHook	在優化階段的開始執行
optimizeModules	SyncBailHook	在模塊優化階段開始時執行，插件可以在這個鈎子里執行對模塊的優化，回調參數：modules
optimizeChunks	SyncBailHook	在代碼塊優化階段開始時執行，插件可以在這個鈎子里執行對代碼塊的優化，回調參數：chunks
optimizeChunkAssets	AsyncSeriesHook	優化任何代碼塊資源，這些資源存放在 compilation.assets 上。一個 chunk 有一個 files 屬性，它指向由一個chunk創建的所有文件。任何額外的 chunk 資源都存放在 compilation.additionalChunkAssets 上。回調參數：chunks
optimizeAssets	AsyncSeriesHook	優化所有存放在 compilation.assets 的所有資源。回調參數：assets

JavascriptParser Hooks

Parser 解析器實例在 Compiler 編譯器中產生，用於解析 webpack 正在處理的每個模塊。我們可以用它提供的 Tapable 鈎子自定義解析過程。

JavascriptParser 上暴露的一些常用的鈎子：

鈎子	類型	什么時候調用
evaluate	SyncBailHook	在計算表達式的時候調用。
statement	SyncBailHook	為代碼片段中每個已解析的語句調用的通用鈎子
import	SyncBailHook	為代碼片段中每個import語句調用，回調參數：statement,source
export	SyncBailHook	為代碼片段中每個export語句調用，回調參數：statement
call	SyncBailHook	解析一個call方法的時候調用，回調參數：expression
program	SyncBailHook	解析一個表達式的時候調用，回調參數：expression

對webpack底層邏輯和tapable鈎子有了這些了解后，我們就可以進一步嘗試開發一個插件了。

四、如何開發一個webpack plugin

plugin 的基本結構

一個 webpack plugin 由如下部分組成：

1. 一個命名的 Javascript 方法或者 JavaScript 類。
2. 它的原型上需要定義一個叫做 apply 的方法。
3. 注冊一個事件鈎子。
4. 操作webpack內部實例特定數據。
5. 功能完成后，調用webpack提供的回調。

一個基本的 plugin 代碼結構大致長這個樣子：

// plugins/MyPlugin.js

class MyPlugin {
  apply(compiler) {
    compiler.hooks.done.tap('My Plugin', (stats) => {
      console.log('Bravo!');
    });
  }
}

module.exports = MyPlugin;

這就是一個最簡單的 webpack 插件了，它注冊了 Compiler 上的異步串行鈎子 done，在鈎子中注入了一條控制台打印的語句。根據上文鈎子的介紹我們可以知道，done 會在一次編譯完成后執行。所以這個插件會在每次打包結束，向控制台首先輸出這句 Bravo!。

開發一個文件清單插件

我希望每次webpack打包后，自動產生一個打包文件清單，上面要記錄文件名、文件數量等信息。

思路：

• 顯然這個操作需要在文件生成到dist目錄之前進行，所以我們要注冊的是Compiler上的emit鈎子。
• emit 是一個異步串行鈎子，我們用 tapAsync 來注冊。
• 在 emit 的回調函數里我們可以拿到 compilation 對象，所有待生成的文件都在它的 assets 屬性上。
• 通過 compilation.assets 獲取我們需要的文件信息，並將其整理為新的文件內容准備輸出。
• 然后往 compilation.assets 添加這個新的文件。

插件完成后，最后將寫好的插件放到 webpack 配置中，這個包含文件清單的文件就會在每次打包的時候自動生成了。

實現：

// plugins/FileListPlugin.js

class FileListPlugin {
    constructor (options) {
    	// 獲取插件配置項
        this.filename = options && options.filename ? options.filename : 'FILELIST.md';
    }

    apply(compiler) {
        // 注冊 compiler 上的 emit 鈎子
        compiler.hooks.emit.tapAsync('FileListPlugin', (compilation, cb) => {
            
            // 通過 compilation.assets 獲取文件數量
            let len = Object.keys(compilation.assets).length;

            // 添加統計信息
            let content = `# ${len} file${len>1?'s':''} emitted by webpack\n\n`;

            // 通過 compilation.assets 獲取文件名列表
            for(let filename in compilation.assets) {
                content += `- ${filename}\n`;
            }

            // 往 compilation.assets 中添加清單文件
            compilation.assets[this.filename] = {
            	// 寫入新文件的內容
                source: function() {
                    return content;
                },
                // 新文件大小（給 webapck 輸出展示用）
                size: function() {
                    return content.length;
                }
            }

            // 執行回調，讓 webpack 繼續執行
            cb();
        })
    }
}

module.exports = FileListPlugin;

測試：

在 webpack.config.js 中配置我們自己寫的plugin：

plugins: [
    new MyPlugin(),
    new FileListPlugin({
        filename: '_filelist.md'
    })
]

npm run build 執行，可以看到生成了 _filelist.md 文件：

打開 dist 目錄，可以看到_filelist.md 文件中列出了 webpack 打包后的文件：

成功！

總結

本文總結了 webpack plugin 的工作原理、wepack底層執行的基本流程以及介紹了 tapable 和常用的 hooks，最后通過兩個小例子演示了如何自己開發一個webpack插件。

開發插件並非難如登天的事情，當遇到通過配置無法解決的問題，又一時找不到好的插件時，不如試試自己編寫一個插件來解決，相信我，你會越來越強的！

本文的源碼均可在這里獲取：https://github.com/yc111/webpack-plugin

歡迎交流～

Happy New Year！

--

參考
https://webpack.js.org/api/compiler-hooks/
https://webpack.js.org/api/compilation-hooks/
https://webpack.js.org/api/parser/
https://github.com/yc111/webpack/tree/master/lib
https://webpack.js.org/contribute/writing-a-plugin/
https://github.com/webpack/tapable#tapable
https://webpack.js.org/concepts/#plugins
https://webpack.js.org/api/plugins/

歡迎轉載，轉載請注明出處：http://champyin.com/2020/01/12/揭秘webpack-plugin/