fix: js.chunkFilename should default to js.filename when possible

SukkaW · SukkaW · commit b6c1611975ec · 2025-03-29T23:38:23.000+08:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Changelog
 
+## Not Released
+
+- fix: `js.chunkFilename` should default to `js.filename` when possible.
+
 ## 4.19.0
 
 ### 🔥 BREAKING CHANGES by inlining SVG only
diff --git a/package.json b/package.json
@@ -216,5 +216,6 @@
     "webpack": "5.96.1",
     "webpack-cli": "6.0.1",
     "webpack-dev-server": "^5.2.0"
-  }
+  },
+  "packageManager": "pnpm@10.7.0+sha512.6b865ad4b62a1d9842b61d674a393903b871d9244954f652b8842c2b553c72176b278f64c463e52d40fff8aba385c235c8c9ecf5cc7de4fd78b8bb6d49633ab6"
 }
diff --git a/src/Plugin/Option.js b/src/Plugin/Option.js
@@ -236,7 +236,19 @@ class Option {
 
     if (js.chunkFilename) {
       options.output.chunkFilename = js.chunkFilename;
-    } else {
+    } else if (js.filename) {
+      /**
+       * When js.filename exists, it is possible that options.output.filename is overridden
+       *
+       * But, that overide is happened after webpack populated the options.output.filename, thus
+       * webpack doesn't see the js.filename, and will populate the options.output.chunkFilename
+       * with its default value "[id].js". This is not ideal since js.filename should be preferred
+       * over "[id].js".
+       *
+       * So we manually override the options.output.chunkFilename with js.filename
+       */
+      options.output.chunkFilename = js.filename;
+    } else { // default to options.output.chunkFilename, which webpack always populate with no-exist-default "[id].js"
       js.chunkFilename = options.output.chunkFilename;
     }
 
diff --git a/test/cases/option-js-chunkFilename-default-to-filename/expected/assets/css/style.7f152e84.css b/test/cases/option-js-chunkFilename-default-to-filename/expected/assets/css/style.7f152e84.css
@@ -0,0 +1 @@
+h1{color:red}
diff --git a/test/cases/option-js-chunkFilename-default-to-filename/expected/assets/js/473.17e6164c.js b/test/cases/option-js-chunkFilename-default-to-filename/expected/assets/js/473.17e6164c.js
diff --git a/test/cases/option-js-chunkFilename-default-to-filename/expected/assets/js/803.675bc0d4.js b/test/cases/option-js-chunkFilename-default-to-filename/expected/assets/js/803.675bc0d4.js
diff --git a/test/cases/option-js-chunkFilename-default-to-filename/expected/assets/js/881.e0e6f991.js b/test/cases/option-js-chunkFilename-default-to-filename/expected/assets/js/881.e0e6f991.js
diff --git a/test/cases/option-js-chunkFilename-default-to-filename/expected/assets/js/992.c549a43d.js b/test/cases/option-js-chunkFilename-default-to-filename/expected/assets/js/992.c549a43d.js
diff --git a/test/cases/option-js-chunkFilename-default-to-filename/expected/assets/js/main.9808bcf2.js b/test/cases/option-js-chunkFilename-default-to-filename/expected/assets/js/main.9808bcf2.js
diff --git a/test/cases/option-js-chunkFilename-default-to-filename/expected/assets/js/runtime.b4aec825.js b/test/cases/option-js-chunkFilename-default-to-filename/expected/assets/js/runtime.b4aec825.js
diff --git a/test/cases/option-js-chunkFilename-default-to-filename/expected/index.html b/test/cases/option-js-chunkFilename-default-to-filename/expected/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <link href="assets/css/style.7f152e84.css" rel="stylesheet">
+</head>
+<body>
+  <h1>Hello World!</h1>
+  <script src="assets/js/runtime.b4aec825.js"></script>
+<script src="assets/js/803.675bc0d4.js"></script>
+<script src="assets/js/main.9808bcf2.js"></script>
+  <!-- Note:
+  here are injected not all generated split chunks.
+  It is OK because other chunks are loaded dynamically at runtime from injected chunks.
+  -->
+</body>
+</html>
diff --git a/test/cases/option-js-chunkFilename-default-to-filename/src/chunk.js b/test/cases/option-js-chunkFilename-default-to-filename/src/chunk.js
@@ -0,0 +1,4 @@
+import Lib1 from './lib1';
+import Lib2 from './lib2';
+
+console.log('>> dyn-module', [Lib1.getTitle(), Lib2.getTitle()]);
diff --git a/test/cases/option-js-chunkFilename-default-to-filename/src/index.html b/test/cases/option-js-chunkFilename-default-to-filename/src/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <link href="./style.scss" rel="stylesheet">
+</head>
+<body>
+  <h1>Hello World!</h1>
+  <script src="./main"></script>
+  <!-- Note:
+  here are injected not all generated split chunks.
+  It is OK because other chunks are loaded dynamically at runtime from injected chunks.
+  -->
+</body>
+</html>
diff --git a/test/cases/option-js-chunkFilename-default-to-filename/src/lib1.js b/test/cases/option-js-chunkFilename-default-to-filename/src/lib1.js
@@ -0,0 +1,20 @@
+const Lib1 = {
+  title: 'Lib1 Dolor sit amet',
+
+  // 1024 bytes of text
+  data: 'Lib1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce efficitur pretium urna. Fusce condimentum dapibus lectus, et cursus turpis interdum ut. Nulla suscipit viverra turpis ac eleifend. Nulla dignissim auctor nulla, at imperdiet magna volutpat in. Proin neque elit, interdum sit amet mauris quis, aliquam placerat enim. Morbi cursus, ipsum eu finibus suscipit, odio velit iaculis orci, vitae malesuada orci lacus nec erat. Integer pellentesque velit a ex convallis, ac commodo justo tincidunt. Cras ac lorem et sem feugiat molestie non et est. Nullam id diam ut lorem bibendum congue. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras eget lectus gravida, dictum risus ac, rutrum ante. Phasellus faucibus lectus urna, eget vehicula magna fringilla et. Morbi tempus ipsum in velit auctor efficitur. Fusce luctus ultrices diam, ac pellentesque enim aliquet at. Cras finibus odio in nisl bibendum vulputate. Quisque ultrices nisi vel enim faucibus, non scelerisque ex portitor.',
+
+  getTitle() {
+    return this.title;
+  },
+
+  getText() {
+    return this.data;
+  },
+
+  getSize() {
+    return this.data.length;
+  },
+};
+
+module.exports = Lib1;
diff --git a/test/cases/option-js-chunkFilename-default-to-filename/src/lib2.js b/test/cases/option-js-chunkFilename-default-to-filename/src/lib2.js
@@ -0,0 +1,20 @@
+const Lib2 = {
+  title: 'Lib2 Quisque ultrices',
+
+  // 1024 bytes of text
+  data: 'Lib2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce efficitur pretium urna. Fusce condimentum dapibus lectus, et cursus turpis interdum ut. Nulla suscipit viverra turpis ac eleifend. Nulla dignissim auctor nulla, at imperdiet magna volutpat in. Proin neque elit, interdum sit amet mauris quis, aliquam placerat enim. Morbi cursus, ipsum eu finibus suscipit, odio velit iaculis orci, vitae malesuada orci lacus nec erat. Integer pellentesque velit a ex convallis, ac commodo justo tincidunt. Cras ac lorem et sem feugiat molestie non et est. Nullam id diam ut lorem bibendum congue. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras eget lectus gravida, dictum risus ac, rutrum ante. Phasellus faucibus lectus urna, eget vehicula magna fringilla et. Morbi tempus ipsum in velit auctor efficitur. Fusce luctus ultrices diam, ac pellentesque enim aliquet at. Cras finibus odio in nisl bibendum vulputate. Quisque ultrices nisi vel enim faucibus, non scelerisque ex portitor.',
+
+  getTitle() {
+    return this.title;
+  },
+
+  getText() {
+    return this.data;
+  },
+
+  getSize() {
+    return this.data.length;
+  },
+};
+
+module.exports = Lib2;
diff --git a/test/cases/option-js-chunkFilename-default-to-filename/src/main.js b/test/cases/option-js-chunkFilename-default-to-filename/src/main.js
@@ -0,0 +1,4 @@
+// test the `js.chunkFilename` option using the dynamic import
+import('./chunk');
+
+console.log('>> main.js');
diff --git a/test/cases/option-js-chunkFilename-default-to-filename/src/style.scss b/test/cases/option-js-chunkFilename-default-to-filename/src/style.scss
@@ -0,0 +1,3 @@
+h1 {
+  color: red;
+}
diff --git a/test/cases/option-js-chunkFilename-default-to-filename/webpack.config.js b/test/cases/option-js-chunkFilename-default-to-filename/webpack.config.js
@@ -0,0 +1,48 @@
+const path = require('path');
+const HtmlBundlerPlugin = require('@test/html-bundler-webpack-plugin');
+
+module.exports = {
+  mode: 'production',
+
+  output: {
+    path: path.join(__dirname, 'dist/'),
+  },
+
+  plugins: [
+    new HtmlBundlerPlugin({
+      entry: {
+        index: './src/index.html',
+      },
+      js: {
+        filename: 'assets/js/[name].[contenthash:8].js',
+      },
+      css: {
+        filename: 'assets/css/[name].[contenthash:8].css',
+      },
+    }),
+  ],
+
+  module: {
+    rules: [
+      {
+        test: /\.(css|sass|scss)$/,
+        use: ['css-loader', 'sass-loader'],
+      },
+    ],
+  },
+
+  optimization: {
+    runtimeChunk: 'single',
+    splitChunks: {
+      //chunks: 'all', // don't use it here
+      minSize: 100,
+      maxSize: 500,
+      cacheGroups: {
+        app: {
+          test: /\.(js|ts)$/,
+          chunks: 'all', // <- use it only here
+        },
+      },
+    },
+  },
+};
diff --git a/test/integration.test.js b/test/integration.test.js
@@ -102,6 +102,7 @@ describe('plugin options', () => {
   test('js.chunkFilename', () => compareFiles('option-js-chunkFilename'));
   test('js.chunkFilename as function', () => compareFiles('option-js-chunkFilename-function'));
   test('js.chunkFilename not set', () => compareFiles('option-js-chunkFilename-notset'));
+  test('js.chunkFilename default to filename', () => compareFiles('option-js-chunkFilename-default-to-filename'));
   test('js and css outputPath absolute', () => compareFiles('option-js-css-outputPath-absolute'));
   test('js and css outputPath relative', () => compareFiles('option-js-css-outputPath-relative'));
 

Original file line number	Diff line number	Diff line change
`@@ -216,5 +216,6 @@`
`216`	`216`	`"webpack": "5.96.1",`
`217`	`217`	`"webpack-cli": "6.0.1",`
`218`	`218`	`"webpack-dev-server": "^5.2.0"`
`219`		`- }`
	`219`	`+ },`
	`220`	`+ "packageManager": "pnpm@10.7.0+sha512.6b865ad4b62a1d9842b61d674a393903b871d9244954f652b8842c2b553c72176b278f64c463e52d40fff8aba385c235c8c9ecf5cc7de4fd78b8bb6d49633ab6"`
`220`	`221`	`}`