Plugins#

If loaders are the workhorse for file transformations (preprocessing), 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
    }),
  ],
};

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
    }),
  ],
};

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

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