@modern-js/main-doc 2.67.6 → 2.67.8

package/docs/en/tutorials/examples/csr-auth.mdx

@@ -12,203 +12,20 @@ In a web application, if there are multiple routes, we may need to authorize acc
 - Access to the `/protected` route requires authorization. If there is no authorization, it will automatically redirect to the `/login` route. After successful login, it returns to `/protected`.
 
 import Sandpack from '@site/src/components/Sandpack';
+import srcRoutesPageText from '../../../../src/sandbox/csr-auth/src/routes/page-tsx.txt';
+import srcRoutesLayoutText from '../../../../src/sandbox/csr-auth/src/routes/layout-tsx.txt';
+import srcRoutesAuthText from '../../../../src/sandbox/csr-auth/src/routes/Auth-tsx.txt';
+import srcRoutesFakeAuthText from '../../../../src/sandbox/csr-auth/src/routes/fakeAuth-ts.txt';
+import srcRoutesProtectedPageText from '../../../../src/sandbox/csr-auth/src/routes/protected/page-tsx.txt';
+import srcRoutesLoginPageText from '../../../../src/sandbox/csr-auth/src/routes/login/page-tsx.txt';
+
+<Sandpack template="web-app" files={{
+  '/src/routes/page.tsx': srcRoutesPageText,
+  '/src/routes/layout.tsx': srcRoutesLayoutText,
+  '/src/routes/Auth.tsx': srcRoutesAuthText,
+  '/src/routes/fakeAuth.ts': srcRoutesFakeAuthText,
+  '/src/routes/protected/page.tsx': srcRoutesProtectedPageText,
+  '/src/routes/login/page.tsx': srcRoutesLoginPageText,
+}}>
 
-<Sandpack template="web-app">
-```tsx title="src/routes/page.tsx"
-import { Helmet } from '@modern-js/runtime/head';
-import './index.css';
-
-const PublicPage = (): JSX.Element => (
-  <div className="container-box">
-    <Helmet>
-      <link
-        rel="icon"
-        type="image/x-icon"
-        href="https://lf3-static.bytednsdoc.com/obj/eden-cn/uhbfnupenuhf/favicon.ico"
-      />
-    </Helmet>
-    <h3>Public</h3>
-  </div>
-);
-
-export default PublicPage;
-
-```
-```tsx title="src/routes/layout.tsx"
-import { Link, Outlet } from '@modern-js/runtime/router';
-import { AuthProvider, AuthStatus } from './Auth';
-
-export default function Layout() {
-  return (
-    <AuthProvider>
-      <AuthStatus />
-
-      <ul>
-        <li>
-          <Link to="/">Public Page</Link>
-        </li>
-        <li>
-          <Link to="/protected">Protected Page</Link>
-        </li>
-      </ul>
-
-      <Outlet />
-    </AuthProvider>
-  );
-}
-
-```
-```ts title="src/routes/fakeAuth.ts"
-/**
- * This represents some generic auth provider API, like Firebase.
- */
-const fakeAuthProvider = {
-  isAuthenticated: false,
-  signin(callback: VoidFunction) {
-    fakeAuthProvider.isAuthenticated = true;
-    setTimeout(callback, 100); // fake async
-  },
-  signout(callback: VoidFunction) {
-    fakeAuthProvider.isAuthenticated = false;
-    setTimeout(callback, 100);
-  },
-};
-
-export { fakeAuthProvider };
-
-```
-```ts title="src/routes/Auth.tsx"
-import React from 'react';
-import { useNavigate, Navigate, useLocation } from '@modern-js/runtime/router';
-import { fakeAuthProvider } from './fakeAuth';
-
-interface AuthContextType {
-  user: any;
-  signin: (user: string, callback: VoidFunction) => void;
-  signout: (callback: VoidFunction) => void;
-}
-
-const AuthContext = React.createContext<AuthContextType>(null!);
-
-export function AuthProvider({ children }: { children: React.ReactNode }) {
-  const [user, setUser] = React.useState<any>(null);
-
-  const signin = (newUser: string, callback: VoidFunction) =>
-    fakeAuthProvider.signin(() => {
-      setUser(newUser);
-      callback();
-    });
-
-  const signout = (callback: VoidFunction) =>
-    fakeAuthProvider.signout(() => {
-      setUser(null);
-      callback();
-    });
-
-  const value = { user, signin, signout };
-
-  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
-}
-
-export function useAuth() {
-  return React.useContext(AuthContext);
-}
-
-export function AuthStatus() {
-  const auth = useAuth();
-  console.log('auth', auth);
-  const navigate = useNavigate();
-
-  if (!auth.user) {
-    return <p>You are not logged in.</p>;
-  }
-
-  return (
-    <p>
-      Welcome {auth.user}!{' '}
-      <button
-        type="button"
-        onClick={() => {
-          auth.signout(() => navigate('/'));
-        }}
-      >
-        Sign out
-      </button>
-    </p>
-  );
-}
-
-export function RequireAuth({ children }: { children: JSX.Element }) {
-  const auth = useAuth();
-  const location = useLocation();
-
-  if (!auth.user) {
-    // Redirect them to the /login page, but save the current location they were
-    // trying to go to when they were redirected. This allows us to send them
-    // along to that page after they login, which is a nicer user experience
-    // than dropping them off on the home page.
-    return <Navigate to="/login" state={{ from: location }} replace />;
-  }
-
-  return children;
-}
-
-```
-```ts title="src/routes/protected/page.tsx"
-import { RequireAuth } from '../Auth';
-
-export default function ProtectedPage() {
-  return (
-    <div className="container-box">
-      <RequireAuth>
-        <h3>Protected</h3>
-      </RequireAuth>
-    </div>
-  );
-}
-
-```
-```ts title="src/routes/login/page.tsx"
-import { useLocation, useNavigate } from '@modern-js/runtime/router';
-import { useAuth } from '../Auth';
-
-export default function Login() {
-  const navigate = useNavigate();
-  const location = useLocation();
-  const auth = useAuth();
-
-  const from = location.state?.from?.pathname || '/';
-
-  function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
-    event.preventDefault();
-
-    const formData = new FormData(event.currentTarget);
-    const username = formData.get('username') as string;
-
-    auth.signin(username, () => {
-      // Send them back to the page they tried to visit when they were
-      // redirected to the login page. Use { replace: true } so we don't create
-      // another entry in the history stack for the login page.  This means that
-      // when they get to the protected page and click the back button, they
-      // won't end up back on the login page, which is also really nice for the
-      // user experience.
-      navigate(from, { replace: true });
-    });
-  }
-
-  return (
-    <div>
-      <p>You must log in to view the page at {from}</p>
-
-      <form onSubmit={handleSubmit}>
-        <label>
-          Username: <input name="username" type="text" />
-        </label>{' '}
-        <button type="submit">Login</button>
-      </form>
-    </div>
-  );
-}
-
-```
 </Sandpack>

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

