外掛#

如果 loaders 是檔案轉換（預處理）的主力，那麼外掛就是整個 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 風格的模組匯出，以便外掛可以使用 rspack.config.js 中的 require 直接匯入。

使用 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!');
    });
  }
}