From 3a3321c62dd8b1089e44d7a70c9f248c0cb611c6 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan.jait@bytedance.com>
Date: Mon, 23 Sep 2024 17:09:06 +0800
Subject: [PATCH] docs: add usecase for `extensionAlias`

---
 website/docs/en/config/resolve.mdx | 11 ++++++++---
 website/docs/zh/config/resolve.mdx | 13 +++++++++----
 2 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/website/docs/en/config/resolve.mdx b/website/docs/en/config/resolve.mdx
index 1731f6632ec..5f2575ab6bc 100644
--- a/website/docs/en/config/resolve.mdx
+++ b/website/docs/en/config/resolve.mdx
@@ -87,8 +87,7 @@ Parse modules in order, e.g. `require('. /index')`, will try to parse `'. /index
 
 Define alias for the extension. e.g.
 
-```js
-// rspack.config.js
+```js title="rspack.config.js"
 module.exports = {
   resolve: {
     extensionAlias: {
@@ -98,7 +97,13 @@ module.exports = {
 };
 ```
 
-`require('./index.js')` will try to parse `'./index.ts'`, `./index.js`.
+This is particularly useful for TypeScript projects, as TypeScript recommends using the `.js` extension to reference TypeScript files.
+
+```ts title="index.ts"
+import { foo } from './foo.js'; // actually refers to `foo.ts`
+```
+
+Rspack will try to resolve `'./foo.ts'` and `./foo.js'` sequentially when resolving `import './foo.js'`.
 
 ## resolve.fallback
 
diff --git a/website/docs/zh/config/resolve.mdx b/website/docs/zh/config/resolve.mdx
index 23c61811d62..ceb1d76e882 100644
--- a/website/docs/zh/config/resolve.mdx
+++ b/website/docs/zh/config/resolve.mdx
@@ -85,10 +85,9 @@ module.exports = {
 - **类型：** `Record<string, string[] | string>`
 - **默认值：** `{}`
 
-定义拓展名的别名，例如
+定义拓展名的别名，例如：
 
-```js
-// rspack.config.js
+```js title="rspack.config.js"
 module.exports = {
   resolve: {
     extensionAlias: {
@@ -98,7 +97,13 @@ module.exports = {
 };
 ```
 
-在 `require('./index.js')` 时，会依次尝试解析 `'./index.ts'`, `./index.js`。
+这对于 TypeScript 项目来说非常有用，因为 TypeScript 推荐使用 `.js` 扩展名来引用 TypeScript 文件。
+
+```ts title="index.ts"
+import { foo } from './foo.js'; // 实际引用的是 foo.ts
+```
+
+Rspack 在解析 `import './foo.js'` 时，会依次尝试解析 `'./foo.ts'` 和 `./foo.js`。
 
 ## resolve.fallback