webpack插件

Posted 2020-12-12 mycode1990

如何写插件

插件向第三方开发人员展示了Webpack引擎的全部潜力。使用分阶段的构建回调，开发人员可以将自己的行为引入Webpack的构建过程。构建插件比构建加载器要先进一些，因为您需要了解一些Webpack低级内部组件才能将其连接。准备阅读一些源代码！

编译器和编译

compiler和compilation对象是开发插件时最重要的两个资源。了解他们的角色是扩展Webpack引擎的重要的第一步。

• 该compiler对象表示完全配置的Webpack环境。该对象在启动Webpack时立即构建，并配置了所有操作设置，包括选项，加载程序和插件。将插件应用于Webpack环境时，该插件将收到对此编译器的引用。使用编译器访问主要的Webpack环境。

• 一个compilation对象表示版本资产的一个版本。在运行Webpack开发中间件时，每次检测到文件更改都会创建一个新的编译，从而生成一组新的编译资产。编译会显示有关模块资源，已编译资产，已更改文件和已监视依赖项的当前状态的信息。编译还提供了许多回调点，插件可以在这些回调点选择执行自定义操作。

这两个组件是任何Webpack插件（尤其是compilation）不可或缺的一部分，因此开发人员通过熟悉以下源文件将受益匪浅：

• 编译器来源
• 编译源

基本的插件架构

插件是apply在其原型上具有方法的可实例化对象。apply安装插件时，Webpack编译器将一次调用此方法。该apply方法是考虑到底层的WebPack编译器，它允许访问编译器回调的参考。一个简单的插件的结构如下：

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;

然后要安装插件，只需在Webpack配置plugins数组中包含一个实例：

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

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

访问编译

使用编译器对象，您可以绑定提供对每个新编译的引用的回调。这些编译提供了回调，供您挂入构建过程中的多个步骤。

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;

欲了解更多关于什么回调，上compiler，compilation和其他重要的对象，请参阅[[插件API |插件]文档。

异步编译插件

一些编译插件步骤是异步的，并传递一个回调函数，当您的插件完成运行时，必须调用该回调函数。

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编译器和每个单独的编译中，对于我们可以使用引擎本身进行处理的可能性就变得无穷无尽。我们可以重新格式化现有文件，创建派生文件或构造全新资产。

让我们编写一个简单的示例插件，该插件生成一个名为的新构建文件filelist.md。其内容将列出我们构建中的所有资产文件。这个插件可能看起来像这样：

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;