@@ -154,7 +154,7 @@ pnpm 暂不支持使用 JSON 字符串作为参数值，可使用 `npm new` 开
 
 :::
 
-import ServeCommand from "@site-docs/components/serve-command";
+import ServeCommand from '@site-docs/components/serve-command';
 
 <ServeCommand />
 
@@ -175,7 +175,7 @@ Options:
 
 ## modern inspect
 
-`modern inspect` 命令用于查看项目的 [Rsbuild 配置](https://rsbuild.dev/zh/config/index) 以及 webpack 或 Rspack 配置。
+`modern inspect` 命令用于查看项目的 [Rsbuild 配置](https://rsbuild.rs/zh/config/index) 以及 webpack 或 Rspack 配置。
 
 ```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/components/deploy-command";
+import DeployCommand from '@site-docs/components/deploy-command';
 
 <DeployCommand />

package/docs/zh/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/zh/community/contributing-guide.mdx

@@ -189,7 +189,7 @@ root
        └─ module-doc     # Modern.js Module 文档
 ```
 
-文档站使用 Rspress 构建，文档内容可以使用 markdown 或 mdx 语法编写。详细使用方法可以参考 [Rspress 文档](https://rspress.dev/)。
+文档站使用 Rspress 构建，文档内容可以使用 markdown 或 mdx 语法编写。详细使用方法可以参考 [Rspress 文档](https://rspress.rs/)。
 
 Rspress 的源代码可以在 [这个仓库](https://github.com/web-infra-dev/rspress) 中找到。
 

package/docs/zh/components/builder.mdx

@@ -1,3 +1,3 @@
 Builder 指的是 Modern.js 的构建层，它的目标是为 Modern.js 用户提供开箱即用的构建能力，并支持在 webpack 和 Rspack 间无缝切换。
 
-Modern.js `MAJOR_VERSION.46.0` 之前版本使用的是 `@modern-js/builder`, 从 `MAJOR_VERSION.46.0` 开始升级为 [Rsbuild](https://rsbuild.dev/)。
+Modern.js `MAJOR_VERSION.46.0` 之前版本使用的是 `@modern-js/builder`, 从 `MAJOR_VERSION.46.0` 开始升级为 [Rsbuild](https://rsbuild.rs/)。

package/docs/zh/components/bundler.mdx

@@ -1,4 +1,3 @@
-
-指 [webpack](https://webpack.js.org/)、[Rspack](https://www.rspack.dev/) 等模块打包工具。
+指 [webpack](https://webpack.js.org/)、[Rspack](https://rspack.rs/) 等模块打包工具。
 
 打包工具的主要目标是将 JavaScript、CSS 等文件打包在一起，打包后的文件可以在浏览器、Node.js 等环境中使用。当 Bundler 处理 Web 应用时，它会构建一个依赖关系图，其中包含应用需要的各个模块，然后将所有模块打包成一个或多个 bundle。

package/docs/zh/components/rsbuild.mdx

@@ -1,3 +1,3 @@
-[Rsbuild](https://rsbuild.dev/) 是一个基于 Rspack 的 web 构建工具，它的目标是为 Rspack 用户提供开箱即用的构建能力，使开发者能够在零配置的情况下启动一个 web 项目。
+[Rsbuild](https://rsbuild.rs/) 是一个基于 Rspack 的 web 构建工具，它的目标是为 Rspack 用户提供开箱即用的构建能力，使开发者能够在零配置的情况下启动一个 web 项目。
 
 Rsbuild 集成了社区中基于 Rust 的高性能工具，包括 Rspack 和 SWC，以提供一流的构建速度和开发体验。

package/docs/zh/components/rspack.mdx

@@ -1,3 +1,3 @@
-[Rspack](https://www.rspack.dev/) 是一个基于 Rust 编写的高性能 JavaScript 打包工具， 它提供对 webpack 生态良好的兼容性，能够无缝替换 webpack， 并提供闪电般的构建速度。
+[Rspack](https://rspack.rs/) 是一个基于 Rust 编写的高性能 JavaScript 打包工具， 它提供对 webpack 生态良好的兼容性，能够无缝替换 webpack， 并提供闪电般的构建速度。
 
 相较于 webpack，Rspack 的构建性能有明显提升，除了 Rust 带来的语言优势，这也来自于它的并行架构和增量编译等特性。经过 benchmark 验证，Rspack 可以带来 5 ～ 10 倍编译性能的提升。

package/docs/zh/components/rspackPrecautions.mdx

@@ -2,5 +2,5 @@
 
 在使用 Rspack 前，你需要了解以下事项：
 
-- Rspack 能够兼容大部分 webpack 插件和几乎所有的 loaders，但仍有少数 webpack 插件暂时无法使用，详见 [Plugin 兼容](https://rspack.dev/zh/guide/compatibility/plugin)。
-- Rspack 默认基于 [SWC](https://rspack.dev/zh/guide/features/builtin-swc-loader) 进行代码编译和压缩，在个别情况下，你可能会遇到 SWC 在边界场景的 bug，可以通过 [SWC 的 issue](https://github.com/swc-project/swc/issues) 反馈。
+- Rspack 能够兼容大部分 webpack 插件和几乎所有的 loaders，但仍有少数 webpack 插件暂时无法使用，详见 [Plugin 兼容](https://rspack.rs/zh/guide/compatibility/plugin)。
+- Rspack 默认基于 [SWC](https://rspack.rs/zh/guide/features/builtin-swc-loader) 进行代码编译和压缩，在个别情况下，你可能会遇到 SWC 在边界场景的 bug，可以通过 [SWC 的 issue](https://github.com/swc-project/swc/issues) 反馈。

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

@@ -11,7 +11,7 @@ sidebar_position: 21
 
 Rsbuild 是 Modern.js 底层的构建工具，请阅读 [构建能力](/guides/concept/builder) 了解相关背景。
 
-如果你想了解 Rsbuild 插件的编写方式，可以参考 [Rsbuild - 插件系统](https://rsbuild.dev/zh/plugins/dev/index)。
+如果你想了解 Rsbuild 插件的编写方式，可以参考 [Rsbuild - 插件系统](https://rsbuild.rs/zh/plugins/dev/index)。
 
 ## 注意事项
 

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

@@ -76,4 +76,4 @@ export default {
 
 如果 `cdn2.com` 的资源也请求失败，则会继续请求 `cdn3.com`。
 
-`assetsRetry` 是基于 Rsbuild 的 Assets Retry 插件实现的，并提供相同的配置项。你可以参考 [Rsbuild - Assets Retry 插件](https://rsbuild.dev/zh/plugins/list/plugin-assets-retry#%E9%80%89%E9%A1%B9) 来了解所有可用的配置项。
+`assetsRetry` 是基于 Rsbuild 的 Assets Retry 插件实现的，并提供相同的配置项。你可以参考 [Rsbuild - Assets Retry 插件](https://rsbuild.rs/zh/plugins/list/plugin-assets-retry#%E9%80%89%E9%A1%B9) 来了解所有可用的配置项。

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

@@ -7,7 +7,7 @@ title: copy
 - **类型：** `Rspack.CopyRspackPluginOptions | Rspack.CopyRspackPluginOptions['patterns']`
 - **默认值：** `undefined`
 
-将指定的文件或目录拷贝到构建输出目录中，基于 [rspack.CopyRspackPlugin](https://rspack.dev/zh/plugins/rspack/copy-rspack-plugin) 实现。
+将指定的文件或目录拷贝到构建输出目录中，基于 [rspack.CopyRspackPlugin](https://rspack.rs/zh/plugins/rspack/copy-rspack-plugin) 实现。
 
 import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 

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

@@ -38,7 +38,7 @@ export default {
 };
 ```
 
-需要注意的是，Rspack 的持久化缓存处于[实验性阶段](https://rspack.dev/zh/config/experiments#experimentscache)，可能会在未来的版本中发生变化，该功能需要手动开启。
+需要注意的是，Rspack 的持久化缓存处于[实验性阶段](https://rspack.rs/zh/config/experiments#experimentscache)，可能会在未来的版本中发生变化，该功能需要手动开启。
 
 import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 

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

@@ -4,9 +4,12 @@ title: transformLodash
 
 # performance.transformLodash
 
+import { Badge } from '@theme';
+
+<Badge type="danger" ><div>仅支持 Webpack</div></Badge>
+
 - **类型：** `boolean`
 - **默认值：** `true`
-- **打包工具：** `仅支持 webpack`
 
 是否模块化 [lodash](https://www.npmjs.com/package/lodash) 的导入，删除未使用的 lodash 模块，从而减少 lodash 代码体积。
 

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

@@ -19,7 +19,7 @@ type SriOptions = {
 为 HTML 所引入的 `<script>` 和 `<link rel="stylesheet">` 标签添加完整性属性 —— `integrity`，使浏览器能够验证引入资源的完整性，以此防止下载的资源被篡改。
 
 :::info
-SRI 的具体介绍可以参考 [Rsbuild security.sri](https://rsbuild.dev/zh/config/security/sri)。
+SRI 的具体介绍可以参考 [Rsbuild security.sri](https://rsbuild.rs/zh/config/security/sri)。
 
 该配置类型和 Rsbuild 不完全一致，在构建时将自动进行转换。
 :::

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

@@ -4,10 +4,10 @@ title: exclude
 
 # source.exclude
 
-- **类型：** [RuleSetCondition[]](https://rspack.dev/zh/config/module#condition)
+- **类型：** [RuleSetCondition[]](https://rspack.rs/zh/config/module#condition)
 - **默认值：** `[]`
 
-指定不需要编译的 JavaScript/TypeScript 文件。用法与 Rspack 中的 [Rule.exclude](https://rspack.dev/zh/config/module#ruleexclude) 一致，支持传入字符串或正则表达式来匹配模块的路径。
+指定不需要编译的 JavaScript/TypeScript 文件。用法与 Rspack 中的 [Rule.exclude](https://rspack.rs/zh/config/module#ruleexclude) 一致，支持传入字符串或正则表达式来匹配模块的路径。
 
 import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 

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

@@ -4,7 +4,7 @@ title: include
 
 # source.include
 
-- **类型：** [RuleSetCondition[]](https://rspack.dev/zh/config/module#condition)
+- **类型：** [RuleSetCondition[]](https://rspack.rs/zh/config/module#condition)
 - **默认值：**
 
 ```ts

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

@@ -4,9 +4,12 @@ title: moduleScopes
 
 # source.moduleScopes
 
+import { Badge } from '@theme';
+
+<Badge type="danger" >仅支持 Webpack</Badge>
+
 - **类型：** `Array<string | Regexp> | Function`
 - **默认值：** `undefined`
-- **打包工具：** `仅支持 webpack`
 
 限制源代码的引用路径。配置该选项后，所有源文件只能从约定的目录下引用代码，从其他目录引用代码会产生对应的报错提示。
 

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

@@ -74,12 +74,12 @@ export default {
 };
 ```
 
-你也可以使用 `transformImport` 的 [function 用法](https://rsbuild.dev/zh/config/source/transform-import#function-%E7%B1%BB%E5%9E%8B) 对默认配置进行自定义修改。
+你也可以使用 `transformImport` 的 [function 用法](https://rsbuild.rs/zh/config/source/transform-import#function-%E7%B1%BB%E5%9E%8B) 对默认配置进行自定义修改。
 
 ```js
 export default {
   source: {
-    transformImport: (imports) => {
+    transformImport: imports => {
       return imports.filter(data => data.libraryName !== 'antd');
     },
   },

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

@@ -159,7 +159,7 @@ export default {
   tools: {
     babel(config, { modifyPresetEnvOptions }) {
       modifyPresetEnvOptions({
-        targets: "last 2 versions",
+        targets: 'last 2 versions',
       });
     },
   },
@@ -172,9 +172,9 @@ export default {
     babel(config, { modifyPresetEnvOptions }) {
       modifyPresetEnvOptions({
         targets: {
-          chrome: "58",
-          ie: "11"
-        }
+          chrome: '58',
+          ie: '11',
+        },
       });
     },
   },
@@ -209,7 +209,7 @@ export default {
 
 ### 调试 Babel 配置
 
-当你通过 `tools.babel` 修改 `babel-loader` 配置后，可以在 [调试模式](https://rsbuild.dev/zh/guide/debug/debug-mode) 下查看最终生成的配置。
+当你通过 `tools.babel` 修改 `babel-loader` 配置后，可以在 [调试模式](https://rsbuild.rs/zh/guide/debug/debug-mode) 下查看最终生成的配置。
 
 首先通过 `DEBUG=builder` 参数开启调试模式：
 
@@ -222,4 +222,3 @@ DEBUG=builder pnpm build
 ```
 
 然后打开生成的 `(webpack|rspack).config.web.js`，搜索 `babel-loader` 关键词，即可看到完整的 `babel-loader` 配置内容。
-

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

@@ -24,10 +24,10 @@ type BundlerChainFn = (
 
 Bundler chain 是 webpack chain 的子集，其中包含一部分 webpack chain API，你可以用它来同时修改 webpack 和 Rspack 的配置。
 
-通过 bundler chain 修改的配置，在 webpack 和 Rspack 构建时均可生效。需要注意的是，bundler chain 只支持修改 webpack 和 Rspack 间无差异部分的配置。如，修改 devtool 配置项(webpack 和 Rspack 的 devtool 属性值类型相同)，或添加一个[Rspack 兼容](https://rspack.dev/zh/guide/compatibility/plugin)的 webpack 插件。
+通过 bundler chain 修改的配置，在 webpack 和 Rspack 构建时均可生效。需要注意的是，bundler chain 只支持修改 webpack 和 Rspack 间无差异部分的配置。如，修改 devtool 配置项(webpack 和 Rspack 的 devtool 属性值类型相同)，或添加一个[Rspack 兼容](https://rspack.rs/zh/guide/compatibility/plugin)的 webpack 插件。
 
 :::
 
 > `tools.bundlerChain` 的执行时机早于 tools.webpackChain / tools.webpack / tools.rspack，因此会被其他几个配置中的修改所覆盖。
 
-更多信息可参考 [Rsbuild#tools.bundlerChain](https://rsbuild.dev/zh/config/tools/bundler-chain)。
+更多信息可参考 [Rsbuild#tools.bundlerChain](https://rsbuild.rs/zh/config/tools/bundler-chain)。

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

@@ -27,7 +27,7 @@ const defaultOptions = {
 };
 ```
 
-通过 `tools.cssExtract` 可以更改 [CssExtractRspackPlugin](https://www.rspack.dev/zh/plugins/rspack/css-extract-rspack-plugin) 或 [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin) 的配置。
+通过 `tools.cssExtract` 可以更改 [CssExtractRspackPlugin](https://rspack.rs/zh/plugins/rspack/css-extract-rspack-plugin) 或 [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin) 的配置。
 
 import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 

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

@@ -10,7 +10,7 @@ title: devServer
 通过 `tools.devServer` 可以修改开发环境服务器的配置。
 
 :::tip
-Modern.js 中并没有直接使用 [webpack-dev-server](https://webpack.js.org/api/webpack-dev-server/) 或 [@rspack/dev-server](https://www.rspack.dev/guide/dev-server.html), 而是基于 [webpack-dev-middleware](https://github.com/webpack/webpack-dev-middleware) 实现 DevServer。
+Modern.js 中并没有直接使用 [webpack-dev-server](https://webpack.js.org/api/webpack-dev-server/) 或 [@rspack/dev-server](https://rspack.rs/guide/dev-server.html), 而是基于 [webpack-dev-middleware](https://github.com/webpack/webpack-dev-middleware) 实现 DevServer。
 :::
 
 ### 选项

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

@@ -8,7 +8,7 @@ title: lightningcssLoader
 - **默认值：** `false`
 - **打包工具：** `仅支持 rspack`
 
-通过 `tools.lightningcssLoader` 可以设置 [builtin:lightningcss-loader](https://rspack.dev/guide/features/builtin-lightningcss-loader) 的选项。
+通过 `tools.lightningcssLoader` 可以设置 [builtin:lightningcss-loader](https://rspack.rs/guide/features/builtin-lightningcss-loader) 的选项。
 
 ## 开启 loader
 

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

@@ -7,7 +7,7 @@ title: rspack
 - **类型：** `Rspack.Configuration | Function | undefined`
 - **默认值：** `undefined`
 
-`tools.rspack` 选项用于修改 [Rspack](https://rspack.dev/) 的配置项。
+`tools.rspack` 选项用于修改 [Rspack](https://rspack.rs/) 的配置项。
 
 import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 

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

@@ -19,7 +19,7 @@ import SWC from '@site-docs/components/swc.mdx';
 
 ## 在 Rspack 模式下使用
 
-通过 `tools.swc` 可以设置 Rspack [builtin:swc-loader](https://rspack.dev/zh/guide/features/builtin-swc-loader) 的选项。
+通过 `tools.swc` 可以设置 Rspack [builtin:swc-loader](https://rspack.rs/zh/guide/features/builtin-swc-loader) 的选项。
 
 ```ts
 import { defineConfig } from '@modern-js/app-tools';
@@ -35,7 +35,7 @@ export default defineConfig<'rspack'>({
 });
 ```
 
-更多用法可参考 [Rsbuild - tools.swc](https://rsbuild.dev/zh/config/tools/swc)。
+更多用法可参考 [Rsbuild - tools.swc](https://rsbuild.rs/zh/config/tools/swc)。
 
 ### 注册 SWC 插件
 
@@ -66,7 +66,7 @@ export default {
 
 如果你遇到了以上问题，通常可行的解决方法是将 Modern.js 和 SWC 插件都升级到最新版本。
 
-详情可参考 [Rsbuild - SWC 插件版本](https://rsbuild.dev/zh/guide/basic/configure-swc#swc-%E6%8F%92%E4%BB%B6%E7%89%88%E6%9C%AC)。
+详情可参考 [Rsbuild - SWC 插件版本](https://rsbuild.rs/zh/guide/basic/configure-swc#swc-%E6%8F%92%E4%BB%B6%E7%89%88%E6%9C%AC)。
 
 ## 在 Webpack 模式下使用
 

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

@@ -4,6 +4,10 @@ title: terser
 
 # tools.terser
 
+import { Badge } from '@theme';
+
+<Badge type="danger" >仅支持 Webpack</Badge>
+
 - **类型：** `Object | Function | undefined`
 - **默认值：**
 
@@ -17,8 +21,6 @@ const defaultTerserOptions = {
 };
 ```
 
-- **打包工具：** `仅支持 webpack`
-
 在生产环境构建时，Modern.js 会通过 [terser-webpack-plugin](https://github.com/webpack-contrib/terser-webpack-plugin) 对 JavaScript 代码进行压缩优化。可以通过 `tools.terser` 修改 [terser-webpack-plugin](https://github.com/webpack-contrib/terser-webpack-plugin) 的配置。
 
 ### Object 类型

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

@@ -4,9 +4,12 @@ title: tsLoader
 
 # tools.tsLoader
 
+import { Badge } from '@theme';
+
+<Badge type="danger" >仅支持 Webpack</Badge>
+
 - **类型：** `Object | Function | undefined`
 - **默认值：** `undefined`
-- **打包工具：** `仅支持 webpack`
 
 :::warning 废弃提示