docs: clarify output.externals usage (#7497)

Author: chenjiahan

packages/core/src/types/config.ts

@@ -1308,8 +1308,8 @@ export interface OutputConfig {
    */
   target?: RsbuildTarget;
   /**
-   * At build time, prevent some `import` dependencies from being packed into bundles in
-   * your code, and instead fetch them externally at runtime.
+   * Use this option to specify which modules should not be bundled by Rsbuild, and instead
+   * use implementations provided by the external environment.
    * For more information, please see: [Rspack Externals](https://rspack.rs/config/externals)
    * @default undefined
    */

website/docs/en/config/output/externals.mdx

@@ -1,5 +1,5 @@
 ---
-description: 'At build time, prevent some import dependencies from being packed into bundles in your code, and instead fetch them externally at runtime.'
+description: 'Use output.externals to specify which modules should not be bundled by Rsbuild, and instead use implementations provided by the external environment.'
 ---
 
 # output.externals
@@ -17,26 +17,35 @@ type Externals =
 
 - **Default:** `undefined`
 
-At build time, prevent some `import` dependencies from being packed into bundles in your code, and instead fetch them externally at runtime.
+Use this option to specify which modules should not be bundled by Rsbuild, and instead use implementations provided by the external environment.
 
-> For more information, please see: [Rspack Externals](https://rspack.rs/config/externals).
+For example, if your page already loads React from a CDN, or if you're building a library and want consumers to install `react` themselves, you can declare it as an external. This reduces bundle size and avoids including the same dependency twice.
+
+This is commonly used in library development, and is also useful in app scenarios such as loading dependencies from a CDN or relying on dependencies injected by the host environment.
+
+> For more details, see the Rspack [Externals](https://rspack.rs/config/externals) documentation.
 
 ## Examples
 
 ### Basic usage
 
-Exclude the `react-dom` dependency from the output bundle. To get this module at runtime, the value of `react-dom` will globally retrieve the `ReactDOM` variable.
+For example, you can exclude `react-dom` from the output bundle and access the module at runtime through the global `ReactDOM` variable:
 
 ```ts title="rsbuild.config.ts"
 export default {
   output: {
     externals: {
       'react-dom': 'ReactDOM',
+      'react-dom/client': 'ReactDOM',
     },
   },
 };
 ```
 
+Note that string matching for module names is exact. That means you need to explicitly declare subpath imports such as `react-dom/client`.
+
+If you need to match a group of similar import patterns, use [regular expressions](#regular-expressions) or a function for more flexible matching logic.
+
 ### Array format
 
 Use an array to define multiple external configurations:
@@ -88,7 +97,7 @@ Then you can use the external libraries in your source code:
 const response = await window.axios.get('/api/users');
 ```
 
-### RegExp patterns
+### Regular expressions
 
 Use regular expressions to match multiple modules with a pattern:
 

website/docs/zh/config/output/externals.mdx

@@ -1,5 +1,5 @@
 ---
-description: '在构建时，防止将代码中某些 import 的依赖包打包到 bundle 中，而是在运行时再去从外部获取这些依赖。'
+description: 'output.externals 用于指定哪些模块不需要被 Rsbuild 打包，而是直接使用外部环境中提供的实现。'
 ---
 
 # output.externals
@@ -17,26 +17,35 @@ type Externals =
 
 - **默认值：** `undefined`
 
-在构建时，防止将代码中某些 `import` 的依赖包打包到 bundle 中，而是在运行时再去从外部获取这些依赖。
+用于指定哪些模块不需要被 Rsbuild 打包，而是直接使用外部环境中提供的实现。
 
-> 更多用法供参考：[Rspack Externals](https://rspack.rs/zh/config/externals)。
+例如，当页面已经通过 CDN 引入了 React，或你开发的库希望由使用方自行安装 `react` 时，可以将其声明为 external。这可以减少打包产物的体积，同时避免重复引入相同依赖。
+
+该能力常用于库开发场景，同时在应用侧接入 CDN、使用宿主环境注入依赖等场景中也同样适用。
+
+> 更多用法请参考 Rspack 的 [Externals](https://rspack.rs/zh/config/externals) 文档。
 
 ## 示例
 
 ### 基础用法
 
-将 `react-dom` 依赖从构建产物中剔除。为了在运行时获取这个模块, `react-dom` 的值将全局检索 `ReactDOM` 变量。
+例如，将 `react-dom` 从构建产物中排除，并在运行时通过全局变量 `ReactDOM` 来获取该模块：
 
 ```ts title="rsbuild.config.ts"
 export default {
   output: {
     externals: {
       'react-dom': 'ReactDOM',
+      'react-dom/client': 'ReactDOM',
     },
   },
 };
 ```
 
+值得注意的是，当在 `externals` 中以字符串形式指定模块名时，匹配规则为精确匹配。因此需要显式声明 `react-dom/client` 等子路径导入。
+
+如果你需要匹配一组相似的导入形式，可以改用[正则表达式](#正则表达式)，或者使用函数来实现更灵活的匹配逻辑。
+
 ### 数组格式
 
 使用数组来定义多个 `externals` 配置：
@@ -88,7 +97,7 @@ export default {
 const response = await window.axios.get('/api/users');
 ```
 
-### 正则表达式模式
+### 正则表达式
 
 使用正则表达式来匹配具有特定模式的多个模块：