指南
配置
插件
API
社区
指南
配置
插件
API
社区
简体中文

tools.bundlerChain

  • 类型：
type BundlerChainFn = (
  chain: BundlerChain,
  utils: ModifyBundlerChainUtils,
) => void;
  • 默认值： undefined

你可以通过 tools.bundlerChain 来修改默认的 Rspack 和 webpack 配置，它的值为 Function 类型，接收两个参数：

  • 第一个参数为 bundler-chain 对象实例，你可以通过这个实例来修改 Rspack 和 webpack 的配置。
  • 第二个参数为一个工具集合，包括env、isProd、CHAIN_ID 等。
什么是 BundlerChain

Bundler chain 是 webpack chain 的子集，其中包含一部分 webpack chain API，你可以用它来同时修改 Rspack 和 webpack 的配置。

通过 bundler chain 修改的配置，在 Rspack 和 webpack 构建时均可生效。需要注意的是，bundler chain 只支持修改 Rspack 和 webpack 间无差异部分的配置。如，修改 devtool 配置项（Rspack 和 webpack 的 devtool 属性值类型相同），或添加一个Rspack 兼容的 webpack 插件。

tools.bundlerChain 的执行时机早于 tools.rspack，因此会被其他配置中的修改所覆盖。

工具集合

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。

TIP

请留意，下列的一部分 Rule 或 Plugin 并不是默认存在的，当你开启特定配置项、或是注册某些插件后，它们才会被包含在 Rspack 或 webpack 配置中。

比如，RULE.STYLUS 仅在注册了 Stylus 插件后才会存在。

CHAIN_ID.RULE

ID 描述
RULE.JS 处理 js 和 ts 的规则
RULE.SVG 处理 svg 的规则
RULE.CSS 处理 css 的规则
RULE.LESS 处理 less 的规则
RULE.SASS 处理 sass 的规则
RULE.YAML 处理 yaml 的规则
RULE.WASM 处理 wasm 的规则
RULE.NODE 处理 node 的规则
RULE.FONT 处理 font 的规则
RULE.IMAGE 处理 image 的规则
RULE.MEDIA 处理 media 的规则
RULE.VUE 处理 vue 的规则（依赖 Vue 插件）
RULE.SVELTE 处理 svelte 的规则（依赖 Svelte 插件）
RULE.STYLUS 处理 stylus 的规则（依赖 Stylus 插件）

CHAIN_ID.ONE_OF

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

ID 描述
ONE_OF.SVG_URL 处理 SVG 的规则，输出为单独文件
ONE_OF.SVG_INLINE 处理 SVG 的规则，作为 data URI 内联到 bundle 中
ONE_OF.SVG_ASSETS 处理 SVG 的规则，在 data URI 和单独文件之间自动选择

CHAIN_ID.USE

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

ID 描述
USE.SWC 对应 swc-loader
USE.LESS 对应 less-loader
USE.SASS 对应 sass-loader
USE.YAML 对应 yaml-loader
USE.NODE 对应 node-loader
USE.STYLE 对应 style-loader
USE.POSTCSS 对应 postcss-loader
USE.RESOLVE_URL 对应 resolve-url-loader
USE.VUE 对应 vue-loader（依赖 Vue 插件）
USE.SVGR 对应 svgr-loader（依赖 Svgr 插件）
USE.BABEL 对应 babel-loader（依赖 Babel 插件）
USE.SVELTE 对应 svelte-loader （依赖 Svelte 插件）
USE.STYLUS 对应 stylus-loader （依赖 Stylus 插件）

CHAIN_ID.PLUGIN

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

ID 描述
PLUGIN.HTML 对应 HtmlPlugin，使用时需要拼接 entry 名称：${PLUGIN.HTML}-${entryName}
PLUGIN.APP_ICON 对应 AppIconPlugin
PLUGIN.INLINE_HTML 对应 InlineChunkHtmlPlugin
PLUGIN.ASSETS_RETRY 对应 AssetsRetryPlugin
PLUGIN.BUNDLE_ANALYZER 对应 WebpackBundleAnalyzer
PLUGIN.VUE_LOADER_PLUGIN 对应 VueLoaderPlugin
PLUGIN.AUTO_SET_ROOT_SIZE 对应 AutoSetRootSizePlugin

CHAIN_ID.MINIMIZER

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

ID 描述
MINIMIZER.JS 对应 SwcJsMinimizerRspackPlugin
MINIMIZER.CSS 对应 SwcCssMinimizerRspackPlugin

使用示例

使用示例可参考：BundlerChain 示例。