#Plugins

If loaders are the workhorse for file transformations, then plugins are the workhorse for the overall Rspack build process. Most of Rspack's native implementations rely on the Rust side of the plugin system.

For Node.js users, you don't need to worry about interoperability issues with Node.js and Rust, because Rspack takes care of those details for you automatically. You can just focus on how to use the plugins.

#Plugin usage

Rspack provides the plugins configuration, which is used to register a set of Rspack or webpack plugins to customize the build process.

Here is an example of using the webpack-bundle-analyzer in Rspack configuration:

import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';

export default {
  plugins: [
    new BundleAnalyzerPlugin({
      // options
    }),
  ],
};

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

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

If you're looking for more Rspack plugins, have a look at the great list of supported plugins.

You can also refer to Plugin compat for the list of webpack plugins that have passed Rspack compatibility tests.

#Other plugins

#Unplugin

unplugin is a unified plugin system for various build tools. You can use plugins implemented based on unplugin in Rspack, typically by importing the /rspack subpath of the plugin and registering it through plugins.

Here is an example of using unplugin-vue-components:

import Components from 'unplugin-vue-components/rspack';

export default {
  plugins: [
    Components({
      // options
    }),
  ],
};

const Components = require('unplugin-vue-components/rspack');

module.exports = {
  plugins: [
    Components.default({
      // options
    }),
  ],
};

#SWC plugins

In the built-in swc-loader of Rspack, you can use SWC's Wasm plugins, see jsc.experimental.plugins.

#Rsbuild plugins

Rsbuild is a build tool based on Rspack, and Rsbuild has its own plugin system.

Please note that you cannot use Rsbuild plugins in Rspack, because Rspack is a more low-level tool, but you can use Rspack plugins in Rsbuild.

Here is a comparison table for the plugins that can be used in Rspack and Rsbuild:

Please refer to the Rsbuild plugin documentation for more information.

#Write a plugin

#Plugin structure

As a plugin author, the structure of a plugin is very simple: just implement an apply method that accepts a Compiler instance. It will be called when the Rspack plugin is initialized. The detailed API can be found in the Plugin API.

const PLUGIN_NAME = 'MyPlugin';

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

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;

#Write with TypeScript

If you use TypeScript to write Rspack plugins, you can import Compiler and RspackPluginInstance to declare the types of your plugins:

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

const PLUGIN_NAME = 'MyPlugin';

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