This div is used to preload the font
Guide
Config
Plugin
API
Community
Guide
Config
Plugin
API
Community

bundlerChain

  • Type:
type BundlerChainFn = (
  chain: BundlerChain,
  utils: ModifyBundlerChainUtils,
) => void;
  • 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');
      }
    },
  },
};

isDev

  • Type: boolean

Used to determine whether the current build is a development build, such as:

export default {
  tools: {
    bundlerChain: (config, { isDev }) => {
      if (isDev) {
        config.devtool = 'eval-cheap-source-map';
      }
      return config;
    },
  },
};

isProd

  • Type: boolean

Used to determine whether the current build is a production build, such as:

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.JS Rule for js and ts
RULE.SVG Rule for svg
RULE.CSS Rule for css
RULE.LESS Rule for less
RULE.SASS Rule for sass
RULE.YAML Rule for yaml
RULE.WASM Rule for WASM
RULE.NODE Rule for node
RULE.FONT Rule for font
RULE.IMAGE Rule for image
RULE.MEDIA Rule for media
RULE.VUE Rule for vue (requires Vue plugin)
RULE.PUG Rule for pug (requires Pug plugin)
RULE.TOML Rule for toml (requires Toml plugin)
RULE.SVELTE Rule for svelte (requires Svelte plugin)
RULE.STYLUS Rule for stylus (requires Stylus plugin)

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.SWC correspond to swc-loader
USE.LESS correspond to less-loader
USE.SASS correspond to sass-loader
USE.YAML correspond to yaml-loader
USE.NODE correspond to node-loader
USE.STYLE correspond to style-loader
USE.POSTCSS correspond to postcss-loader
USE.RESOLVE_URL correspond to resolve-url-loader
USE.VUE correspond to vue-loader (requires Vue plugin)
USE.SVGR correspond to svgr-loader (requires Svgr plugin)
USE.TOML correspond to toml-loader (requires Toml plugin)
USE.BABEL correspond to babel-loader (requires Babel plugin)
USE.SVELTE correspond to svelte-loader (requires Svelte plugin)
USE.STYLUS correspond to stylus-loader (requires Stylus plugin)

CHAIN_ID.PLUGIN

PLUGIN.XXX can match a certain Rspack or Webpack plugin.

ID Description
PLUGIN.HTML correspond to HtmlPlugin, you need to concat the entry name when using: ${PLUGIN.HTML}-${entryName}
PLUGIN.APP_ICON correspond to AppIconPlugin
PLUGIN.INLINE_HTML correspond to InlineChunkHtmlPlugin
PLUGIN.ASSETS_RETRY correspond to AssetsRetryPlugin
PLUGIN.BUNDLE_ANALYZER correspond to WebpackBundleAnalyzer
PLUGIN.VUE_LOADER_PLUGIN correspond to VueLoaderPlugin
PLUGIN.AUTO_SET_ROOT_SIZE correspond to AutoSetRootSizePlugin

CHAIN_ID.MINIMIZER

MINIMIZER.XXX can match a certain minimizer.

ID Description
MINIMIZER.JS correspond to SwcJsMinimizerRspackPlugin
MINIMIZER.CSS correspond to SwcCssMinimizerRspackPlugin

Examples

For usage examples, please refer to: BundlerChain examples.