@modern-js/main-doc 2.67.6 → 2.67.8

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

@@ -154,7 +154,7 @@ The `--config` parameter needs to use a JSON string.
 pnpm does not support the use of JSON strings as parameter values currently. Use `npm new` to turn on.【[Relate Issue](https://github.com/pnpm/pnpm/issues/3876)】
 :::
 
-import ServeCommand from "@site-docs-en/components/serve-command";
+import ServeCommand from '@site-docs-en/components/serve-command';
 
 <ServeCommand />
 
@@ -175,7 +175,7 @@ Options:
 
 ## modern inspect
 
-The `modern inspect` command is used to view the [Rsbuild config](https://rsbuild.dev/config/index) and webpack or Rspack config of the project.
+The `modern inspect` command is used to view the [Rsbuild config](https://rsbuild.rs/config/index) and webpack or Rspack config of the project.
 
 ```bash
 Usage: modern inspect [options]
@@ -232,6 +232,6 @@ Inspect config succeed, open following files to view the content:
   - Webpack Config (node): /root/my-project/dist/webpack.config.node.mjs
 ```
 
-import DeployCommand from "@site-docs-en/components/deploy-command";
+import DeployCommand from '@site-docs-en/components/deploy-command';
 
 <DeployCommand />

package/docs/en/apis/app/hooks/src/routes.mdx

@@ -88,73 +88,3 @@ export default () => {
 `<Outlet>` is a new API in React Router 6. For details, see [Outlet](https://reactrouter.com/en/main/components/outlet#outlet).
 
 :::
-
-## Upgrading to React Router v7
-
-React Router v7 reduces bundle size (approximately 15% smaller) compared to React Router v6, provides a more efficient route matching algorithm, and offers better support for React 19 and TypeScript. There are very few breaking changes compared to React Router v6, and Modern.js has made both versions compatible, allowing for a seamless upgrade by simply installing and registering the appropriate plugin.
-
-:::info
-
-For more changes from React Router v6 to React Router v7, check the [documentation](https://reactrouter.com/upgrading/v6#upgrade-to-v7)
-
-:::
-
-### Requirements
-
-React Router v7 has certain environment requirements:
-
-- Node.js 20+
-- React 18+
-- React DOM 18+
-
-### Install the Plugin
-
-First, install the Modern.js React Router v7 plugin:
-
-```bash
-pnpm add @modern-js/plugin-router-v7
-```
-
-### Configure the Plugin
-
-Register the plugin in `modern.config.ts`:
-
-```ts title="modern.config.ts"
-import { routerPlugin } from '@modern-js/plugin-router-v7';
-
-export default {
-  runtime: {
-    router: true,
-  },
-  plugins: [routerPlugin()],
-};
-```
-
-### Code Changes
-
-In React Router v7, you no longer need to use the `defer` API; you can directly return data in the data loader:
-
-```ts title="routes/page.data.ts"
-import { defer } from '@modern-js/runtime/router';
-
-export const loader = async ({ params }) => {
-  // Recommended v7 style
-  const user = fetchUser(params.id)
-  return { user };
-
-  // v6 style, still compatible with Modern.js
-  return defer({ data: 'hello' });
-};
-```
-
-React Router v7 has also deprecated the `json` API:
-
-```ts title="routes/page.data.ts"
-export const loader = async ({ params }) => {
-  // Recommended v7 style
-  return { data: 'hello' };
-
-  // v6 style, still compatible with Modern.js
-  return json({ data: 'hello' });
-};
-```

package/docs/en/community/blog/v2-release-note.mdx

@@ -80,7 +80,7 @@ title: Modern.js v2 发布
 
 目前，Rspack 项目以及 Modern.js 的 Rspack 模式仍在快速迭代中。在未来几个月内，我们将逐步对齐 Webpack 模式和 Rspack 模式的绝大多数功能和配置，使更多项目能从 Webpack 平滑地过渡到 Rspack。
 
-> Rspack 已于 2023.03.10 号正式开源，你也可以在非 Modern.js 的项目中直接使用 Rspack 进行构建。如果你对 Rspack 感兴趣，请阅读 [「Rspack 正式发布了」](https://www.rspack.dev/zh/blog/announcement.html)来了解更多。
+> Rspack 已于 2023.03.10 号正式开源，你也可以在非 Modern.js 的项目中直接使用 Rspack 进行构建。如果你对 Rspack 感兴趣，请阅读 [「Rspack 正式发布了」](https://rspack.rs/zh/blog/announcement.html)来了解更多。
 
 ### 渐进式设计
 
@@ -224,7 +224,7 @@ Rspress 是一个面向文档站场景的框架，它的目标是给开发者提
 
 我们做 Rspress 的初心，是为了解决我们团队内的文档站搭建需求。随着 Rspress 的功能逐渐完整，我们也将它开放给社区使用，使它能发挥更大的价值。
 
-目前，Rspress 仍处于 beta 测试状态，相关源代码已经开放在 [Rspress 仓库](https://github.com/web-infra-dev/rspress) 中，并提供了基础的 [使用文档](https://rspress.dev/)。在未来，我们将继续投入，使之成为一个完成度更高的文档解决方案。
+目前，Rspress 仍处于 beta 测试状态，相关源代码已经开放在 [Rspress 仓库](https://github.com/web-infra-dev/rspress) 中，并提供了基础的 [使用文档](https://rspress.rs/)。在未来，我们将继续投入，使之成为一个完成度更高的文档解决方案。
 
 ## 致谢
 

package/docs/en/community/contributing-guide.mdx

@@ -190,7 +190,7 @@ root
        └─ module-doc     # Documentation for Modern.js Module
 ```
 
-This website is built with Rspress, the document content can be written using markdown or mdx syntax. You can refer to the [Rspress Website](https://rspress.dev/) for detailed usage.
+This website is built with Rspress, the document content can be written using markdown or mdx syntax. You can refer to the [Rspress Website](https://rspress.rs/) for detailed usage.
 
 The source code of Rspress can be found in [this repo](https://github.com/web-infra-dev/rspress).
 

package/docs/en/components/builder.mdx

@@ -1,3 +1,3 @@
 Refers to the build layer of Modern.js. The goal of Builder is to provide Modern.js users with out-of-the-box build capabilities and support seamless switching between webpack and Rspack.
 
-The previous version of Modern.js `MAJOR_VERSION.46.0` used `@modern-js/builder`, which was upgraded to [Rsbuild](https://rsbuild.dev/) starting from `MAJOR_VERSION.46.0`.
+The previous version of Modern.js `MAJOR_VERSION.46.0` used `@modern-js/builder`, which was upgraded to [Rsbuild](https://rsbuild.rs/) starting from `MAJOR_VERSION.46.0`.

package/docs/en/components/bundler.mdx

@@ -1,3 +1,3 @@
-Refers to module bundlers such as [webpack](https://webpack.js.org/), [Rspack](https://www.rspack.dev/).
+Refers to module bundlers such as [webpack](https://webpack.js.org/), [Rspack](https://rspack.rs/).
 
 The main goal of bundlers is to bundle JavaScript, CSS and other files together, and the bundled files can be used in the browser, Node.js or other environments. When bundler processes the Web application, it builds a dependency graph and then combines every module into one or more bundles.

package/docs/en/components/rsbuild.mdx

@@ -1,3 +1,3 @@
-[Rsbuild](https://rsbuild.dev/) is an Rspack-based build tool for the web. The main goal of Rsbuild is to provide out-of-the-box build capabilities for Rspack users, allowing developers to start a web project with zero configuration.
+[Rsbuild](https://rsbuild.rs/) is an Rspack-based build tool for the web. The main goal of Rsbuild is to provide out-of-the-box build capabilities for Rspack users, allowing developers to start a web project with zero configuration.
 
 Rsbuild integrates high-performance Rust-based tools from the community, including Rspack and SWC, to provide first-class build speed and development experience.

package/docs/en/components/rspack.mdx

@@ -1,3 +1,3 @@
-[Rspack](https://www.rspack.dev/) is a high performance JavaScript bundler written in Rust. It offers strong compatibility with the webpack ecosystem, allowing for seamless replacement of webpack, and provides lightning fast build speeds.
+[Rspack](https://rspack.rs/) is a high performance JavaScript bundler written in Rust. It offers strong compatibility with the webpack ecosystem, allowing for seamless replacement of webpack, and provides lightning fast build speeds.
 
 Compared to webpack, Rspack has significantly improved build performance, thanks not only to the language advantages brought by Rust, but also to its parallel architecture and incremental compilation features. Benchmarking has shown that Rspack can provide 5-10 times better compilation performance.

package/docs/en/components/rspackPrecautions.mdx

@@ -2,5 +2,5 @@
 
 Before using Rspack, you need to be aware of the following:
 
-- Rspack is compatible with most webpack plugins and almost all loaders, but there are still a few webpack plugins that cannot be used for now. For more details, see [Plugin Compatibility](https://rspack.dev/guide/compatibility/plugin).
-- Rspack uses [SWC](https://rspack.dev/guide/features/builtin-swc-loader) by default for code transformation and compression. In rare cases, you may encounter bugs in SWC in edge cases. You can provide feedback via [SWC issues](https://github.com/swc-project/swc/issues).
+- Rspack is compatible with most webpack plugins and almost all loaders, but there are still a few webpack plugins that cannot be used for now. For more details, see [Plugin Compatibility](https://rspack.rs/guide/compatibility/plugin).
+- Rspack uses [SWC](https://rspack.rs/guide/features/builtin-swc-loader) by default for code transformation and compression. In rare cases, you may encounter bugs in SWC in edge cases. You can provide feedback via [SWC issues](https://github.com/swc-project/swc/issues).

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

@@ -9,7 +9,7 @@ sidebar_position: 21
 
 Used to configure the Rsbuild plugin.
 
-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).
+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.rs/plugins/dev/index).
 
 ## Precautions
 

package/docs/en/configure/app/output/assets-retry.mdx

@@ -76,4 +76,4 @@ After adding the above configuration, when assets fail to load from the `cdn1.co
 
 If the assets request for `cdn2.com` also fails, the request will fallback to `cdn3.com`.
 
-`assetsRetry` is implemented based on the Assets Retry plugin of Rsbuild and provides the same configuration options. You can refer to [Rsbuild - Assets Retry Plugin](https://rsbuild.dev/plugins/list/plugin-assets-retry#options) to understand all available configuration options.
+`assetsRetry` is implemented based on the Assets Retry plugin of Rsbuild and provides the same configuration options. You can refer to [Rsbuild - Assets Retry Plugin](https://rsbuild.rs/plugins/list/plugin-assets-retry#options) to understand all available configuration options.

package/docs/en/configure/app/output/copy.mdx

@@ -7,7 +7,7 @@ title: copy
 - **Type:**`Rspack.CopyRspackPluginOptions | Rspack.CopyRspackPluginOptions['patterns']`
 - **Default:** `undefined`
 
-Copies the specified file or directory to the dist directory, implemented based on [rspack.CopyRspackPlugin](https://rspack.dev/zh/plugins/rspack/copy-rspack-plugin).
+Copies the specified file or directory to the dist directory, implemented based on [rspack.CopyRspackPlugin](https://rspack.rs/zh/plugins/rspack/copy-rspack-plugin).
 
 import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
 

package/docs/en/configure/app/performance/build-cache.mdx

@@ -38,7 +38,7 @@ export default {
 };
 ```
 
-It should be noted that, Rspack's persistent cache is [experimental](https://rspack.dev/config/experiments#experimentscache), which may change in future versions, and this feature needs to be turned on manually.
+It should be noted that, Rspack's persistent cache is [experimental](https://rspack.rs/config/experiments#experimentscache), which may change in future versions, and this feature needs to be turned on manually.
 
 import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
 

package/docs/en/configure/app/performance/transform-lodash.mdx

@@ -4,9 +4,12 @@ title: transformLodash
 
 # performance.transformLodash
 
+import { Badge } from '@theme';
+
+<Badge type="danger" >Webpack Only</Badge>
+
 - **Type:** `boolean`
 - **Default:** `true`
-- **Bundler:** `only support webpack`
 
 Specifies whether to modularize the import of [lodash](https://www.npmjs.com/package/lodash) and remove unused lodash modules to reduce the code size of lodash.
 

package/docs/en/configure/app/security/sri.mdx

@@ -19,7 +19,7 @@ type SriOptions = {
 Adding an `integrity` attribute to `<script>` and `<link rel="stylesheet">` tags introduced by HTML allows the browser to verify the integrity of the introduced resource, thus preventing tampering with the downloaded resource.
 
 :::info
-For a specific introduction to SRI, you can refer to [Rsbuild security.sri](https://rsbuild.dev/zh/config/security/sri).
+For a specific introduction to SRI, you can refer to [Rsbuild security.sri](https://rsbuild.rs/zh/config/security/sri).
 
 This configuration type is not completely consistent with Rsbuild and will be automatically converted during the build process.
 :::

package/docs/en/configure/app/source/exclude.mdx

@@ -4,10 +4,10 @@ title: exclude
 
 # source.exclude
 
-- **Type:** [RuleSetCondition[]](https://rspack.dev/config/module#condition)
+- **Type:** [RuleSetCondition[]](https://rspack.rs/config/module#condition)
 - **Default:** `[]`
 
-Specifies JavaScript/TypeScript files that do not need to be compiled. The usage is consistent with [Rule.exclude](https://rspack.dev/config/module#ruleexclude) in Rspack, which supports passing in strings or regular expressions to match the module path.
+Specifies JavaScript/TypeScript files that do not need to be compiled. The usage is consistent with [Rule.exclude](https://rspack.rs/config/module#ruleexclude) in Rspack, which supports passing in strings or regular expressions to match the module path.
 
 import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
 

package/docs/en/configure/app/source/include.mdx

@@ -4,7 +4,7 @@ title: include
 
 # source.include
 
-- **Type:** [RuleSetCondition[]](https://rspack.dev/config/module#condition)
+- **Type:** [RuleSetCondition[]](https://rspack.rs/config/module#condition)
 - **Default:**
 
 ```ts

package/docs/en/configure/app/source/module-scopes.mdx

@@ -4,9 +4,12 @@ title: moduleScopes
 
 # source.moduleScopes
 
+import { Badge } from '@theme';
+
+<Badge type="danger" >Webpack Only</Badge>
+
 - **Type:** `Array<string | Regexp> | Function`
 - **Default:** `undefined`
-- **Bundler:** `only support webpack`
 
 Restrict importing paths. After configuring this option, all source files can only import code from the specific paths, and import code from other paths is not allowed.
 

package/docs/en/configure/app/source/transform-import.mdx

@@ -74,12 +74,12 @@ export default {
 };
 ```
 
-You can also use the [function usage](https://rsbuild.dev/config/source/transform-import#function-type) of `transformImport` to modify the default configuration.
+You can also use the [function usage](https://rsbuild.rs/config/source/transform-import#function-type) of `transformImport` to modify the default configuration.
 
 ```js
 export default {
   source: {
-    transformImport: (imports) => {
+    transformImport: imports => {
       return imports.filter(data => data.libraryName !== 'antd');
     },
   },

package/docs/en/configure/app/tools/babel.mdx

@@ -160,7 +160,7 @@ export default {
   tools: {
     babel(config, { modifyPresetEnvOptions }) {
       modifyPresetEnvOptions({
-        targets: "last 2 versions",
+        targets: 'last 2 versions',
       });
     },
   },
@@ -173,9 +173,9 @@ export default {
     babel(config, { modifyPresetEnvOptions }) {
       modifyPresetEnvOptions({
         targets: {
-          chrome: "58",
-          ie: "11"
-        }
+          chrome: '58',
+          ie: '11',
+        },
       });
     },
   },
@@ -210,7 +210,7 @@ Deprecated, please use [source.exclude](https://modernjs.dev/en/configure/app/so
 
 ### Debugging Babel Configuration
 
-After modifying the `babel-loader` configuration through `tools.babel`, you can view the final generated configuration in [Rsbuild debug mode](https://rsbuild.dev/guide/debug/debug-mode).
+After modifying the `babel-loader` configuration through `tools.babel`, you can view the final generated configuration in [Rsbuild debug mode](https://rsbuild.rs/guide/debug/debug-mode).
 
 First, enable debug mode by using the `DEBUG=builder` parameter:
 

package/docs/en/configure/app/tools/bundler-chain.mdx

@@ -21,10 +21,10 @@ You can modify the webpack and Rspack configuration by configuring `tools.bundle
 
 Bundler chain is a subset of webpack chain, which contains part of the webpack chain API that you can use to modify both webpack and Rspack configuration.
 
-Configurations modified via bundler chain will work on both webpack and Rspack builds. Note that the bundler chain only supports modifying the configuration of the non-differentiated parts of webpack and Rspack. For example, modifying the devtool configuration option (webpack and Rspack have the same devtool property value type), or adding an [Rspack-compatible](https://rspack.dev/guide/compatibility/plugin) webpack plugin.
+Configurations modified via bundler chain will work on both webpack and Rspack builds. Note that the bundler chain only supports modifying the configuration of the non-differentiated parts of webpack and Rspack. For example, modifying the devtool configuration option (webpack and Rspack have the same devtool property value type), or adding an [Rspack-compatible](https://rspack.rs/guide/compatibility/plugin) webpack plugin.
 
 :::
 
 > `tools.bundlerChain` is executed earlier than tools.webpackChain / tools.webpack / tools.rspack and thus will be overridden by changes in others.
 
-For more information, please refer to [Rsbuild#tools.bundlerChain](https://rsbuild.dev/config/tools/bundler-chain).
+For more information, please refer to [Rsbuild#tools.bundlerChain](https://rsbuild.rs/config/tools/bundler-chain).

package/docs/en/configure/app/tools/css-extract.mdx

@@ -30,7 +30,7 @@ const defaultOptions = {
 };
 ```
 
-The config of [CssExtractRspackPlugin](https://www.rspack.dev/plugins/rspack/css-extract-rspack-plugin) / [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin) can be modified through `tools.cssExtract`.
+The config of [CssExtractRspackPlugin](https://rspack.rs/plugins/rspack/css-extract-rspack-plugin) / [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin) can be modified through `tools.cssExtract`.
 
 import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
 

package/docs/en/configure/app/tools/dev-server.mdx

@@ -10,7 +10,7 @@ title: devServer
 The config of DevServer can be modified through `tools.devServer`.
 
 :::tip
-Modern.js does not directly use [webpack-dev-server](https://webpack.js.org/api/webpack-dev-server/) or [@rspack/dev-server](https://www.rspack.dev/guide/dev-server.html), but implement DevServer based on [webpack-dev-middleware](https://github.com/webpack/webpack-dev-middleware).
+Modern.js does not directly use [webpack-dev-server](https://webpack.js.org/api/webpack-dev-server/) or [@rspack/dev-server](https://rspack.rs/guide/dev-server.html), but implement DevServer based on [webpack-dev-middleware](https://github.com/webpack/webpack-dev-middleware).
 :::
 
 ### Options

package/docs/en/configure/app/tools/lightningcss-loader.mdx

@@ -8,7 +8,7 @@ title: lightningcssLoader
 - **Default:** `Rspack.LightningcssLoaderOptions | Function | boolean`
 - **Bundler:** `only support rspack`
 
-You can configure [builtin:lightningcss-loader](https://rspack.dev/guide/features/builtin-lightningcss-loader) through `tools.lightningcssLoader`.
+You can configure [builtin:lightningcss-loader](https://rspack.rs/guide/features/builtin-lightningcss-loader) through `tools.lightningcssLoader`.
 
 ## Enable loader
 

package/docs/en/configure/app/tools/rspack.mdx

@@ -7,7 +7,7 @@ title: rspack
 - **Type:** `Rspack.Configuration | Function | undefined`
 - **Default:** `undefined`
 
-`tools.rspack` is used to configure [Rspack](https://rspack.dev/).
+`tools.rspack` is used to configure [Rspack](https://rspack.rs/).
 
 import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
 

package/docs/en/configure/app/tools/swc.mdx

@@ -19,7 +19,7 @@ When using Rspack as the bundler, SWC will be used for transpiling and compressi
 
 ## Used in Rspack mode
 
-You can set the options of [builtin:swc-loader](https://rspack.dev/guide/features/builtin-swc-loader) through `tools.swc`.
+You can set the options of [builtin:swc-loader](https://rspack.rs/guide/features/builtin-swc-loader) through `tools.swc`.
 
 ```ts
 import { defineConfig } from '@modern-js/app-tools';
@@ -35,7 +35,7 @@ export default defineConfig<'rspack'>({
 });
 ```
 
-For more usage, please refer to [Rsbuild - tools.swc](https://rsbuild.dev/config/tools/swc).
+For more usage, please refer to [Rsbuild - tools.swc](https://rsbuild.rs/config/tools/swc).
 
 ### Register SWC Plugin
 
@@ -66,7 +66,7 @@ This means that you must to choose an SWC plugin that matches the current versio
 
 If you encounter the above issues, a common solution is to upgrade both the Modern.js and SWC plugins to the latest versions.
 
-For details, please refer to [Rsbuild - SWC Plugin Version](https://rsbuild.dev/guide/basic/configure-swc#swc-plugin-version).
+For details, please refer to [Rsbuild - SWC Plugin Version](https://rsbuild.rs/guide/basic/configure-swc#swc-plugin-version).
 
 ## Used in Webpack mode
 

package/docs/en/configure/app/tools/terser.mdx

@@ -4,6 +4,10 @@ title: terser
 
 # tools.terser
 
+import { Badge } from '@theme';
+
+<Badge type="danger" >Webpack Only</Badge>
+
 - **Type:** `Object | Function | undefined`
 - **Default:**
 
@@ -17,8 +21,6 @@ const defaultTerserOptions = {
 };
 ```
 
-- **Bundler:** `only support webpack`
-
 When building for production, Modern.js will minimize the JavaScript code through [terser-webpack-plugin](https://github.com/webpack-contrib/terser-webpack-plugin). The config of [terser-webpack-plugin](https://github.com/webpack-contrib/terser-webpack-plugin) can be modified via `tools.terser`.
 
 ### Object Type

package/docs/en/configure/app/tools/ts-loader.mdx

@@ -4,9 +4,12 @@ title: tsLoader
 
 # tools.tsLoader
 
+import { Badge } from '@theme';
+
+<Badge type="danger" >Webpack Only</Badge>
+
 - **Type:** `Object | Function | undefined`
 - **Default:** `undefined`
-- **Bundler:** `only support webpack`
 
 :::warning Deprecated
 

package/docs/en/configure/app/tools/webpack-chain.mdx

@@ -4,9 +4,12 @@ title: webpackChain
 
 # tools.webpackChain
 
+import { Badge } from '@theme';
+
+<Badge type="danger">Webpack Only</Badge>
+
 - **Type:** `Function | undefined`
 - **Default:** `undefined`
-- **Bundler:** `only support webpack`
 
 You can modify the webpack configuration by configuring `tools.webpackChain` which is type of `Function`. The function receives two parameters, the first is the original webpack chain object, and the second is an object containing some utils.
 
@@ -150,23 +153,23 @@ For example, the `RULE.STYLUS` rule exists only when the Stylus plugin is regist
 
 #### CHAIN_ID.RULE
 
-| ID            | Description                                                                                 |
-| ------------- | ------------------------------------------------------------------------------------------- |
-| `RULE.JS`     | Rule for `js`                                                                               |
-| `RULE.TS`     | Rule for `ts`                                                                               |
-| `RULE.CSS`    | Rule for `css`                                                                              |
-| `RULE.LESS`   | Rule for `less`                                                                             |
-| `RULE.SASS`   | Rule for `sass`                                                                             |
-| `RULE.STYLUS` | Rule for `stylus`(requires [Stylus plugin](https://rsbuild.dev/plugins/list/plugin-stylus)) |
-| `RULE.SVG`    | Rule for `svg`                                                                              |
-| `RULE.PUG`    | Rule for `pug`                                                                              |
-| `RULE.TOML`   | Rule for `toml`                                                                             |
-| `RULE.YAML`   | Rule for `yaml`                                                                             |
-| `RULE.WASM`   | Rule for `WASM`                                                                             |
-| `RULE.NODE`   | Rule for `node`                                                                             |
-| `RULE.FONT`   | Rule for `font`                                                                             |
-| `RULE.IMAGE`  | Rule for `image`                                                                            |
-| `RULE.MEDIA`  | Rule for `media`                                                                            |
+| ID            | Description                                                                                |
+| ------------- | ------------------------------------------------------------------------------------------ |
+| `RULE.JS`     | Rule for `js`                                                                              |
+| `RULE.TS`     | Rule for `ts`                                                                              |
+| `RULE.CSS`    | Rule for `css`                                                                             |
+| `RULE.LESS`   | Rule for `less`                                                                            |
+| `RULE.SASS`   | Rule for `sass`                                                                            |
+| `RULE.STYLUS` | Rule for `stylus`(requires [Stylus plugin](https://rsbuild.rs/plugins/list/plugin-stylus)) |
+| `RULE.SVG`    | Rule for `svg`                                                                             |
+| `RULE.PUG`    | Rule for `pug`                                                                             |
+| `RULE.TOML`   | Rule for `toml`                                                                            |
+| `RULE.YAML`   | Rule for `yaml`                                                                            |
+| `RULE.WASM`   | Rule for `WASM`                                                                            |
+| `RULE.NODE`   | Rule for `node`                                                                            |
+| `RULE.FONT`   | Rule for `font`                                                                            |
+| `RULE.IMAGE`  | Rule for `image`                                                                           |
+| `RULE.MEDIA`  | Rule for `media`                                                                           |
 
 #### CHAIN_ID.ONE_OF
 
@@ -243,4 +246,4 @@ For example, the `RULE.STYLUS` rule exists only when the Stylus plugin is regist
 
 ### Examples
 
-For usage examples, please refer to: [Rsbuild - bundlerChain examples](https://rsbuild.dev/guide/basic/configure-rspack#examples).
+For usage examples, please refer to: [Rsbuild - bundlerChain examples](https://rsbuild.rs/guide/basic/configure-rspack#examples).

package/docs/en/configure/app/tools/webpack.mdx

@@ -4,9 +4,12 @@ title: webpack
 
 # tools.webpack
 
+import { Badge } from '@theme';
+
+<Badge type="danger" >Webpack Only</Badge>
+
 - **Type:** `Object | Function | undefined`
 - **Default:** `undefined`
-- **Bundler:** `only support webpack`
 
 `tools.webpack` is used to configure [webpack](https://webpack.js.org/).
 

package/docs/en/guides/advanced-features/build-performance.mdx

@@ -24,7 +24,7 @@ If you are not using Rspack yet, you can switch to Rspack build mode to improve
 
 In general, updating Node.js to the latest [LTS release](https://github.com/nodejs/release#release-schedule) will help improve build performance.
 
-Especially for devices with Apple M1/M2 chips, it is recommended to use Node 18.
+Especially for devices with Apple M1/M2 chips, it is recommended to use at least Node 18.
 
 Node >= 16 provides Apple Silicon binaries by default, so the performance on M1/M2 models will be greatly improved than Node 14. According to our tests, **After switching from Node 14 to Node >= 16, the compilation speed can be improved by more than 100%**.
 

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

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

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

@@ -59,12 +59,12 @@ For example, if you only need to be compatible with browsers above Chrome 61, yo
 ```
 
 :::tip
-Please read the [Browserslist](https://rsbuild.dev/guide/advanced/browserslist) chapter to know more about the usage of Browserslist.
+Please read the [Browserslist](https://rsbuild.rs/guide/advanced/browserslist) chapter to know more about the usage of Browserslist.
 :::
 
 ## Usage polyfill
 
-When it is clear that third-party dependencies do not require additional polyfill, you can set [output.polyfill](/configure/app/output/polyfill.html) to `usage`.
+When it is clear that third-party dependencies do not require additional polyfills, you can set [output.polyfill](/configure/app/output/polyfill.html) to `usage`.
 
 In `usage` mode, Modern.js analyzes the syntax used in the source code and injects the required polyfill code on demand to reduce the size of polyfill.
 
@@ -98,7 +98,7 @@ See details in [plugin-image-compress](https://github.com/rspack-contrib/rsbuild
 
 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://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.
+A variety of [chunk splitting strategies](https://rsbuild.rs/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

@@ -72,7 +72,7 @@ export default {
 
 ## Modify transpile configuration
 
-Modern.js uses Rspack [builtin:swc-loader](https://rspack.dev/guide/features/builtin-swc-loader) for code translation in Rspack mode.
+Modern.js uses Rspack [builtin:swc-loader](https://rspack.rs/guide/features/builtin-swc-loader) for code translation in Rspack mode.
 
 Modern.js has provided a more convenient configuration for the common configuration of `builtin:swc-loader`, such as: configuring the component library to import it on demand through [source.transformImport](/configure/app/source/transform-import).
 
@@ -102,7 +102,7 @@ Usually, the latest version of Rspack will be integrated into Modern.js. You can
 
 However, Modern.js uses a locked version dependency method (non-automatic upgrade) for Rspack. Due to differences in release cycles, the version of Rspack integrated into Modern.js may be behind the latest version of Rspack.
 
-When Rspack is enabled for building through dev / build, the current version of Rspack used in the framework will be printed automatically when [debugging mode](https://rsbuild.dev/guide/debug/debug-mode) is turned on:
+When Rspack is enabled for building through dev / build, the current version of Rspack used in the framework will be printed automatically when [debugging mode](https://rsbuild.rs/guide/debug/debug-mode) is turned on:
 
 ![rspack_version_log](https://lf3-static.bytednsdoc.com/obj/eden-cn/6221eh7uhbfvhn/modern/20240110-155444.png)
 

package/docs/en/guides/advanced-features/web-server.mdx

@@ -12,10 +12,15 @@ Modern.js encapsulates most server-side capabilities required by projects, typic
 You must ensure that the Modern.js version is x.67.5 or above.
 :::
 
-To start a custom web server, the following steps need to be taken:
-1. Add and install the dependencies `@modern-js/server-runtime` and `ts-node` to `devDependencies`.
-2. Add `server` to the `include` section of `tsconfig`.
-3. Create a file `server/modern.server.ts` in the project directory, where you can write custom logic.
+Developers can execute the `pnpm run new` command in the project root directory to start the "Custom Web Server" feature:
+
+```bash
+? Select operation: Create project element
+? Select element type: Create "Custom Web Server" source directory
+```
+
+After executing the command, a `server/modern.server.ts` file will be automatically created in the project directory, where you can write custom logic.
+
 
 ## Capabilities of the Custom Web Server
 
@@ -230,6 +235,13 @@ export default () => {
 The legacy API is compatible but no longer recommended. For extending server capabilities, please refer to [Custom Web Server](/guides/advanced-features/web-server.html#custom-web-server). For migration guidelines, see [Migrating to the New Version of Custom Web Server](/guides/advanced-features/web-server.html#migrate-to-the-new-version-of-custom-web-server).
 :::
 
+### Enable
+To enable the custom Web Server feature, follow these steps:
+1. Add `@modern-js/plugin-server`、`tsconfig-paths` and `ts-node` to `devDependencies` and install them.
+2. Add `server` to the `include` section of `tsconfig`.
+3. Register the `@modern-js/plugin-server` plugin in `modern.config.ts`.
+4. Create a `server/index.ts` file in the project directory, where you can write custom logic.
+
 ### Unstable Middleware
 
 Modern.js supports adding rendering middleware to the Web Server, allowing custom logic execution before and after processing page routes.