前言

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

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-plugin/

標籤：JavaScript

上一篇：使用Vue實作一個樹組件

下一篇：vue專案常用方法封裝