摘要：原文譯者插件能夠?qū)⒁娴娜繚摿Ρ┞督o第三方的開發(fā)者。當(dāng)將一個(gè)插件應(yīng)用到環(huán)境中，這個(gè)插件將會(huì)獲得一個(gè)對(duì)于這個(gè)的引用。表示有關(guān)模塊資源，已編譯資源，已更改文件和監(jiān)視依賴關(guān)系的當(dāng)前狀態(tài)的信息。

原文：how to write a plugin
譯者：neal1991
welcome to star my articles-translator , providing you advanced articles translation. Any suggestion, please issue or contact me
LICENSE: MIT

插件能夠?qū)ebpack引擎的全部潛力暴露給第三方的開發(fā)者。通過使用階段構(gòu)建回調(diào)，開發(fā)者能夠?qū)⑺麄冏约旱男袨橐氲絯ebpack的構(gòu)建過程中。構(gòu)建插件比構(gòu)建loader更高級(jí)，因?yàn)槟阈枰斫庖恍﹚ebpack低層次的內(nèi)部鉤子。準(zhǔn)備好閱讀一些源代碼吧!

在開發(fā)插件的時(shí)候最重要的兩個(gè)資源就是compiler和compilation對(duì)象。理解它們的角色是拓展webpack引擎重要的第一步。

compiler對(duì)象代表了完整的配置的webpack環(huán)境。一旦開啟webpack之后，這個(gè)對(duì)象就被構(gòu)建了，并且這個(gè)對(duì)象會(huì)使用所有操作設(shè)置，包括options, loaders, 以及plugins來進(jìn)行配置。當(dāng)將一個(gè)插件應(yīng)用到webpack環(huán)境中，這個(gè)插件將會(huì)獲得一個(gè)對(duì)于這個(gè)compiler的引用。使用這個(gè)compiler可以訪問主要的webpack環(huán)境。

一個(gè)compilation對(duì)象代表版本資源的一次構(gòu)建。當(dāng)運(yùn)行webpack開發(fā)中間件的時(shí)候，每次檢測(cè)到文件變化的時(shí)候都會(huì)產(chǎn)生一個(gè)新的compilation，因此會(huì)生成一系列編譯后的資源。Compilation表示有關(guān)模塊資源，已編譯資源，已更改文件和監(jiān)視依賴關(guān)系的當(dāng)前狀態(tài)的信息。該compilation還提供了許多回調(diào)點(diǎn)，插件可以選擇執(zhí)行自定義操作。

這兩個(gè)組件是任何webpack插件（特別是compilation）的內(nèi)部一部分，因此開發(fā)者熟悉這些源代碼文件之后將會(huì)受益非凡：

Compiler Source

Compilation Source

插件是實(shí)例對(duì)象，并且在它們的prototype上，會(huì)有一個(gè)apply方法。當(dāng)安裝這個(gè)插件的時(shí)候，這個(gè)apply方法就會(huì)被webpack compiler調(diào)用。這個(gè)apply會(huì)給出一個(gè)對(duì)于潛在的webpack compiler的引用，保證了對(duì)于compiler回調(diào)的訪問。一個(gè)簡(jiǎn)單的插件結(jié)構(gòu)如下：

function HelloWorldPlugin(options) {
  // Setup the plugin instance with options...
}

HelloWorldPlugin.prototype.apply = function(compiler) {
  compiler.plugin("done", function() {
    console.log("Hello World!"); 
  });
};

module.exports = HelloWorldPlugin;

接著是安裝這個(gè)插件，只要在你的webpack 配置plugins數(shù)組里面添加一個(gè)實(shí)例：

var HelloWorldPlugin = require("hello-world");

var webpackConfig = {
  // ... config settings here ...
  plugins: [
    new HelloWorldPlugin({options: true})
  ]
};

使用compiler對(duì)象，你可能綁定提供那個(gè)對(duì)于每一個(gè)新的compilation引用的回調(diào)。這些compilation提供對(duì)于在構(gòu)建過程中對(duì)于很多步驟鉤子的回調(diào)。

function HelloCompilationPlugin(options) {}

HelloCompilationPlugin.prototype.apply = function(compiler) {

  // Setup callback for accessing a compilation:
  compiler.plugin("compilation", function(compilation) {
    
    // Now setup callbacks for accessing compilation steps:
    compilation.plugin("optimize", function() {
      console.log("Assets are being optimized.");
    });
  });
};

module.exports = HelloCompilationPlugin;

對(duì)于更多關(guān)于compiler以及compilation上的回調(diào)以及其他重要的對(duì)象，請(qǐng)參考 [[plugins API|plugins]] 文檔。

有一些compilation插件步驟是異步的，并且當(dāng)你的插件完成運(yùn)行的時(shí)候，傳遞一個(gè)必須被調(diào)用的回調(diào)函數(shù)。

function HelloAsyncPlugin(options) {}

HelloAsyncPlugin.prototype.apply = function(compiler) {
  compiler.plugin("emit", function(compilation, callback) {

    // Do something async...
    setTimeout(function() {
      console.log("Done with async work...");
      callback();
    }, 1000);

  });
};

module.exports = HelloAsyncPlugin;

一旦我們可以鎖定到webpack compiler以及每一個(gè)獨(dú)立的compilation，我們可以利用引擎本身就能發(fā)揮無窮的潛力。我們能夠重新格式化存在的文件，創(chuàng)建衍生文件，或者制造全新的資源。

