探尋 webpack 插件機制

webpack 可謂是讓人欣喜又讓人憂，功能強大但須要必定的學習成本。在探尋 webpack 插件機制前，首先須要瞭解一件有意思的事情，webpack 插件機制是整個 webpack 工具的骨架，而 webpack 自己也是利用這套插件機制構建出來的。所以在深刻認識 webpack 插件機制後，再來進行項目的相關優化，想必會大有裨益。

webpack 插件

先來瞅瞅 webpack 插件在項目中的運用

const MyPlugin = require('myplugin')
const webpack = require('webpack')

webpack({
  ...,
  plugins: [new MyPlugin()]
  ...,
})
複製代碼

那麼符合什麼樣的條件能做爲 webpack 插件呢？通常來講，webpack 插件有如下特色：

1. 獨立的 JS 模塊，暴露相應的函數

2. 函數原型上的 apply 方法會注入 compiler 對象

3. compiler 對象上掛載了相應的 webpack 事件鉤子

4. 事件鉤子的回調函數裏能拿到編譯後的 compilation 對象，若是是異步鉤子還能拿到相應的 callback

下面結合代碼來看看：

function MyPlugin(options) {}
// 2.函數原型上的 apply 方法會注入 compiler 對象
MyPlugin.prototype.apply = function(compiler) {
  // 3.compiler 對象上掛載了相應的 webpack 事件鉤子 4.事件鉤子的回調函數裏能拿到編譯後的 compilation 對象
  compiler.plugin('emit', (compilation, callback) => {
    ...
  })
}
// 1.獨立的 JS 模塊，暴露相應的函數
module.exports = MyPlugin
複製代碼

這樣子，webpack 插件的基本輪廓就勾勒出來了，此時疑問點有幾點，

1. 疑問 1：函數的原型上爲何要定義 apply 方法？閱讀源碼後發現源碼中是經過 plugin.apply() 調用插件的。

const webpack = (options, callback) => {
  ...
  for (const plugin of options.plugins) {
    plugin.apply(compiler);
  }
  ...
}
複製代碼

2. 疑問 2：compiler 對象是什麼呢？

3. 疑問 3：compiler 對象上的事件鉤子是怎樣的？

4. 疑問 4：事件鉤子的回調函數裏能拿到的 compilation 對象又是什麼呢？

這些疑問也是本文的線索，讓咱們一個個探索。

compiler 對象

compiler 即 webpack 的編輯器對象，在調用 webpack 時，會自動初始化 compiler 對象，源碼以下：

// webpack/lib/webpack.js
const Compiler = require("./Compiler")

const webpack = (options, callback) => {
  ...
  options = new WebpackOptionsDefaulter().process(options) // 初始化 webpack 各配置參數
  let compiler = new Compiler(options.context)             // 初始化 compiler 對象，這裏 options.context 爲 process.cwd()
  compiler.options = options                               // 往 compiler 添加初始化參數
  new NodeEnvironmentPlugin().apply(compiler)              // 往 compiler 添加 Node 環境相關方法
  for (const plugin of options.plugins) {
    plugin.apply(compiler);
  }
  ...
}
複製代碼

終上，compiler 對象中包含了全部 webpack 可配置的內容，開發插件時，咱們能夠從 compiler 對象中拿到全部和 webpack 主環境相關的內容。

compilation 對象

compilation 對象表明了一次單一的版本構建和生成資源。當運行 webpack 時，每當檢測到一個文件變化，一次新的編譯將被建立，從而生成一組新的編譯資源。一個編譯對象表現了當前的模塊資源、編譯生成資源、變化的文件、以及被跟蹤依賴的狀態信息。

結合源碼來理解下上面這段話，首先 webpack 在每次執行時會調用 compiler.run() (源碼位置)，接着追蹤 onCompiled 函數傳入的 compilation 參數，能夠發現 compilation 來自構造函數 Compilation。

// webpack/lib/Compiler.js
const Compilation = require("./Compilation");

newCompilation(params) {
  const compilation = new Compilation(this);
  ...
  return compilation;
}
複製代碼

