fix: output.filenameHash does not take effect on JavaScript files (#818)

Author: Timeless0911

packages/core/src/config.ts

@@ -841,10 +841,21 @@ const composeAutoExtensionConfig = (
     autoExtension,
   });
 
+  const filenameHash = config.output?.filenameHash ?? false;
+
+  const getHash = () => {
+    if (typeof filenameHash === 'string') {
+      return filenameHash ? `.[${filenameHash}]` : '';
+    }
+    return filenameHash ? '.[contenthash:8]' : '';
+  };
+
+  const hash = getHash();
+
   const updatedConfig: EnvironmentConfig = {
     output: {
       filename: {
-        js: `[name]${jsExtension}`,
+        js: `[name]${hash}${jsExtension}`,
         ...config.output?.filename,
       },
     },

tests/integration/auto-extension/index.test.ts

@@ -34,23 +34,43 @@ describe('autoExtension: false', () => {
   });
 });
 
-describe('should respect output.filename.js to override builtin logic', () => {
+describe('should respect output.filename.js and output.filenameHash to override builtin logic', () => {
   test('type is commonjs', async () => {
     const fixturePath = join(__dirname, 'type-commonjs', 'config-override');
     const { entryFiles } = await buildAndGetResults({ fixturePath });
-    expect(extname(entryFiles.esm!)).toEqual('.mjs');
-    expect(entryFiles.cjs).toMatchInlineSnapshot(
-      `"<ROOT>/tests/integration/auto-extension/type-commonjs/config-override/dist/cjs/index.58a9daaa.js"`,
+
+    // override output.filename.js
+    expect(extname(entryFiles.esm0!)).toEqual('.mjs');
+    expect(entryFiles.cjs0).toMatchInlineSnapshot(
+      `"<ROOT>/tests/integration/auto-extension/type-commonjs/config-override/dist/cjs-override-filename/index.58a9daaa.js"`,
+    );
+
+    // override output.filenameHash
+    expect(entryFiles.esm1).toMatchInlineSnapshot(
+      `"<ROOT>/tests/integration/auto-extension/type-commonjs/config-override/dist/esm-override-filename-hash/index.996a7edd.js"`,
+    );
+    expect(entryFiles.cjs1).toMatchInlineSnapshot(
+      `"<ROOT>/tests/integration/auto-extension/type-commonjs/config-override/dist/cjs-override-filename-hash/index.58a9daaa.js"`,
     );
   });
 
   test('type is module', async () => {
     const fixturePath = join(__dirname, 'type-module', 'config-override');
     const { entryFiles } = await buildAndGetResults({ fixturePath });
-    expect(entryFiles.esm).toMatchInlineSnapshot(
-      `"<ROOT>/tests/integration/auto-extension/type-module/config-override/dist/esm/index.996a7edd.js"`,
+
+    // override output.filename.js
+    expect(entryFiles.esm0).toMatchInlineSnapshot(
+      `"<ROOT>/tests/integration/auto-extension/type-module/config-override/dist/esm-override-filename/index.996a7edd.js"`,
+    );
+    expect(extname(entryFiles.cjs0!)).toEqual('.cjs');
+
+    // override output.filenameHash
+    expect(entryFiles.esm1).toMatchInlineSnapshot(
+      `"<ROOT>/tests/integration/auto-extension/type-module/config-override/dist/esm-override-filename-hash/index.996a7edd.js"`,
+    );
+    expect(entryFiles.cjs1).toMatchInlineSnapshot(
+      `"<ROOT>/tests/integration/auto-extension/type-module/config-override/dist/cjs-override-filename-hash/index.58a9daaa.js"`,
     );
-    expect(extname(entryFiles.cjs!)).toEqual('.cjs');
   });
 });
 

tests/integration/auto-extension/type-commonjs/config-override/rslib.config.ts

@@ -9,13 +9,36 @@ export default defineConfig({
         filename: {
           js: '[name].mjs',
         },
+        distPath: {
+          root: './dist/esm-override-filename',
+        },
       },
     }),
     generateBundleCjsConfig({
       output: {
         filename: {
           js: '[name].[contenthash:8].js',
         },
+        distPath: {
+          root: './dist/cjs-override-filename',
+        },
+      },
+    }),
+    generateBundleEsmConfig({
+      autoExtension: false,
+      output: {
+        filenameHash: true,
+        distPath: {
+          root: './dist/esm-override-filename-hash',
+        },
+      },
+    }),
+    generateBundleCjsConfig({
+      output: {
+        filenameHash: true,
+        distPath: {
+          root: './dist/cjs-override-filename-hash',
+        },
       },
     }),
   ],

tests/integration/auto-extension/type-module/config-override/rslib.config.ts

@@ -8,6 +8,9 @@ export default defineConfig({
         filename: {
           js: '[name].[contenthash:8].js',
         },
+        distPath: {
+          root: './dist/esm-override-filename',
+        },
       },
     }),
     generateBundleCjsConfig({
@@ -16,6 +19,26 @@ export default defineConfig({
         filename: {
           js: '[name].cjs',
         },
+        distPath: {
+          root: './dist/cjs-override-filename',
+        },
+      },
+    }),
+    generateBundleEsmConfig({
+      output: {
+        filenameHash: true,
+        distPath: {
+          root: './dist/esm-override-filename-hash',
+        },
+      },
+    }),
+    generateBundleCjsConfig({
+      autoExtension: false,
+      output: {
+        filenameHash: true,
+        distPath: {
+          root: './dist/cjs-override-filename-hash',
+        },
       },
     }),
   ],

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

@@ -78,11 +78,21 @@ Whether to add a hash value to the filename after the production build.
 
 Rslib sets `output.filenameHash` to `false` by default.
 
+::: info Filename hash
+
+By default, Rslib does not add a hash value in the middle of filenames.
+
+To enable this behavior, you can set `output.filenameHash` to `true`.
+
+You can also specify different filenames for different types of files by configuring `output.filename`.
+
+:::
+
 ## output.filename <RsbuildDocBadge path="/config/output/filename" text="output.filename" />
 
 Sets the filename of dist files.
 
-By default, Rslib sets `output.filename` based on [format](/config/lib/format), see [autoExtension](/config/lib/auto-extension) for more information.
+By default, Rslib will modify the JavaScript output file extension by setting `output.filename.js` according to [format](/config/lib/format), see [autoExtension](/config/lib/auto-extension) for more details.
 
 {/* ## output.injectStyles <RsbuildDocBadge path="/config/output/inject-styles" text="output.injectStyles" /> */}
 

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

@@ -74,11 +74,21 @@ const defaultDistPath = {
 
 Rslib 默认将 `output.filenameHash` 设置为 `false`。
 
+::: info 文件名中的 hash 值
+
+默认情况下，Rslib 不会在文件名中间添加 hash 值。
+
+要开启这个行为，你可以将 `output.filenameHash` 设置为 `true`。
+
+你也可以通过设置 `output.filename` 为不同类型的文件指定不同的名称。
+
+:::
+
 ## output.filename <RsbuildDocBadge path="/config/output/filename" text="output.filename" />
 
 设置构建产物的名称。
 
-Rslib 默认会根据 [format](/config/lib/format) 设置 `output.filename`，详情可查看 [autoExtension](/config/lib/auto-extension)。
+Rslib 默认会根据 [format](/config/lib/format) 设置 `output.filename.js` 来修改 JavaScript 产物文件的扩展名，详情可查看 [autoExtension](/config/lib/auto-extension)。
 
 ## output.inlineScripts <RsbuildDocBadge path="/config/output/inline-scripts" text="output.inlineScripts" />