close
logologo
指南
配置
插件
API
社区
版本
更新日志
Rsbuild 0.x 文档
English
简体中文
指南
配置
插件
API
社区
更新日志
Rsbuild 0.x 文档
English
简体中文
logologo

开始

介绍
快速上手
功能导航
名词解释

框架

React
Vue
Preact
Svelte
Solid

基础

命令行工具
开发服务器
构建产物
静态资源
HTML
JSON
Wasm
TypeScript
Web Workers
部署静态站点
升级 Rsbuild

配置

配置 Rspack
配置 Rsbuild
配置 SWC

样式

CSS
CSS Modules
CSS-in-JS
Tailwind CSS v4
Tailwind CSS v3
UnoCSS

进阶

路径别名
环境变量
模块热更新
浏览器范围
浏览器兼容性
模块联邦
多环境构建
服务端渲染(SSR)
测试

优化

代码拆分
产物体积优化
提升构建性能
静态资源内联

迁移

从 Rsbuild 0.x 迁移
webpack
Create React App
Vue CLI
Vite
Vite 插件
Modern.js Builder

调试

开启调试模式
构建性能分析
使用 Rsdoctor

常见问题

通用类问题
功能类问题
异常类问题
热更新问题
📝 在 GitHub 上编辑此页
上一页Modern.js Builder
下一页构建性能分析

#开启调试模式

为了便于排查问题,Rsbuild 提供了调试模式,你可以在执行构建时添加 DEBUG=rsbuild 环境变量来开启 Rsbuild 的调试模式。

# 调试开发模式
DEBUG=rsbuild pnpm dev

# 调试生产模式
DEBUG=rsbuild pnpm build

在调试模式下,Rsbuild 会输出一些额外的日志信息,并将内部最终生成的 Rsbuild 配置和 Rspack 配置写入到产物目录下,便于开发者查看和调试。

#日志信息

在调试模式下,你会看到 terminal 中输出了一些以 rsbuild 开头的日志,包括 Rsbuild 内部执行的操作、当前使用的 Rspack 版本等。

$ DEBUG=rsbuild pnpm dev

  ...
  rsbuild 10:00:00 configuration loaded from: /path/to/...
  rsbuild 10:00:00 registering default plugins
  rsbuild 10:00:00 default plugins registered
  ...

此外,terminal 中还会输出以下日志,表示 Rsbuild 将内部生成的构建配置写入到磁盘中,此时你可以打开这些配置文件来查看相应的内容。

config inspection completed, generated files:

  - Rsbuild config: /Project/demo/dist/.rsbuild/rsbuild.config.mjs
  - Rspack config (web): /Project/demo/dist/.rsbuild/rspack.config.web.mjs

#Rsbuild 配置文件

在调试模式下,Rsbuild 会自动生成 dist/.rsbuild/rsbuild.config.mjs 文件,这里面包含了最终生成的 Rsbuild 配置。在这个文件里,你可以了解到你传入的 Rsbuild 配置在经过框架层和 Rsbuild 处理后的最终结果。

该文件的大致结构如下:

rsbuild.config.mjs
export default {
  dev: {
    // some configs...
  },
  source: {
    // some configs...
  },
  // other configs...
};

关于 Rsbuild 配置项的完整介绍,请查看 配置 Rsbuild 章节。

#Rspack 配置文件

在调试模式下,Rsbuild 还会自动生成 dist/.rsbuild/rspack.config.web.mjs 文件,这里面包含了最终生成的 Rspack 配置。在这个文件里,你可以了解到 Rsbuild 最终传递给 Rspack 的配置里包含了哪些内容。

该文件的大致结构如下:

rspack.config.web.mjs
export default {
  resolve: {
    // some resolve configs...
  },
  module: {
    // some Rspack loaders...
  },
  plugins: [
    // some Rspack plugins...
  ],
  // other configs...
};

关于 Rspack 配置项的完整介绍,请查看 Rspack 官方文档。