不得不提的 tapable 庫

再介紹完 compiler 對象和 compilation 對象後，不得不提的是 tapable 這個庫，這個庫暴露了全部和事件相關的 pub/sub 的方法。並且函數 Compiler 以及函數 Compilation 都繼承自 Tapable。

事件鉤子

事件鉤子其實就是相似 MVVM 框架的生命週期函數，在特定階段能作特殊的邏輯處理。瞭解一些常見的事件鉤子是寫 webpack 插件的前置條件，下面列舉些常見的事件鉤子以及做用：

鉤子	做用	參數	類型
after-plugins	設置完一組初始化插件以後	compiler	sync
after-resolvers	設置完 resolvers 以後	compiler	sync
run	在讀取記錄以前	compiler	async
compile	在建立新 compilation 以前	compilationParams	sync
compilation	compilation 建立完成	compilation	sync
emit	在生成資源並輸出到目錄以前	compilation	async
after-emit	在生成資源並輸出到目錄以後	compilation	async
done	完成編譯	stats	sync

完整地請參閱官方文檔手冊，同時瀏覽相關源碼 也能比較清晰地看到各個事件鉤子的定義。

插件流程淺析

拿 emit 鉤子爲例，下面分析下插件調用源碼：

compiler.plugin('emit', (compilation, callback) => {
  // 在生成資源並輸出到目錄以前完成某些邏輯
})
複製代碼

此處調用的 plugin 函數源自上文提到的 tapable 庫，其最終調用棧指向了 hook.tapAsync()，其做用相似於 EventEmitter 的 on，源碼以下：

// Tapable.js
options => {
  ...
  if(hook !== undefined) {
    const tapOpt = {
      name: options.fn.name || "unnamed compat plugin",
      stage: options.stage || 0
    };
    if(options.async)
      hook.tapAsync(tapOpt, options.fn); // 將插件中異步鉤子的回調函數注入
    else
      hook.tap(tapOpt, options.fn);
    return true;
  }
};
複製代碼

有注入必有觸發的地方，源碼中經過 callAsync 方法觸發以前注入的異步事件，callAsync 相似 EventEmitter 的 emit，相關源碼以下：

this.hooks.emit.callAsync(compilation, err => {
	if (err) return callback(err);
	outputPath = compilation.getPath(this.outputPath);
	this.outputFileSystem.mkdirp(outputPath, emitFiles);
});
複製代碼

一些深刻細節這裏就不展開了，說下關於閱讀比較大型項目的源碼的兩點體會，

• 要抓住一條主線索去讀，忽視細節。不然會浪費不少時間並且會有挫敗感；

• 結合調試工具來分析，不少點不用調試工具的話很容易顧此失彼；

動手實現個 webpack 插件

結合上述知識點的分析，不難寫出本身的 webpack 插件，關鍵在於想法。爲了統計項目中 webpack 各包的有效使用狀況，在 fork webpack-visualizer 的基礎上對代碼升級了一番，項目地址。效果以下：

插件核心代碼正是基於上文提到的 emit 鉤子，以及 compiler 和 compilation 對象。代碼以下：

class AnalyzeWebpackPlugin {
  constructor(opts = { filename: 'analyze.html' }) {
    this.opts = opts
  }

  apply(compiler) {
    const self = this
    compiler.plugin("emit", function (compilation, callback) {
      let stats = compilation.getStats().toJson({ chunkModules: true }) // 獲取各個模塊的狀態
      let stringifiedStats = JSON.stringify(stats)
      // 服務端渲染
      let html = `<!doctype html> <meta charset="UTF-8"> <title>AnalyzeWebpackPlugin</title> <style>${cssString}</style> <div id="App"></div> <script>window.stats = ${stringifiedStats};</script> <script>${jsString}</script> `
      compilation.assets[`${self.opts.filename}`] = { // 生成文件路徑
        source: () => html,
        size: () => html.length
      }
      callback()
    })
  }
}
複製代碼

參考資料

看清楚真正的 Webpack 插件

webpack 官網