@modern-js/main-doc 0.0.0-nightly-20240123170645 → 0.0.0-nightly-20240124170638

package/docs/en/apis/app/commands.mdx

@@ -195,7 +195,7 @@ Options:
 
 ## modern inspect
 
-The `modern inspect` command is used to view the [Modern.js Builder config](https://modernjs.dev/builder/en/guide/basic/builder-config.html) and webpack config of the project.
+The `modern inspect` command is used to view the [Rsbuild config](https://rsbuild.dev/config/index) and webpack or Rspack config of the project.
 
 ```bash
 Usage: modern inspect [options]
@@ -210,16 +210,16 @@ Options:
 
 After executing the command `npx modern inspect` in the project root directory, the following files will be generated in the `dist` directory of the project:
 
-- `builder.config.js`: The Modern.js Builder config to use at build time.
-- `webpack.config.web.js`: The webpack config used by to use at build time.
+- `rsbuild.config.mjs`: The Rsbuild config to use at build time.
+- `webpack.config.web.mjs`: The webpack config used by to use at build time.
 
 ```bash
 ➜ npx modern inspect
 
 Inspect config succeed, open following files to view the content:
 
-  - Builder Config: /root/my-project/dist/builder.config.js
-  - Webpack Config (web): /root/my-project/dist/webpack.config.web.js
+  - Rsbuild Config: /root/my-project/dist/rsbuild.config.mjs
+  - Webpack Config (web): /root/my-project/dist/webpack.config.web.mjs
 ```
 
 ### Configuration Env
@@ -240,16 +240,16 @@ modern inspect --verbose
 
 ### SSR Configuration
 
-If the project has enabled SSR, an additional `webpack.config.node.js` file will be generated in the `dist/`, corresponding to the webpack configuration at SSR build time.
+If the project has enabled SSR, an additional `webpack.config.node.mjs` file will be generated in the `dist/`, corresponding to the webpack configuration at SSR build time.
 
 ```bash
 ➜ npx modern inspect
 
 Inspect config succeed, open following files to view the content:
 
-  - Builder Config: /root/my-project/dist/builder.config.js
-  - Webpack Config (web): /root/my-project/dist/webpack.config.web.js
-  - Webpack Config (node): /root/my-project/dist/webpack.config.node.js
+  - Rsbuild Config: /root/my-project/dist/rsbuild.config.mjs
+  - Webpack Config (web): /root/my-project/dist/webpack.config.web.mjs
+  - Webpack Config (node): /root/my-project/dist/webpack.config.node.mjs
 ```
 
 ## modern lint

package/docs/en/configure/app/builder-plugins.mdx

@@ -4,16 +4,16 @@ sidebar_position: 21
 
 # builderPlugins
 
-- **Type:** `BuilderPlugin[]`
+- **Type:** `RsbuildPlugin[]`
 - **Default:** `[]`
 
-Used to configure the Modern.js Builder plugin.
+Used to configure the Rsbuild plugin.
 
-Modern.js Builder is the build tool of Modern.js, please read [Builder](/guides/concept/builder) for background. If you want to know how to write Builder plugins, you can refer to [Modern.js Builder - Introduce to Plugin](https://modernjs.dev/builder/en/plugins/introduction.html).
+Rsbuild is the build tool of Modern.js, please read [Build Engine](/guides/concept/builder) for background. If you want to know how to write Rsbuild plugins, you can refer to [Rsbuild - Plugin System](https://rsbuild.dev/plugins/dev/index).
 
 ## Precautions
 
-This option **is used to configure the Modern.js Builder plugins**. If you need to configure other types of plugins, please select the corresponding configs:
+This option **is used to configure the Rsbuild plugins**. If you need to configure other types of plugins, please select the corresponding configs:
 
 - Use [plugins](/configure/app/plugins) to configure Modern.js framework plugins.
 - Use [tools.bundlerChain](/configure/app/tools/bundler-chain) to configure Rspack or webpack plugins.
@@ -21,23 +21,23 @@ This option **is used to configure the Modern.js Builder plugins**. If you need
 
 ## When to use
 
-In most scenarios, we recommend you to use the Modern.js framework plugin, which can be registered through the [plugins](/configure/app/plugins) config. Because the API provided by the framework plugin is richer and more capable, while the API provided by the Builder plugin can only be used to build scenes.
+In most scenarios, we recommend you to use the Modern.js framework plugin, which can be registered through the [plugins](/configure/app/plugins) config. Because the API provided by the framework plugin is richer and more capable, while the API provided by the Rsbuild plugin can only be used to build scenes.
 
-When you need to reference some existing Builder plugins (and there is no related capability in Modern.js), or reuse Builder plugins between different frameworks, you can use the `builderPlugins` field to register them.
+When you need to reference some existing Rsbuild plugins (and there is no related capability in Modern.js), or reuse Rsbuild plugins between different frameworks, you can use the `builderPlugins` field to register them.
 
 ## Example
 
-Below is an example of using the Builder plugin.
+Below is an example of using the Rsbuild plugin.
 
 ### Using plugins on npm
 
 To use a plugin on npm, you need to install the plugin through the package manager and import it.
 
 ```ts title="modern.config.ts"
-import myBuilderPlugin from 'my-builder-plugin';
+import myRsbuildPlugin from 'my-rsbuild-plugin';
 
 export default defineConfig({
-  builderPlugins: [myBuilderPlugin()],
+  builderPlugins: [myRsbuildPlugin()],
 });
 ```
 
@@ -46,10 +46,10 @@ export default defineConfig({
 Use the plugin in the local code repository, you can import it directly through the relative path import.
 
 ```ts title="modern.config.ts"
-import myBuilderPlugin from './plugin/myBuilderPlugin';
+import myRsbuildPlugin from './plugin/myRsbuildPlugin';
 
 export default defineConfig({
-  builderPlugins: [myBuilderPlugin()],
+  builderPlugins: [myRsbuildPlugin()],
 });
 ```
 
@@ -58,11 +58,11 @@ export default defineConfig({
 If the plugin provides some custom configuration options, you can pass in the configuration through the parameters of the plugin function.
 
 ```ts title="modern.config.ts"
-import myBuilderPlugin from 'my-builder-plugin';
+import myRsbuildPlugin from 'my-rsbuild-plugin';
 
 export default defineConfig({
   builderPlugins: [
-    myBuilderPlugin({
+    myRsbuildPlugin({
       foo: 1,
       bar: 2,
     }),

package/docs/en/configure/app/output/disable-node-polyfill.mdx

@@ -19,4 +19,4 @@ export default defineConfig({
 });
 ```
 
-This config is implemented based on the Node Polyfill plugin of Modern.js Builder, you can read [Modern.js Builder - Node Polyfill Plugin](https://modernjs.dev/builder/en/plugins/plugin-node-polyfill.html) documentation for details.
+This config is implemented based on the Node Polyfill plugin of Rsbuild, you can read [Rsbuild - Node Polyfill Plugin](https://rsbuild.dev/plugins/list/plugin-node-polyfill) documentation for details.

package/docs/en/guides/advanced-features/compatibility.mdx

@@ -19,7 +19,7 @@ ios_saf >= 10
 ```
 
 :::tip
-Please refer to [Modern.js Builder - Browserslist](https://modernjs.dev/builder/en/guide/advanced/browserslist) for more information.
+Please refer to [Rsbuild - Browserslist](https://rsbuild.dev/guide/advanced/browserslist) for more information.
 :::
 
 ## Polyfill

package/docs/en/guides/advanced-features/optimize-bundle.mdx

@@ -4,7 +4,7 @@ sidebar_position: 13
 
 # Bundle Size Optimization
 
-Bundle size optimization is an important part in production environment because it directly affects the user experience of online users. In this document, we will introduce some common bundle size optimization methods in Builder.
+Bundle size optimization is an important part in production environment because it directly affects the user experience of online users. In this document, we will introduce some common bundle size optimization methods in Modern.js.
 
 ## Reduce duplicate dependencies
 
@@ -59,7 +59,7 @@ For example, if you only need to be compatible with browsers above Chrome 61, yo
 ```
 
 :::tip
-Please read the [Browserslist](https://modernjs.dev/builder/en/guide/advanced/browserslist.html) chapter to know more about the usage of Browserslist.
+Please read the [Browserslist](https://rsbuild.dev/guide/advanced/browserslist) chapter to know more about the usage of Browserslist.
 :::
 
 ## Usage polyfill
@@ -82,23 +82,23 @@ Please read the [Browser Compatibility](/guides/advanced-features/compatibility)
 
 ## Image Compression
 
-In general front-end projects, the size of image often accounts for a large proportion of the total bundle size of the project.So if the image size can be reduced as much as possible, it will have a significant optimization effect on the project bundle size. You can enable image compression by registering a plugin in the Builder:
+In general front-end projects, the size of image often accounts for a large proportion of the total bundle size of the project.So if the image size can be reduced as much as possible, it will have a significant optimization effect on the project bundle size. You can enable image compression by registering a plugin in Modern.js:
 
 ```ts title="modern.config.ts"
-import { builderPluginImageCompress } from '@modern-js/builder-plugin-image-compress';
+import { pluginImageCompress } from '@rsbuild/plugin-image-compress';
 
 export default {
-  builderPlugins: [builderPluginImageCompress()],
+  builderPlugins: [pluginImageCompress()],
 };
 ```
 
-See details in [plugin-image-compress](https://modernjs.dev/builder/en/plugins/plugin-image-compress.html).
+See details in [plugin-image-compress](https://rsbuild.dev/plugins/list/plugin-image-compress).
 
 ## Split Chunk
 
 A great chunk splitting strategy is very important to improve the loading performance of the application. It can make full use of the browser's caching mechanism to reduce the number of requests and improve the loading speed of the application.
 
-A variety of [chunk splitting strategies](https://modernjs.dev/builder/en/guide/optimization/split-chunk) are built into Builder, which can meet the needs of most applications. You can also customize the chunk splitting config according to your own business scenarios.
+A variety of [chunk splitting strategies](https://rsbuild.dev/guide/optimization/split-chunk) are built into Modern.js, which can meet the needs of most applications. You can also customize the chunk splitting config according to your own business scenarios.
 
 For example, split the `axios` library under node_modules into `axios.js`:
 

package/docs/en/guides/advanced-features/rspack-start.mdx

@@ -55,8 +55,6 @@ import RspackPrecautions from '@modern-js/builder-doc/docs/en/shared/rspackPreca
 
 ## Migrating configuration
 
-After enabling Rspack building capability, further configuration migration is needed by referring to the [Configuration Differences](https://modernjs.dev/builder/en/guide/advanced/rspack-start.html#migrating-from-webpack-to-rspack).
-
 In Modern.js, the [tools.webpack](/configure/app/tools/webpack) and [tools.webpackChain](/configure/app/tools/webpack-chain) configurations only take effect in webpack mode, after turning on the Rspack build, you can modify it to [tools.rspack](/configure/app/tools/rspack) and [tools.bundlerChain](/configure/app/tools/bundler-chain).
 
 ```diff

package/docs/en/guides/basic-features/css.mdx

@@ -12,13 +12,13 @@ Modern.js has built-in popular community CSS preprocessors, including Less and S
 
 By default, you don't need to configure Less and Sass. If you have custom loader configuration requirements, you can set them up by configuring [tools.less](/configure/app/tools/less) and [tools.sass](/configure/app/tools/sass).
 
-You can also use Stylus in Modern.js by installing the Stylus plugin provided by Modern.js Builder. For usage, please refer to [Stylus Plugin](https://modernjs.dev/builder/plugins/plugin-stylus.html).
+You can also use Stylus in Modern.js by installing the Stylus plugin provided by Rsbuild. For usage, please refer to [Stylus Plugin](https://rsbuild.dev/plugins/list/plugin-stylus).
 
 ## Using PostCSS
 
 Modern.js has built-in [PostCSS](https://postcss.org/) to transform CSS code.
 
-Please refer to [Modern.js Builder - Using PostCSS](https://modernjs.dev/builder/en/guide/basic/css-usage.html#using-postcss) for detailed usage.
+Please refer to [Rsbuild - Using PostCSS](https://rsbuild.dev/guide/basic/css-usage#using-postcss) for detailed usage.
 
 ## Using CSS Modules
 

package/docs/en/guides/concept/builder.mdx

@@ -4,9 +4,9 @@ sidebar_position: 2
 
 # Build Engine
 
-**Modern.js uses [Modern.js Builder](https://modernjs.dev/builder/en) to build your Web App.**
+Modern.js Builder refers to the build layer of Modern.js. Its goal is to provide Modern.js users with out-of-the-box build capabilities and support seamless switching between webpack and Rspack.
 
-Modern.js Builder is one of the core components of the Modern.js system. It is a build tool for web development scenarios that can be used independently of Modern.js. Modern.js Builder supports multiple bundlers such as webpack and Rspack, and by default uses the most mature webpack for bundling.
+Modern.js Builder is based on [Rsbuild](https://rsbuild.dev/). Rsbuild is a build tool for web development scenarios that can be used independently of Modern.js.
 
 ## Build Architecture
 
@@ -20,28 +20,14 @@ From a building perspective, Modern.js is divided into three layers, from top to
 
 ## Builder Documentation
 
-Since Modern.js Builder is a module that can be used independently, we have provided separate documentation for it, which can be found at [modernjs.dev/builder](https://modernjs.dev/builder/en).
+The documentation address of Rsbuild is: https://rsbuild.dev/
 
-In this documentation, you can learn about the detailed introduction of Modern.js Builder, and you can also find complete usage guides for various building capabilities. If you have any building needs or problems, it is recommended that you read the Modern.js Builder documentation first to solve them.
+In this documentation, you can learn about the detailed introduction of Rsbuild, and you can also find complete usage guides for various building capabilities.
 
-## Builder Configuration
-
-Modern.js's configuration inherits from Modern.js Builder, so you can use all the build configurations provided by Modern.js Builder in Modern.js.
-
-Taking the `html.title` config option of Modern.js Builder as an example, you can directly use this option in the `modern.config.ts` file, and it will be automatically passed to Modern.js Builder.
-
-```ts title="modern.config.js"
-export default defineConfig({
-  html: {
-    title: 'example',
-  },
-});
-```
-
-For detailed information about build configuration, please refer to [「Modern.js Builder - Builder Config」](https://modernjs.dev/builder/en/guide/basic/builder-config.html).
+If you want to understand the use of build configurations, it is recommended that you read the Modern.js documentation first, because the build configurations and defaults in Modern.js are not exactly the same as Rsbuild.
 
 ## Builder Capabilities
 
-Modern.js Builder provides rich build capabilities, including JavaScript compilation, CSS compilation, static assets processing, code hot update, code compression, TS type checking, and dozens of other capabilities.
+Rsbuild provides rich build capabilities, including JavaScript compilation, CSS compilation, static assets processing, code hot update, code compression, TS type checking, and dozens of other capabilities.
 
-We recommend that you read [「Modern.js Builder - All Features」](https://modernjs.dev/builder/en/guide/features.html) to learn about all the features provided by Modern.js Builder.
+We recommend that you read [「Rsbuild - All Features」](https://rsbuild.dev/guide/start/features) to learn about all the features provided by Rsbuild.

package/docs/en/guides/get-started/tech-stack.mdx

@@ -89,7 +89,7 @@ Modern.js supports enabling ["Tailwind CSS"](/en/guides/basic-features/css.html#
 Modern.js supports three CSS preprocessors: [Sass](https://sass-lang.com/), [Less](https://lesscss.org/), and [Stylus](https://stylus-lang.com/):
 
 - Sass and Less are supported by default and ready to use.
-- Stylus is optional and can be used by referring to the ["Stylus Plugin"](https://modernjs.dev/builder/en/plugins/plugin-stylus.html).
+- Stylus is optional and can be used by referring to the ["Stylus Plugin"](https://rsbuild.dev/plugins/list/plugin-stylus).
 
 ---
 

package/docs/zh/apis/app/commands.mdx

@@ -195,7 +195,7 @@ Options:
 
 ## modern inspect
 
-`modern inspect` 命令用于查看项目的 [Modern.js Builder 配置](https://modernjs.dev/builder/guide/basic/builder-config.html) 以及 webpack 配置。
+`modern inspect` 命令用于查看项目的 [Rsbuild 配置](https://rsbuild.dev/zh/config/index) 以及 webpack 或 Rspack 配置。
 
 ```bash
 Usage: modern inspect [options]
@@ -210,16 +210,16 @@ Options:
 
 在项目根目录下执行命令 `npx modern inspect` 后，会在项目的 `dist` 目录生成以下文件：
 
-- `builder.config.js`: 表示在构建时使用的 Modern.js Builder 配置。
-- `webpack.config.web.js`: 表示在构建时使用的 webpack 配置。
+- `rsbuild.config.mjs`: 表示在构建时使用的 Rsbuild 配置。
+- `webpack.config.web.mjs`: 表示在构建时使用的 webpack 配置。
 
 ```bash
 ➜ npx modern inspect
 
 Inspect config succeed, open following files to view the content:
 
-  - Builder Config: /root/my-project/dist/builder.config.js
-  - Webpack Config (web): /root/my-project/dist/webpack.config.web.js
+  - Rsbuild Config: /root/my-project/dist/rsbuild.config.mjs
+  - Webpack Config (web): /root/my-project/dist/webpack.config.web.mjs
 ```
 
 ### 指定环境
@@ -240,16 +240,16 @@ modern inspect --verbose
 
 ### SSR 构建配置
 
-如果项目开启了 SSR 能力，则在 `dist` 目录会另外生成一份 `webpack.config.node.js` 文件，对应 SSR 构建时的 webpack 配置。
+如果项目开启了 SSR 能力，则在 `dist` 目录会另外生成一份 `webpack.config.node.mjs` 文件，对应 SSR 构建时的 webpack 配置。
 
 ```bash
 ➜ npx modern inspect
 
 Inspect config succeed, open following files to view the content:
 
-  - Builder Config: /root/my-project/dist/builder.config.js
-  - Webpack Config (web): /root/my-project/dist/webpack.config.web.js
-  - Webpack Config (node): /root/my-project/dist/webpack.config.node.js
+  - Rsbuild Config: /root/my-project/dist/rsbuild.config.mjs
+  - Webpack Config (web): /root/my-project/dist/webpack.config.web.mjs
+  - Webpack Config (node): /root/my-project/dist/webpack.config.node.mjs
 ```
 
 ## modern lint

package/docs/zh/configure/app/builder-plugins.mdx

@@ -4,18 +4,18 @@ sidebar_position: 21
 
 # builderPlugins 构建插件
 
-- **类型：** `BuilderPlugin[]`
+- **类型：** `RsbuildPlugin[]`
 - **默认值：** `[]`
 
-用于配置 Modern.js Builder 构建插件。
+用于配置 Rsbuild 构建插件。
 
-Modern.js Builder 是 Modern.js 底层的构建工具，请阅读 [构建能力](/guides/concept/builder) 了解相关背景。
+Rsbuild 是 Modern.js 底层的构建工具，请阅读 [构建能力](/guides/concept/builder) 了解相关背景。
 
-如果你想了解 Builder 插件的编写方式，可以参考 [Modern.js Builder - 插件系统](https://modernjs.dev/builder/plugins/introduction.html)。
+如果你想了解 Rsbuild 插件的编写方式，可以参考 [Rsbuild - 插件系统](https://rsbuild.dev/zh/plugins/dev/index)。
 
 ## 注意事项
 
-该选项**用于配置 Modern.js Builder 构建插件**，如果你需要配置其他类型的插件，请选择对应的配置方式：
+该选项**用于配置 Rsbuild 构建插件**，如果你需要配置其他类型的插件，请选择对应的配置方式：
 
 - 配置 Modern.js 框架插件，请使用 [plugins](/configure/app/plugins) 配置项。
 - 配置 Rspack 或 webpack 插件，请使用 [tools.bundlerChain](/configure/app/tools/bundler-chain) 配置项。
@@ -23,23 +23,23 @@ Modern.js Builder 是 Modern.js 底层的构建工具，请阅读 [构建能力]
 
 ## 何时使用
 
-大部分场景下，我们推荐你使用 Modern.js 框架插件，框架插件可以通过 [plugins](/configure/app/plugins) 字段进行注册。因为框架插件提供的 API 更丰富、能力更强，而 Builder 插件提供的 API 只能用于构建场景。
+大部分场景下，我们推荐你使用 Modern.js 框架插件，框架插件可以通过 [plugins](/configure/app/plugins) 字段进行注册。因为框架插件提供的 API 更丰富、能力更强，而 Rsbuild 插件提供的 API 只能用于构建场景。
 
-当你需要引用一些现有的 Builder 插件（并且在 Modern.js 中没有相关能力），或是在不同的框架之间复用 Builder 插件时，你可以使用 `builderPlugins` 字段进行注册。
+当你需要引用一些现有的 Rsbuild 插件（并且在 Modern.js 中没有相关能力），或是在不同的框架之间复用 Rsbuild 插件时，你可以使用 `builderPlugins` 字段进行注册。
 
 ## 示例
 
-下面是 Builder 插件的使用示例。
+下面是 Rsbuild 插件的使用示例。
 
 ### 使用 npm 上的插件
 
 使用 npm 上的插件，需要通过包管理器安装插件，并通过 import 引入。
 
 ```ts title="modern.config.ts"
-import { myBuilderPlugin } from 'my-builder-plugin';
+import { myRsbuildPlugin } from 'my-rsbuild-plugin';
 
 export default defineConfig({
-  builderPlugins: [myBuilderPlugin()],
+  builderPlugins: [myRsbuildPlugin()],
 });
 ```
 
@@ -48,10 +48,10 @@ export default defineConfig({
 使用本地代码仓库中的插件，直接通过相对路径 import 引入即可。
 
 ```ts title="modern.config.ts"
-import { myBuilderPlugin } from './plugin/myBuilderPlugin';
+import { myRsbuildPlugin } from './plugin/myRsbuildPlugin';
 
 export default defineConfig({
-  builderPlugins: [myBuilderPlugin()],
+  builderPlugins: [myRsbuildPlugin()],
 });
 ```
 
@@ -60,11 +60,11 @@ export default defineConfig({
 如果插件提供了一些自定义的配置项，可以通过插件函数的参数传入配置。
 
 ```ts title="modern.config.ts"
-import { myBuilderPlugin } from 'my-builder-plugin';
+import { myRsbuildPlugin } from 'my-rsbuild-plugin';
 
 export default defineConfig({
   builderPlugins: [
-    myBuilderPlugin({
+    myRsbuildPlugin({
       foo: 1,
       bar: 2,
     }),

package/docs/zh/configure/app/output/disable-node-polyfill.mdx

@@ -19,4 +19,4 @@ export default defineConfig({
 });
 ```
 
-该配置项基于 Modern.js Builder 的 Node Polyfill 插件实现，你可以阅读 [Modern.js Builder - Node Polyfill 插件](https://modernjs.dev/builder/plugins/plugin-node-polyfill.html) 文档来了解详细信息。
+该配置项基于 Rsbuild 的 Node Polyfill 插件实现，你可以阅读 [Rsbuild - Node Polyfill 插件](https://rsbuild.dev/zh/plugins/list/plugin-node-polyfill) 文档来了解详细信息。

package/docs/zh/guides/advanced-features/compatibility.mdx

@@ -19,7 +19,7 @@ ios_saf >= 10
 ```
 
 :::tip
-请查看 [Modern.js Builder - 设置浏览器范围](https://modernjs.dev/builder/guide/advanced/browserslist) 来了解更多内容。
+请查看 [Rsbuild - 设置浏览器范围](https://rsbuild.dev/zh/guide/advanced/browserslist) 来了解更多内容。
 :::
 
 ## Polyfill

package/docs/zh/guides/advanced-features/optimize-bundle.mdx

@@ -44,9 +44,9 @@ BUNDLE_ANALYZE=true pnpm build
 
 ## 提升 Browserslist 范围
 
-Builder 会根据项目的 Browserslist 配置范围进行代码编译，并注入相应的 Polyfill。如果项目不需要兼容旧版浏览器，可以根据实际情况来提升 Browserslist 范围，从而减少在语法和 Polyfill 上的编译开销。
+Modern.js 会根据项目的 Browserslist 配置范围进行代码编译，并注入相应的 Polyfill。如果项目不需要兼容旧版浏览器，可以根据实际情况来提升 Browserslist 范围，从而减少在语法和 Polyfill 上的编译开销。
 
-Builder 默认的 Browserslist 配置为：
+Modern.js 默认的 Browserslist 配置为：
 
 ```js
 ['> 0.01%', 'not dead', 'not op_mini all'];
@@ -59,14 +59,14 @@ Builder 默认的 Browserslist 配置为：
 ```
 
 :::tip
-请阅读 [设置浏览器范围](https://modernjs.dev/builder/guide/advanced/browserslist.html) 章节来了解更多关于 Browserslist 的用法。
+请阅读 [设置浏览器范围](https://rsbuild.dev/zh/guide/advanced/browserslist) 章节来了解更多关于 Browserslist 的用法。
 :::
 
 ## 按需引入 polyfill
 
 在明确第三方依赖不需要额外 polyfill 的情况下，你可以将 [output.polyfill](/configure/app/output/polyfill.html) 设置为 `usage`。
 
-在 `usage` 模式下，Builder 会分析源代码中使用的语法，按需注入所需的 polyfill 代码，从而减少 polyfill 的代码量。
+在 `usage` 模式下，Modern.js 会分析源代码中使用的语法，按需注入所需的 polyfill 代码，从而减少 polyfill 的代码量。
 
 ```js
 export default {
@@ -85,20 +85,20 @@ export default {
 在一般的前端项目中，图片资源的体积往往是项目产物体积的大头，因此如果能尽可能精简图片的体积，那么将会对项目的打包产物体积起到明显的优化效果。你可以在 Modern.js 中注册插件来启用图片压缩功能:
 
 ```js title="modern.config.ts"
-import { builderPluginImageCompress } from '@modern-js/builder-plugin-image-compress';
+import { pluginImageCompress } from '@rsbuild/plugin-image-compress';
 
 export default {
-  builderPlugins: [builderPluginImageCompress()],
+  builderPlugins: [pluginImageCompress()],
 };
 ```
 
-详见 [Image Compress 插件](https://modernjs.dev/builder/plugins/plugin-image-compress.html)。
+详见 [Image Compress 插件](https://rsbuild.dev/zh/plugins/list/plugin-image-compress)。
 
 ## 代码拆包
 
 良好的拆包策略对于提升应用的加载性能是十分重要的，可以充分利用浏览器的缓存机制，减少请求数量，加快页面加载速度。
 
-在 Modern.js 中内置了[多种拆包策略](https://modernjs.dev/builder/guide/optimization/split-chunk)，可以满足大部分应用的需求，你也可以根据自己的业务场景，自定义拆包配置。
+在 Modern.js 中内置了[多种拆包策略](https://rsbuild.dev/zh/guide/optimization/split-chunk)，可以满足大部分应用的需求，你也可以根据自己的业务场景，自定义拆包配置。
 
 比如将 node_modules 下的 `axios` 库拆分到 `axios.js` 中：
 

package/docs/zh/guides/basic-features/css.mdx

@@ -12,13 +12,13 @@ Modern.js 内置了社区流行的 CSS 预处理器，包括 Less 和 Sass。
 
 默认情况下，你不需要对 Less 和 Sass 进行任何配置。如果你有自定义 loader 配置的需求，可以通过配置 [tools.less](/configure/app/tools/less)、[tools.sass](/configure/app/tools/sass) 来进行设置。
 
-你也可以在 Modern.js 中使用 Stylus，只需要安装 Modern.js Builder 提供的 Stylus 插件即可，使用方式请参考 [Stylus 插件](https://modernjs.dev/builder/plugins/plugin-stylus.html)。
+你也可以在 Modern.js 中使用 Stylus，只需要安装 Rsbuild 提供的 Stylus 插件即可，使用方式请参考 [Stylus 插件](https://rsbuild.dev/zh/plugins/list/plugin-stylus)。
 
 ## 使用 PostCSS
 
 Modern.js 内置了 [PostCSS](https://postcss.org/) 来转换 CSS 代码。
 
-请阅读 [Modern.js Builder - 使用 PostCSS](https://modernjs.dev/builder/guide/basic/css-usage.html#%E4%BD%BF%E7%94%A8-postcss) 了解更多用法。
+请阅读 [Rsbuild - 使用 PostCSS](https://rsbuild.dev/zh/guide/basic/css-usage#%E4%BD%BF%E7%94%A8-postcss) 了解更多用法。
 
 ## 使用 CSS Modules
 

package/docs/zh/guides/concept/builder.mdx

@@ -4,9 +4,9 @@ sidebar_position: 2
 
 # 构建工具
 
-**Modern.js 的构建能力由 [Modern.js Builder](https://modernjs.dev/builder) 提供。**
+Modern.js Builder 指的是 Modern.js 的构建层，它的目标是为 Modern.js 用户提供开箱即用的构建能力，并支持在 webpack 和 Rspack 间无缝切换。
 
-Modern.js Builder 是 Modern.js 体系的核心组件之一，它是一个基于 Rspack 的 Web 构建工具，可以脱离 Modern.js 被独立使用。Modern.js Builder 同时支持 webpack 和 Rspack 等多种打包工具，默认情况下使用最成熟的 webpack 进行打包。
+Modern.js Builder 基于 [Rsbuild](https://rsbuild.dev/) 封装。Rsbuild 是一个基于 Rspack 的 Web 构建工具，可以脱离 Modern.js 被独立使用。
 
 ## 构建架构
 
@@ -20,28 +20,14 @@ Modern.js Builder 是 Modern.js 体系的核心组件之一，它是一个基于
 
 ## 构建文档
 
-由于 Modern.js Builder 是一个可独立使用的模块，我们为它提供了单独的文档，文档地址为：[modernjs.dev/builder](https://modernjs.dev/builder)。
+Rsbuild 的文档地址为：https://rsbuild.dev/
 
-在该文档中，你可以了解到 Modern.js Builder 的详细介绍，同时也可以找到各个构建能力的完整使用指南。当你遇到构建方面的需求或问题时，建议你优先阅读 Modern.js Builder 文档来解决。
+在该文档中，你可以了解到 Rsbuild 的详细介绍，同时也可以找到各个构建能力的完整使用指南。
 
-## 构建配置
-
-Modern.js 的配置继承自 Modern.js Builder，因此你可以在 Modern.js 中使用 Modern.js Builder 提供的所有构建配置。
-
-以 Modern.js Builder 的 `html.title` 配置项为例，你可以直接在 `modern.config.ts` 文件中使用该配置项，它会被自动传递给 Modern.js Builder。
-
-```ts title="modern.config.js"
-export default defineConfig({
-  html: {
-    title: 'example',
-  },
-});
-```
-
-关于构建配置的详细说明，请参考 [「Modern.js Builder - Builder 配置」](https://modernjs.dev/builder/guide/basic/builder-config.html)。
+如果你想要了解某些构建配置的使用，建议你优先阅读 Modern.js 文档，因为 Modern.js 中的构建配置和默认值与 Rsbuild 并不完全相同。
 
 ## 构建能力
 
-Modern.js Builder 提供了丰富的构建能力，包括 JavaScript 编译、CSS 编译、静态资源处理、代码热更新、代码压缩、TS 类型检查等几十种能力。
+Rsbuild 提供了丰富的构建能力，包括 JavaScript 编译、CSS 编译、静态资源处理、代码热更新、代码压缩、TS 类型检查等几十种能力。
 
-我们推荐你阅读 [「Modern.js Builder - 功能导航」](https://modernjs.dev/builder/guide/features.html) 来了解 Modern.js Builder 提供的所有构建能力。
+我们推荐你阅读 [「Rsbuild - 功能导航」](https://rsbuild.dev/zh/guide/start/features) 来了解 Rsbuild 提供的所有构建能力。

package/docs/zh/guides/get-started/tech-stack.mdx

@@ -89,7 +89,7 @@ Modern.js 支持[「启用 Tailwind CSS」](/guides/basic-features/css.html#使
 Modern.js 支持 [Sass](https://sass-lang.com/)、[Less](https://lesscss.org/) 和 [Stylus](https://stylus-lang.com/) 三种 CSS 预处理器：
 
 - 默认支持 Sass 和 Less，开箱即用。
-- 可选支持 Stylus，请参考[「Stylus 插件」](https://modernjs.dev/builder/plugins/plugin-stylus.html) 来使用。
+- 可选支持 Stylus，请参考[「Stylus 插件」](https://rsbuild.dev/zh/plugins/list/plugin-stylus) 来使用。
 
 ---
 

package/package.json

@@ -15,17 +15,17 @@
     "modern",
     "modern.js"
   ],
-  "version": "0.0.0-nightly-20240123170645",
+  "version": "0.0.0-nightly-20240124170638",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public",
     "provenance": true
   },
   "dependencies": {
-    "@modern-js/sandpack-react": "0.0.0-nightly-20240123170645"
+    "@modern-js/sandpack-react": "0.0.0-nightly-20240124170638"
   },
   "peerDependencies": {
-    "@modern-js/builder-doc": "0.0.0-nightly-20240123170645"
+    "@modern-js/builder-doc": "0.0.0-nightly-20240124170638"
   },
   "devDependencies": {
     "classnames": "^2",
@@ -39,8 +39,8 @@
     "@rspress/shared": "1.10.1",
     "@types/node": "^16",
     "@types/fs-extra": "9.0.13",
-    "@modern-js/builder-doc": "0.0.0-nightly-20240123170645",
-    "@modern-js/doc-plugin-auto-sidebar": "0.0.0-nightly-20240123170645"
+    "@modern-js/doc-plugin-auto-sidebar": "0.0.0-nightly-20240124170638",
+    "@modern-js/builder-doc": "0.0.0-nightly-20240124170638"
   },
   "scripts": {
     "dev": "rspress dev",