2.webpack 插件機制

這是我參與8月更文挑戰的第2天，活動詳情查看：8月更文挑戰

webpack 插件機制

webpack 插件是一個具備 apply 方法的 JavaScript 對象。apply 屬性會被 webpack compiler 調用，而且 compiler 對象可在整個編譯生命週期訪問。

特色

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
複製代碼

compiler 對象

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

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

• webpack.js.org/api/compile…

事件鉤子	觸發時機	獲得的內容	類型
entry-option	初始化 option	-	同步
run	開始編譯	compiler	異步
compile	真正開始的編譯，在建立 compilation 對象以前	compilation 參數	同步
compilation	生成好了 compilation 對象，能夠操做這個對象啦	compilation	同步
make	從 entry 開始遞歸分析依賴，準備對每一個模塊進行 build	compilation	並行
after-compile	編譯 build 過程結束	compliation	異步
emit	在將內存中 assets 內容寫到磁盤文件夾以前	compilation	異步
after-emit	在將內存中 assets 內容寫到磁盤文件夾以後	compilation	異步
done	完成全部的編譯過程	stats	同步
failed	編譯失敗的時候	error	同步

compilation 對象

compilation 對象表明了一次單一的版本構建和生成資源。

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

compilation 對象能夠訪問全部的模塊和它們的依賴（大部分是循環依賴）。在編譯階段，模塊被 加載，封閉，優化，分塊，哈希 和 重建 等等，這將是編譯中任何操做主要的生命週期。

• webpack.js.org/api/compila…

• normal-module-loader

普通模塊 loader，真實地一個一個加載模塊圖(分析以後的全部模塊一種數據結構)中全部的模塊的函數。

模塊，就是一般所說的 AMD, CMD 等模塊化的模塊。

• seal

編譯的封閉已經開始，這個時候再也收不到任何的模塊了，進入編譯封閉階段。

• optimize

優化編譯，這個事件鉤子特別重要，不少插件的優化工做都是基於這個事件鉤子，表示 webpack 已經進入優化階段

• optimize-modules

模塊的優化

• optimize-chunks

webpack 的 chunk 優化階段。能夠拿到模塊的依賴，loader 等，並進行相應的處理。

• additional-assets

這是一個異步的事件鉤子，在這個階段能夠爲 compilation 對象建立額外的 assets，也就是說能夠異步的在最後的產物中加入本身自定義的一些資源

• optimize-chunk-assets

優化 chunk 的 assets 的事件鉤子，這個優化階段能夠改變 chunk 的 assets 以達到從新改變資源內容的目的。assets 被存儲在 this.assets 中，可是它們並不都是 chunk 的 assets。一個 chunk 有一個 files 屬性指出這個 chunk 建立的全部文件。附加的 assets 被存儲在 this.additionalChunkAssets 中

• optimize-assets

優化全部的 assets 的異步事件鉤子，在這個階段能夠直接經過 this.assets 拿到全部的 assets，並進行自定義操做。相似 optimize-chunk-assets，可是這個事件鉤子的回調是拿不到 chunks 的

webpack 插件示例：

// MyPlugin.js  
function MyPlugin(options) {     
  // Configure your plugin with options... 
}  
MyPlugin.prototype.apply = function (compiler) {     
  compiler.plugin('compile', function (params) {         
    console.log('The compiler is starting to compile...');     
  });      
  compiler.plugin('compilation', function (compilation) {         
    console.log('The compiler is starting a new compilation...');   
    compilation.plugin('optimize', function () {             
      console.log('The compilation is starting to optimize files...');         
    });     
  });      
  // 異步的事件鉤子     
  compiler.plugin('emit', function (compilation, callback) {         
    console.log('The compilation is going to emit files...');         
    callback();     
  }); 
};  
module.exports = MyPlugin;
複製代碼

僅供學習參考

參考

• webpack-plugin
• 全面的Webpack教程《深刻淺出Webpack》電子書
• 探尋 webpack 插件機制
• 看清楚真正的 Webpack 插件
• 如何寫一個webpack插件（一）
• 《深刻淺出Webpack》:5-4 編寫 Plugin