Plugins#

• Type:

type Falsy = false | '' | 0 | null | undefined;

type Plugin =
  | RspackPluginInstance
  | RspackPluginFunction
  | WebpackPluginInstance
  | WebpackPluginFunction
  | Falsy;

type Plugins = Plugin[];

• Default: []

The plugins option is used to register a set of Rspack or webpack plugins to customize the build process.

Please refer to Plugins page for more information on using plugins in Rspack.

Built-in plugins#

Rspack comes with a variety built-in plugins available under rspack.PluginName.

For example, DefinePlugin allows you to replaces variables in your code with other values or expressions at compile time. You can access it via rspack.DefinePlugin and create a plugin instance with new:

const { rspack } = require('@rspack/core');

module.exports = {
  //...
  plugins: [
    new rspack.DefinePlugin({
      // pass plugin options
    }),
  ],
};

webpack plugins#

Rspack strives to maintain compatibility with the webpack plugin ecosystem to leverage the excellent features that have been accumulated and validated by the community. Please refer to the Plugin Compatibility List to access a list of webpack plugins that have passed our compatibility tests:

const { rspack } = require('@rspack/core');
const HtmlWebpackPlugin = require('html-webpack-plugin');

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

Disable plugins#

Rspack ignores false、''、0、null 和 undefined values in the plugins array, which allows you to easily disable a plugin.

For example, enable HotModuleReplacementPlugin only in the development environment:

const { rspack } = require('@rspack/core');
const isDev = process.env.NODE_ENV === 'development';

module.exports = {
  plugins: [isDev && new rspack.HotModuleReplacementPlugin()],
};