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

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上暴露的一些常用的鉤子：

鉤子	類型	什麼時候調用
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 由如下部分組成：

一個命名的 Javascript 方法或者 JavaScript 類。
它的原型上需要定義一個叫做 apply 的方法。
註冊一個事件鉤子。
操作webpack內部實例特定數據。
功能完成後，調用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/

揭秘webpack plugin

前言