讓我們寫一個(gè)簡(jiǎn)單的能夠生成一個(gè)新的打包文件filelist.md的插件例子；這個(gè)文件的內(nèi)容會(huì)列出所有存在我們build之內(nèi)的資源文件。這個(gè)插件可能看起來是這個(gè)樣子的：

function FileListPlugin(options) {}

FileListPlugin.prototype.apply = function(compiler) {
  compiler.plugin("emit", function(compilation, callback) {
    // Create a header string for the generated file:
    var filelist = "In this build:

";

    // Loop through all compiled assets,
    // adding a new line item for each filename.
    for (var filename in compilation.assets) {
      filelist += ("- "+ filename +"
");
    }
    
    // Insert this list into the Webpack build as a new file asset:
    compilation.assets["filelist.md"] = {
      source: function() {
        return filelist;
      },
      size: function() {
        return filelist.length;
      }
    };

    callback();
  });
};

module.exports = FileListPlugin;

插件允許在webpack構(gòu)建系統(tǒng)內(nèi)發(fā)揮無盡可能的定制化。這允許你創(chuàng)建自定義的資源類型，執(zhí)行特殊的構(gòu)建調(diào)整，或者設(shè)置在使用中間件的時(shí)候進(jìn)一步提升webpack運(yùn)行時(shí)間。下面的webpack的一些特性在開發(fā)插件的時(shí)候變得很有用。

在compilation完成之后，compilation中的所有的結(jié)構(gòu)都可能被遍歷。

function MyPlugin() {}

MyPlugin.prototype.apply = function(compiler) {
  compiler.plugin("emit", function(compilation, callback) {
    
    // Explore each chunk (build output):
    compilation.chunks.forEach(function(chunk) {
      // Explore each module within the chunk (built inputs):
      chunk.modules.forEach(function(module) {
        // Explore each source file path that was included into the module:
        module.fileDependencies.forEach(function(filepath) {
          // we"ve learned a lot about the source structure now...
        });
      });

      // Explore each asset filename generated by the chunk:
      chunk.files.forEach(function(filename) {
        // Get the asset source for each file generated by the chunk:
        var source = compilation.assets[filename].source();
      });
    });

    callback();
  });
};

module.exports = MyPlugin;

compilation.modules: 在compilation中由模塊（構(gòu)建輸入）組成的數(shù)組。每個(gè)模塊管理來自于源代碼庫中的源文件的構(gòu)建。

module.fileDependencies: 包含在模塊中的源文件路徑數(shù)組。 這包括源JavaScript文件本身（例如：index.js）以及所需的所有依賴項(xiàng)資源文件（樣式表，圖像等）。 查看依賴關(guān)系對(duì)于查看哪些源文件屬于模塊很有用。

compilation.chunks: Compilation中由chunks組成的數(shù)組（構(gòu)建輸出）。 每個(gè)chunk管理最終渲染資源的組合。

chunk.modules: 包含在一個(gè)chunk中的模塊數(shù)組。 通過擴(kuò)展，您可以查看每個(gè)模塊的依賴關(guān)系，以查看傳遞到chunk中的原始源文件

chunk.files: 由chunk生成的輸出文件名的數(shù)組。 您可以從compilation.assets表訪問這些資源。

在運(yùn)行webpack中間件時(shí)，每個(gè)compilation都包含一個(gè)fileDependencies數(shù)組（正在監(jiān)視的文件）和一個(gè)將觀察文件路徑映射到時(shí)間戳的fileTimestamps哈希。 這些對(duì)于檢測(cè)compilation中哪些文件已更改非常有用：

function MyPlugin() {
  this.startTime = Date.now();
  this.prevTimestamps = {};
}

MyPlugin.prototype.apply = function(compiler) {
  compiler.plugin("emit", function(compilation, callback) {
    
    var changedFiles = Object.keys(compilation.fileTimestamps).filter(function(watchfile) {
      return (this.prevTimestamps[watchfile] || this.startTime) < (compilation.fileTimestamps[watchfile] || Infinity);
    }.bind(this));
    
    this.prevTimestamps = compilation.fileTimestamps;
    callback();
  }.bind(this));
};

module.exports = MyPlugin;

您還可以將新的文件路徑傳入觀察圖，以便在這些文件更改時(shí)接收compilation觸發(fā)器。 只需將有效的文件路徑推送到compilation.fileDependencies數(shù)組中即可將其添加到觀察列表中。 注意：在每個(gè)compilation中重建fileDependencies數(shù)組，因此您的插件必須將自己觀察的依賴項(xiàng)推送到每個(gè)編譯中，以使它們保持監(jiān)視。

與觀察圖類似，通過跟蹤它們的哈希值，可以在compilation中監(jiān)視更改的塊（或模塊）。

function MyPlugin() {
  this.chunkVersions = {};
}

MyPlugin.prototype.apply = function(compiler) {
  compiler.plugin("emit", function(compilation, callback) {
    
    var changedChunks = compilation.chunks.filter(function(chunk) {
      var oldVersion = this.chunkVersions[chunk.name];
      this.chunkVersions[chunk.name] = chunk.hash;
      return chunk.hash !== oldVersion;
    }.bind(this));
    
    callback();
  }.bind(this));
};

module.exports = MyPlugin;