docs(config): update Rule.type with more details (#11503)

* docs(config): update `Rule.type` with more details

* Update website/docs/en/config/module.mdx

Co-authored-by: Copilot <[email protected]>

* fix

---------

Co-authored-by: Copilot <[email protected]>

Author: chenjiahan

website/docs/en/blog/announcing-1-3.mdx

@@ -156,7 +156,7 @@ By utilizing modern JavaScript features supported by the target environment, Rsp
 
 ### Memory improvements
 
-Rspack now defaults to using [mimalloc](https://github.com/microsoft/mimalloc) v3 on macOS. This mitigates some memory consumption issue on macOS during rebuilding. According to some community and internal projects, this would lift the RSS for rebuilding, based on the size of each project, varying from **10% to 85%**。
+Rspack now defaults to using [mimalloc](https://github.com/microsoft/mimalloc) v3 on macOS. This mitigates some memory consumption issue on macOS during rebuilding. According to some community and internal projects, this would lift the RSS for rebuilding, based on the size of each project, varying from **10% to 85%**.
 
 Rspack 1.3 also implemented an internal mechanism to clean the outdated cache: `maxGenerations`. This controls how many compilations would cache survive if it's not being used by the compiler. Rspack sets the default to `1`. This means that the cache will be purged if it's not being used in the next compilation.
 

website/docs/en/config/experiments.mdx

@@ -833,7 +833,7 @@ Please refer to [type reexports presence example](https://github.com/rspack-cont
 
 By default, Rspack uses Watchpack to monitor file changes, which generally works well in most scenarios.
 However, in certain specific environments, issues may arise. For example, Watchpack may experience performance problems when there are a large number of file changes.
-More detail see: [Watchpack issue #233](https://github.com/webpack/watchpack/issues/223)。
+More detail see: [Watchpack issue #233](https://github.com/webpack/watchpack/issues/223).
 
 If you encounter performance issues with the default watcher, you can try enabling nativeWatcher.
 

website/docs/en/config/module.mdx

@@ -1179,7 +1179,7 @@ export default {
 
 - **Type:** `string | ((pathData: PathData, assetInfo?: AssetInfo) => string)`
 - **Default:** `undefined`
-- **Supported Template string：** checkout [`output.assetModuleFilename`](/config/output#outputassetmodulefilename)
+- **Supported Template string:** checkout [`output.assetModuleFilename`](/config/output#outputassetmodulefilename)
 
 Same as `output.assetModuleFilename`. Overrides `output.assetModuleFilename` and only works for `asset` and `asset/resource` module types.
 
@@ -2309,11 +2309,28 @@ There are two phases that all loaders enter one after the other:
 
 ### Rule.type
 
-- **Type:** `'javascript/auto' | 'css' | 'css/module' | 'css/auto' | 'json' | 'asset' | 'asset/source' | 'asset/resource' | 'asset/inline'`
+- **Type:**
+
+```ts
+type RuleType =
+  | 'asset'
+  | 'css'
+  | 'css/auto'
+  | 'css/module'
+  | 'javascript/auto'
+  | 'javascript/dynamic'
+  | 'javascript/esm'
+  | 'json';
+```
 
 Used to mark the type of the matching module, which affects how the module is handled by Rspack's built-in processing.
 
-By default, Rspack will determine the type of the module based on the file extension. For example, `.js` and `.mjs` files will be treated as `javascript/auto` modules, and `.json` files will be treated as `json` modules.
+By default, Rspack will determine the type of the module based on the file extension. For example:
+
+- `.js` files will be treated as `javascript/auto` modules.
+- `.mjs` files, as well as `.js` files in packages with `type="module"` in package.json, will be treated as `javascript/esm` modules.
+- `.json` files will be treated as `json` modules.
+- `.css` files will be treated as `css/auto` modules.
 
 For example, if you want to load a `.json` file through a custom loader, you'd need to set the type to `javascript/auto` to bypass Rspack's built-in JSON importing.
 
@@ -2332,13 +2349,13 @@ export default {
 };
 ```
 
-All `type` options are as follows:
+The meanings of all `type` options are as follows:
 
-- `'javascript/auto'`: JavaScript modules, supported module systems: CommonJS, ES modules.
-- `'javascript/esm'`：JavaScript modules, treated as ES modules.
-- `'javascript/dynamic'`：JavaScript modules, treated as Script.
+- `'javascript/auto'`: JavaScript modules. Rspack automatically determines the module type based on file content, providing the best compatibility.
+- `'javascript/esm'`: JavaScript modules, treated as strict ES modules.
+- `'javascript/dynamic'`: JavaScript modules, treated as Script.
 - `'json'`: JSON data module, see [JSON](/guide/tech/json).
-- `'css' | 'css/module' | 'css/auto'`: CSS module, see [Native CSS Support](/guide/tech/css#native-css-support).
+- `'css' | 'css/module' | 'css/auto'`: CSS module, see [Built-in CSS support](/guide/tech/css#built-in-css-support).
 - `'asset' | 'asset/source' | 'asset/resource' | 'asset/inline'`: Asset module, see [Asset Module](/guide/features/asset-module).
 
 ### Rule.layer

website/docs/en/guide/tech/css.mdx

@@ -160,8 +160,8 @@ document.getElementById('element').className = styles.red;
 
 Rspack provides options to customize the parsing and generation of CSS Modules:
 
-- [module.parser.css](/config/module#moduleparsercss)：Configure the parsing of CSS Modules.
-- [module.generator.css](/config/module#modulegeneratorcss)：Configure the generation of CSS Modules.
+- [module.parser.css](/config/module#moduleparsercss): Configure the parsing of CSS Modules.
+- [module.generator.css](/config/module#modulegeneratorcss): Configure the generation of CSS Modules.
 
 :::
 

website/docs/zh/config/module.mdx

@@ -2304,11 +2304,28 @@ export default {
 
 ### Rule.type
 
-- **类型：** `'javascript/auto' | 'css' | 'css/module' | 'css/auto' | 'json' | 'asset' | 'asset/source' | 'asset/resource' | 'asset/inline'`
+- **类型：**
+
+```ts
+type RuleType =
+  | 'asset'
+  | 'css'
+  | 'css/auto'
+  | 'css/module'
+  | 'javascript/auto'
+  | 'javascript/dynamic'
+  | 'javascript/esm'
+  | 'json';
+```
 
 用于标记匹配的模块的类型，这会影响 Rspack 内置对于该模块的处理方式。
 
-默认情况下，Rspack 会根据文件扩展名来决定模块的类型。例如，`.js` 和 `.mjs` 文件会被当作 `javascript/auto` 模块处理，`.json` 文件会被当作 `json` 模块处理。
+默认情况下，Rspack 会根据文件扩展名来决定模块的类型。例如：
+
+- `.js` 文件会被当作 `javascript/auto` 模块处理。
+- `.mjs` 文件，以及 package.json 中包含 `type="module"` 的 `.js` 文件会被当作 `javascript/esm` 模块处理。
+- `.json` 文件会被当作 `json` 模块处理。
+- `.css` 文件会被当作 `css/auto` 模块处理。
 
 例如，如果你想通过一个自定义 Loader 加载 `.json` 文件，你需要将类型设置为 `javascript/auto` 以绕过 Rspack 内置的 JSON 导入。
 
@@ -2327,13 +2344,13 @@ export default {
 };
 ```
 
-所有 `type` 如下：
+所有 `type` 的含义如下：
 
-- `'javascript/auto'`：JavaScript 模块，支持的模块系统：CommonJS、ES modules。
+- `'javascript/auto'`：JavaScript 模块，Rspack 会根据文件内容自动判断模块类型，兼容性最佳。
 - `'javascript/esm'`：JavaScript 模块，当作严格 ES modules 处理。
 - `'javascript/dynamic'`：JavaScript 模块，当作 Script 处理。
 - `'json'`：JSON data 模块，参考 [JSON](/guide/tech/json)。
-- `'css' | 'css/module' | 'css/auto'`：CSS 模块，参考 [原生 CSS 支持](/guide/tech/css#原生-css-支持)。
+- `'css' | 'css/module' | 'css/auto'`：CSS 模块，参考 [内置 CSS 支持](/guide/tech/css#内置-css-支持)。
 - `'asset' | 'asset/source' | 'asset/resource' | 'asset/inline'`：资源模块，参考 [资源模块](/guide/features/asset-module)。
 
 ### Rule.layer