揭祕webpack plugin

前言

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

1、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 能夠執行更普遍的任務，擁有更強的構建能力。

2、Plugin 工做原理

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

3、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鉤子有了這些瞭解後，咱們就能夠進一步嘗試開發一個插件了。

4、如何開發一個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插件。

開發插件並不是難如登天的事情，當遇到經過配置沒法解決的問題，又一時找不到好的插件時，不如試試本身編寫一個插件來解決，相信我，你會愈來愈強的！

本文的源碼都可在這裏獲取：github.com/yc111/webpa…

歡迎交流～

Happy New Year！

--

參考
webpack.js.org/api/compile…
webpack.js.org/api/compila…
webpack.js.org/api/parser/
github.com/yc111/webpa…
webpack.js.org/contribute/…
github.com/webpack/tap…
webpack.js.org/concepts/#p…
webpack.js.org/api/plugins…

歡迎轉載，轉載請註明出處：champyin.com/2020/01/12/…