Guide
Config
Plugin
API
Guide
Config
Plugin
API

bundlerChain

  • Type: Function | undefined
  • Default: undefined

You can modify the Rspack and webpack configuration by configuring tools.bundlerChain which is type of Function. The function receives two parameters, the first is the original bundler chain object, and the second is an object containing some utils.

What is BundlerChain

Bundler chain is a subset of webpack chain, which contains part of the webpack chain API that you can use to modify both Rspack and webpack configuration.

Configurations modified via bundler chain will work on both Rspack and webpack builds. Note that the bundler chain only supports modifying the configuration of the non-differentiated parts of Rspack and webpack. For example, modifying the devtool configuration option (Rspack and webpack have the same devtool property value type), or adding an Rspack-compatible webpack plugin.

tools.bundlerChain is executed earlier than tools.rspack and thus will be overridden by changes in other.

Utils

env

  • Type: 'development' | 'production' | 'test'

The env parameter can be used to determine whether the current environment is development, production or test. For example:

export default {
  tools: {
    bundlerChain: (chain, { env }) => {
      if (env === 'development') {
        chain.devtool('cheap-module-eval-source-map');
      }
    },
  },
};

isProd

  • Type: boolean

The isProd parameter can be used to determine whether the current environment is production. For example:

export default {
  tools: {
    bundlerChain: (chain, { isProd }) => {
      if (isProd) {
        chain.devtool('source-map');
      }
    },
  },
};

target

  • Type: 'web' | 'node' | 'web-worker' | 'service-worker'

The target parameter can be used to determine the current environment. For example:

export default {
  tools: {
    bundlerChain: (chain, { target }) => {
      if (target === 'node') {
        // ...
      }
    },
  },
};

isServer

  • Type: boolean

Determines whether the target environment is node, equivalent to target === 'node'.

export default {
  tools: {
    bundlerChain: (chain, { isServer }) => {
      if (isServer) {
        // ...
      }
    },
  },
};

isWebWorker

  • Type: boolean

Determines whether the target environment is web-worker, equivalent to target === 'web-worker'.

export default {
  tools: {
    bundlerChain: (chain, { isWebWorker }) => {
      if (isWebWorker) {
        // ...
      }
    },
  },
};

HtmlPlugin

  • Type: typeof import('html-webpack-plugin')

The instance of html-webpack-plugin:

export default {
  tools: {
    bundlerChain: (chain, { HtmlPlugin }) => {
      console.log(HtmlPlugin);
    },
  },
};

CHAIN_ID

Some common Chain IDs are predefined in the Rsbuild, and you can use these IDs to locate the built-in Rule or Plugin.

TIP

Please note that some of the rules or plugins listed below are not available by default. They will only be included in the Rspack or webpack configuration when you enable specific options or register certain plugins.

For example, the RULE.STYLUS rule exists only when the Stylus plugin is registered.

CHAIN_ID.RULE
ID Description
RULE.MJS Rule for mjs
RULE.CSS Rule for css
RULE.LESS Rule for less
RULE.SASS Rule for sass
RULE.STYLUS Rule for stylus
RULE.TOML Rule for toml
RULE.YAML Rule for yaml
RULE.WASM Rule for WASM
RULE.NODE Rule for node

CHAIN_ID.ONE_OF

ONE_OF.XXX can match a certain type of rule in the rule array.

ID Description
ONE_OF.SVG Rules for SVG, automatic choice between data URI and separate file
ONE_OF.SVG_URL Rules for SVG, output as a separate file
ONE_OF.SVG_INLINE Rules for SVG, inlined into bundles as data URIs
ONE_OF.SVG_ASSETS Rules for SVG, automatic choice between data URI and separate file

CHAIN_ID.USE

USE.XXX can match a certain loader.

ID Description
USE.LESS correspond to less-loader
USE.SASS correspond to sass-loader
USE.STYLUS correspond to stylus-loader
USE.VUE correspond to vue-loader
USE.TOML correspond to toml-loader
USE.YAML correspond to yaml-loader
USE.NODE correspond to node-loader
USE.SVGR correspond to @svgr/webpack
USE.POSTCSS correspond to postcss-loader
USE.RESOLVE_URL_LOADER_FOR_SASS correspond to resolve-url-loader

CHAIN_ID.PLUGIN

PLUGIN.XXX can match a certain webpack plugin.

ID Description
PLUGIN.HTML correspond to HtmlPlugin, you need to splice the entry name when using: ${PLUGIN.HTML}-${entryName}
PLUGIN.APP_ICON correspond to AppIconPlugin
PLUGIN.INLINE_HTML correspond to InlineChunkHtmlPlugin
PLUGIN.BUNDLE_ANALYZER correspond to WebpackBundleAnalyzer
PLUGIN.VUE_LOADER_PLUGIN correspond to VueLoaderPlugin
PLUGIN.AUTO_SET_ROOT_SIZE correspond to automatically set root font size plugin in Rsbuild

CHAIN_ID.MINIMIZER

MINIMIZER.XXX can match a certain minimizer.

ID Description
MINIMIZER.JS correspond to TerserWebpackPlugin or SwcJsMinimizerRspackPlugin
MINIMIZER.CSS correspond to CssMinimizerWebpackPlugin

Examples

For usage examples, please refer to: BundlerChain examples.