插件接口 | Plugin API

有关编写插件的高级介绍，请先编写一个插件。

webpack中的许多对象扩展了这个Tapable类，它暴露了一个plugin方法。通过该plugin方法，插件可以注入自定义构建步骤。你会看到compiler.plugin并compilation.plugin使用了很多。实质上，这些插件调用中的每一个都会将回调绑定到整个构建过程中的特定步骤。

有两种类型的插件接口...

基于时序

• 同步（默认）：插件同步运行并返回其输出。

• async：插件异步运行并使用give callback返回其输出。

• 并行：处理程序并行调用。

返回值

• 不保释（默认）：没有返回值。

• bailing：处理程序被调用，直到一个处理程序返回一些东西。

• 并行释放：处理程序并行调用（异步）。第一个返回值（按顺序）很重要。

• 瀑布：每个处理程序获取最后一个处理程序的结果值作为参数。

一个插件在webpack启动时安装一次。webpack通过调用其apply方法来安装插件，并将引用传递给webpack compiler对象。然后您可以致电compiler.plugin访问资产编译及其各个构建步骤。一个例子看起来像这样：

my-plugin.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.config.js

plugins: [
  new MyPlugin({
    options: 'nada'
  })
]

Tapable＆Tapable实例

由于名为内部库，插件体系结构主要可用于webpack Tapable。Tapable实例是webpack源代码中的类，它们已经从类中扩展或混合Tapable。

对于插件作者，了解哪些是Tapablewebpack源代码中的实例很重要。这些实例提供了各种可以附加自定义插件的事件挂钩。因此，在本节中，所有webpack Tapable实例（及其事件挂钩）都是插件作者可以使用的列表。

有关Tapable访问完整概览或可放置存储库的更多信息。