Rsbuild 项目中的 Rspack 配置指南-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_01068/article/details/148862202

Rsbuild 项目中的 Rspack 配置指南

rsbuild Unleash the power of Rspack with the out-of-the-box build tool. 项目地址: https://gitcode.com/gh_mirrors/rs/rsbuild

前言

在现代前端构建工具中，Rspack 作为一款基于 Rust 的高性能打包工具，因其出色的构建速度而备受关注。Rsbuild 作为上层构建工具，深度集成了 Rspack 并提供了灵活的配置方式。本文将详细介绍如何在 Rsbuild 项目中配置 Rspack，帮助开发者充分利用 Rspack 的强大功能。

Rspack 配置基础

Rsbuild 提供了两种主要的 Rspack 配置方式：

直接修改配置对象：通过 tools.rspack 选项直接修改 Rspack 配置对象
链式配置：通过 rspack-chain 以链式调用的方式修改配置

直接修改配置对象

这是最直接的配置方式，适合简单的配置修改：

export default {
  tools: {
    rspack: {
      plugins: [new SomeWebpackPlugin()],
    },
  },
};

或者使用函数形式，根据环境动态修改配置：

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

链式配置 (rspack-chain)

链式配置提供了更结构化和可维护的配置方式，特别适合复杂的配置场景：

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

Rspack API 访问

Rsbuild 内置了 Rspack 的核心 API，开发者可以直接从 @rsbuild/core 导入使用，无需额外安装 @rspack/core：

import { rspack } from '@rsbuild/core';

export default {
  tools: {
    rspack: {
      plugins: [new rspack.BannerPlugin({ /* 配置项 */ })],
    },
  },
};

链式配置深入解析

配置 ID 系统

Rsbuild 通过 CHAIN_ID 对象提供了内置规则的标识符，使得修改特定配置变得简单：

export default {
  tools: {
    bundlerChain: (chain, { CHAIN_ID }) => {
      // 删除内置的 CSS 规则
      chain.module.rules.delete(CHAIN_ID.RULE.CSS);
    },
  },
};

CHAIN_ID 包含以下几种类型：

| 类型 | 对应配置项 | 描述 | |-------------------|---------------------------|--------------------------| | CHAIN_ID.PLUGIN | plugins[i] | 对应 Rspack 插件 | | CHAIN_ID.RULE | module.rules[i] | 对应模块规则 | | CHAIN_ID.USE | module.rules[i].loader | 对应加载器 | | CHAIN_ID.MINIMIZER | optimization.minimizer | 对应代码压缩工具 |

加载器配置示例

添加自定义加载器

export default {
  tools: {
    bundlerChain: (chain) => {
      chain.module
        .rule('md')
        .test(/\.md$/)
        .use('md-loader')
        .loader('md-loader');
    },
  },
};

修改内置加载器

export default {
  tools: {
    bundlerChain: (chain, { CHAIN_ID }) => {
      chain.module
        .rule(CHAIN_ID.RULE.JS)
        .use(CHAIN_ID.USE.SWC)
        .tap((options) => {
          // 修改 SWC 加载器选项
          return options;
        });
    },
  },
};

调整加载器执行顺序

export default {
  tools: {
    bundlerChain: (chain, { CHAIN_ID }) => {
      chain.module
        .rule(CHAIN_ID.RULE.JS)
        .use('my-loader')
        .before(CHAIN_ID.USE.SWC) // 在 SWC 之前执行
        .loader('my-loader');
    },
  },
};

插件配置示例

添加自定义插件

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

修改内置插件

export default {
  tools: {
    bundlerChain: (chain, { CHAIN_ID }) => {
      chain.plugin(CHAIN_ID.PLUGIN.HMR)
        .tap((options) => {
          options[0].fullBuildTimeout = 200;
          return options;
        });
    },
  },
};

环境感知配置

Rsbuild 提供了丰富的环境标识，支持根据不同环境进行差异化配置：

export default {
  tools: {
    bundlerChain: (chain, { env, isProd, target, isServer, isWebWorker }) => {
      if (isProd) {
        // 生产环境特有配置
      }
      if (target === 'node') {
        // Node.js 环境特有配置
      }
    },
  },
};