plugin

Webpack 通過 Plugin 機制讓其更加靈活，以適應各種應用場景。 在 Webpack 運行的生命周期中會廣播出許多事件，Plugin 可以監聽這些事件，在合適的時機通過 Webpack 提供的 API 改變輸出結果。

Plugin示例代碼：通過 compiler.plugin(事件名稱, 回調函數) 監聽到 Webpack 廣播出來的事件。 並且可以通過 compiler 對象去操作 Webpack

class BasicPlugin{
  // 在構造函數中獲取用戶給該插件傳入的配置
  constructor(options){
  }
  
  // Webpack 會調用 BasicPlugin 實例的 apply 方法給插件實例傳入 compiler 對象
  apply(compiler){
    compiler.plugin('compilation',function(compilation) {
    })
  }
}

// 導出 Plugin
module.exports = BasicPlugin;

在webpack上使用編寫的plugin代碼

const BasicPlugin = require('./BasicPlugin.js');
module.export = {
  plugins:[
    new BasicPlugin(options),
  ]
}

　　

plugin也可以給其他plugin廣播事件

/**
* 廣播出事件
* event-name 為事件名稱，注意不要和現有的事件重名
* params 為附帶的參數
*/
compiler.apply('event-name',params);

/**
* 監聽名稱為 event-name 的事件，當 event-name 事件發生時，函數就會被執行。
* 同時函數中的 params 參數為廣播事件時附帶的參數。
*/
compiler.plugin('event-name',function(params) {
  
});