plugins

Used to register Rsbuild plugins.

Async plugin (promise) in the plugins array will be resolved, and falsy values will be ignored.

  • Type:
type Falsy = false | null | undefined;

type RsbuildPlugins = (
  | RsbuildPlugin
  | Falsy
  | Promise<RsbuildPlugin | Falsy>
)[];
  • Default: undefined

Please check out the Plugin List page to discover all available plugins.

Example

For example, register the Stylus plugin in Rsbuild.

  • Installing the plugin:
npm
yarn
pnpm
bun
npm add @rsbuild/plugin-stylus -D
  • Registering the plugin:
rsbuild.config.ts
import { defineConfig } from '@rsbuild/core';
import { pluginStylus } from '@rsbuild/plugin-stylus';

export default defineConfig({
  plugins: [pluginStylus()],
});

Execution Order

By default, plugins are executed in the order they appear in the plugins array. Built-in Rsbuild plugins are executed before user-registered plugins.

When a plugin internally uses fields that control the order, such as pre and post, the execution order is adjusted based on them. See Pre Plugins for more details.

Local Plugins

If your local code repository contains Rsbuild plugins, you can directly import them using relative paths.

rsbuild.config.ts
import { defineConfig } from '@rsbuild/core';
import { pluginCustom } from './plugins/pluginCustom';

export default defineConfig({
  plugins: [pluginCustom()],
});

Plugin Options

If a plugin provides custom options, you can pass the configurations through the plugin function's parameters.

rsbuild.config.ts
import { defineConfig } from '@rsbuild/core';
import { pluginStylus } from '@rsbuild/plugin-stylus';

export default defineConfig({
  plugins: [
    pluginStylus({
      stylusOptions: {
        lineNumbers: false,
      },
    }),
  ],
});

Rspack Plugins

The plugins option is used to register Rsbuild plugins. If you need to register Rspack or Webpack plugins, please use tools.rspack.

rsbuild.config.ts
export default {
  // Rsbuild Plugins
  plugins: [pluginStylus()],
  tools: {
    rspack: {
      // Rspack or Webpack Plugins
      plugins: [new SomeWebpackPlugin()],
    },
  },
};