#tools.bundlerChain

• Type:

type BundlerChainFn = (
  chain: RspackChain,
  utils: ModifyBundlerChainUtils,
) => Promise<void> | void;

• Default: undefined

rspack-chain is a utility library for configuring Rspack. It provides a chaining API, making the configuration of Rspack more flexible. By using rspack-chain, you can more easily modify and extend Rspack configurations without directly manipulating the complex configuration object.

You can use rspack-chain to modify the default Rspack config through tools.bundlerChain. Its value is a function that takes two arguments:

• The first argument is a rspack-chain instance, which you can use to modify the Rspack config.
• The second argument is an utils object, including env, isProd, CHAIN_ID, etc.

tools.bundlerChain will be executed earlier than tools.rspack, so it will be overridden by tools.rspack.

#Examples

Please refer to: RspackChain examples.

#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'

The target parameter can be used to determine the build target 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) {
        // ...
      }
    },
  },
};

#rspack

• Type: Rspack

The Rspack instance. For example:

export default {
  tools: {
    bundlerChain: (chain, { rspack }) => {
      chain.plugin('extra-define').use(rspack.DefinePlugin, [
        {
          'process.env': {
            NODE_ENV: JSON.stringify(process.env.NODE_ENV),
          },
        },
      ]);
    },
  },
};

#HtmlPlugin

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

The default export of html-rspack-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.

#CHAIN_ID.RULE

#CHAIN_ID.ONE_OF

ONE_OF.[ID] can match a certain type of rule in the rule array.

#CHAIN_ID.USE

USE.[ID] can match a certain loader.

#CHAIN_ID.PLUGIN

PLUGIN.[ID] can match a certain Rspack or webpack plugin.

#CHAIN_ID.MINIMIZER

MINIMIZER.[ID] can match a certain minimizer.