docs: improve filename configuration (#4655)

Author: chenjiahan

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

@@ -5,18 +5,8 @@
 ```ts
 type FilenameConfig = {
   html?: string;
-  js?:
-    | string
-    | ((
-        pathData: Rspack.PathData,
-        assetInfo: Rspack.JsAssetInfo | undefined,
-      ) => string);
-  css?:
-    | string
-    | ((
-        pathData: Rspack.PathData,
-        assetInfo: Rspack.JsAssetInfo | undefined,
-      ) => string);
+  js?: string | Function;
+  css?: string | Function;
   svg?: string;
   font?: string;
   image?: string;
@@ -72,16 +62,27 @@ The following are the details of each filename:
 
 ## Example
 
-To set the name of the JavaScript file to `[name]_script.js`, use the following configuration:
+To set the name of the JavaScript files to `[name]_script.js`:
+
+```ts title="rsbuild.config.ts"
+export default {
+  output: {
+    filename: {
+      js: '[name]_script.js',
+    },
+  },
+};
+```
+
+Set different filenames for development and production builds:
+
+```ts title="rsbuild.config.ts"
+const isProd = process.env.NODE_ENV === 'production';
 
-```js
 export default {
   output: {
     filename: {
-      js:
-        process.env.NODE_ENV === 'production'
-          ? '[name]_script.[contenthash:8].js'
-          : '[name]_script.js',
+      js: isProd ? '[name]_script.[contenthash:8].js' : '[name]_script.js',
     },
   },
 };
@@ -136,9 +137,14 @@ After specifying the module name as above, the generated file will be `dist/stat
 
 ## Using function
 
-You can pass a function to `output.filename.js` or `output.filename.css`, allowing you to dynamically generate filenames based on file information:
+You can pass a function to `output.filename.js` or `output.filename.css`, allowing you to dynamically generate filenames based on file information.
 
-```js
+The function receives two parameters:
+
+- `pathData`: An object containing file path information.
+- `assetInfo`: An optional object containing additional assets information.
+
+```ts title="rsbuild.config.ts"
 export default {
   output: {
     filename: {
@@ -173,7 +179,7 @@ Except for `output.filename.js` and `output.filename.css`, other types of files
 
 To generate hash values on the URL query of assets, refer to:
 
-```js
+```ts title="rsbuild.config.ts"
 const isProd = process.env.NODE_ENV === 'production';
 
 export default {

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

@@ -5,22 +5,13 @@
 ```ts
 type FilenameConfig = {
   html?: string;
-  js?:
-    | string
-    | ((
-        pathData: Rspack.PathData,
-        assetInfo: Rspack.JsAssetInfo | undefined,
-      ) => string);
-  css?:
-    | string
-    | ((
-        pathData: Rspack.PathData,
-        assetInfo: Rspack.JsAssetInfo | undefined,
-      ) => string);
+  js?: string | Function;
+  css?: string | Function;
   svg?: string;
   font?: string;
   image?: string;
   media?: string;
+  assets?: string;
 };
 ```
 
@@ -73,14 +64,25 @@ const prodDefaultFilename = {
 
 修改 JavaScript 文件的名称为 `[name]_script.js`：
 
-```js
+```ts title="rsbuild.config.ts"
+export default {
+  output: {
+    filename: {
+      js: '[name]_script.js',
+    },
+  },
+};
+```
+
+为开发和生产构建设置不同的文件名：
+
+```ts title="rsbuild.config.ts"
+const isProd = process.env.NODE_ENV === 'production';
+
 export default {
   output: {
     filename: {
-      js:
-        process.env.NODE_ENV === 'production'
-          ? '[name]_script.[contenthash:8].js'
-          : '[name]_script.js',
+      js: isProd ? '[name]_script.[contenthash:8].js' : '[name]_script.js',
     },
   },
 };
@@ -135,9 +137,14 @@ const { add } = await import(
 
 ## 使用函数
 
-`output.filename.js` 和 `output.filename.css` 可以传入一个函数，这允许你根据文件信息动态生成文件名：
+`output.filename.js` 和 `output.filename.css` 可以传入一个函数，这允许你根据文件信息动态生成文件名。
 
-```js
+函数接收两个参数：
+
+- `pathData`：一个对象，包含文件路径信息。
+- `assetInfo`：一个可选的对象，包含额外的资源信息。
+
+```ts title="rsbuild.config.ts"
 export default {
   output: {
     filename: {
@@ -172,7 +179,7 @@ export default {
 
 如果你需要在资源的 URL query 上生成 hash 值，可以参考以下配置：
 
-```js
+```ts title="rsbuild.config.ts"
 const isProd = process.env.NODE_ENV === 'production';
 
 export default {