前言

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 工作原理

Plugin 的工作原理，簡單來說，就是webpack在編譯過程中提供了一些生命週期鉤子，我們的外掛會在這些鉤子事件中注入我們要執行的任務（註冊處理器），當 webpack 執行構建的時候，它的 Tapable 事件流會自動呼叫這些鉤子，從而觸發我們注入的方法，執行我們的自定義任務。

三、webpack 的一些底層邏輯

開發一個 plugin 比開發一個 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 編譯打包的過程中，會觸發一些關鍵事件，為了方便我們直接介入和控制編譯過程，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上暴露的一些常用的鉤子：

Compilation Hooks

Compilation 是 Compiler 用來建立一次新的編譯過程的模組。一個 Compilation 例項可以訪問所有模組和它們的依賴。在一次編譯階段，模組被載入、封裝、優化、分塊、雜湊和還原。
Compilation 也繼承了 Tapabl 並提供了很多生命週期鉤子。

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

JavascriptParser Hooks

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

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

對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-plug