tools.bundlerChain#

• 类型：

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

• 默认值： undefined

rspack-chain 是一个用于配置 Rspack 的工具库。它提供了链式 API，使得配置 Rspack 变得更加灵活。通过使用 rspack-chain，你可以更方便地修改和扩展 Rspack 配置，而不需要直接操作复杂的配置对象。

你可以通过 tools.bundlerChain 来调用 rspack-chain 以修改默认的 Rspack 配置，它的值是一个函数，接收两个参数：

• 第一个参数为 rspack-chain 实例，你可以通过它来修改 Rspack 配置。
• 第二个参数为一个工具对象，包括 env、isProd、CHAIN_ID 等。

tools.bundlerChain 会早于 tools.rspack 被执行，因此会被 tools.rspack 覆盖。

示例#

参考：RspackChain 示例。

工具对象#

env#

• 类型： 'development' | 'production' | 'test'

通过 env 参数可以判断当前环境为 development、production 还是 test，比如：

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

isDev#

• 类型： boolean

用于判断当前是否为开发环境构建，比如：

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

isProd#

• 类型： boolean

用于判断当前是否为生产环境构建，比如：

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

target#

• 类型： 'web' | 'node' | 'web-worker' | 'service-worker'

通过 target 参数可以判断构建的目标运行时环境。比如：

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

isServer#

• 类型： boolean

判断当前构建的目标运行时环境是否为 node，等价于 target === 'node'。

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

isWebWorker#

• 类型： boolean

判断当前构建的目标运行时环境是否为 web-worker，等价于 target === 'web-worker'。

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

HtmlPlugin#

• 类型： typeof import('html-webpack-plugin')

通过这个参数你可以拿到 html-webpack-plugin 插件的实例。

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

CHAIN_ID#

Rsbuild 中预先定义了一些常用的 Chain ID，你可以通过这些 ID 来定位到内置的 Rule 或 Plugin。

CHAIN_ID.RULE#

CHAIN_ID.ONE_OF#

通过 ONE_OF.[ID] 可以匹配到规则数组中的某一类规则。

CHAIN_ID.USE#

通过 USE.[ID] 可以匹配到对应的 loader。

CHAIN_ID.PLUGIN#

通过 PLUGIN.[ID] 可以匹配到特定的 Rspack 或 Webpack plugin。

CHAIN_ID.MINIMIZER#

通过 MINIMIZER.[ID] 可以匹配到对应的压缩工具。