插件#

如果加载器 是文件转换（预处理）的“主力”，那么插件则是 Rspack 构建过程的“主力”。Rspack 的大多数原生实现都依赖于插件系统的 Rust 端。对于 Node 用户来说，您无需担心与 Rust 的兼容性问题，因为 Rspack 会自动为您处理这些细节。您只需要专注于如何使用插件。了解一下您可以使用 Rspack 的插件。

插件使用#

以下是如何在 rspack.config.js 中使用已兼容的webpack-bundle-analyzer 的示例

const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');

module.exports = {
  plugins: [new BundleAnalyzerPlugin()],
};

如果您正在寻找更多 Rspack 插件，请查看支持的插件 的列表。

您还可以参考插件兼容性，以查看已通过 Rspack 兼容性测试的 webpack 插件列表。

编写插件#

插件结构#

作为插件作者，插件的结构非常简单：只需实现一个接受 Compiler 实例的 apply 方法。当 Rspack 插件初始化时，它将被调用。详细的 API 可以参考插件 API。

const PLUGIN_NAME = 'MyPlugin';

class MyPlugin {
  apply(compiler) {
    compiler.hooks.compilation.tap(PLUGIN_NAME, compilation => {
      console.log('The Rspack build process is starting!');
    });
  }
}

module.exports = MyPlugin;

我们使用 CommonJS 风格的模块导出，这样插件可以直接使用 require 在 rspack.config.js 中导入。

使用 TypeScript 编写#

如果您使用 TypeScript 编写 Rspack 插件，可以导入 Compiler 和 RspackPluginInstance 来声明您的插件类型

import type { Compiler, RspackPluginInstance } from '@rspack/core';

const PLUGIN_NAME = 'MyPlugin';

class MyPlugin implements RspackPluginInstance {
  apply(compiler: Compiler) {
    compiler.hooks.compilation.tap(PLUGIN_NAME, compilation => {
      console.log('The Rspack build process is starting!');
    });
  }
}