fix: do not import non javascript chunks

webpack · Mar 15, 2023 · f58ff9b · f58ff9b
2 parents dbf7bf3 + 0df270a
commit f58ff9b
Show file tree

Hide file tree

Showing 9 changed files with 128 additions and 1 deletion.
diff --git a/lib/esm/ModuleChunkFormatPlugin.js b/lib/esm/ModuleChunkFormatPlugin.js
@@ -11,6 +11,7 @@ const HotUpdateChunk = require("../HotUpdateChunk");
 const Template = require("../Template");
 const { getAllChunks } = require("../javascript/ChunkHelpers");
 const {
+	chunkHasJs,
 	getCompilationHooks,
 	getChunkFilenameTemplate
 } = require("../javascript/JavascriptModulesPlugin");
@@ -147,7 +148,11 @@ class ModuleChunkFormatPlugin {
 										undefined
 									);
 									for (const chunk of chunks) {
-										if (loadedChunks.has(chunk)) continue;
+										if (
+											loadedChunks.has(chunk) ||
+											!chunkHasJs(chunk, chunkGraph)
+										)
+											continue;
 										loadedChunks.add(chunk);
 										startupSource.add(
 											`import * as __webpack_chunk_${index}__ from ${JSON.stringify(

diff --git a/test/configCases/output-module/issue-16040/bar.css b/test/configCases/output-module/issue-16040/bar.css
@@ -0,0 +1,3 @@
+.bar {
+	color: #fff;
+}
diff --git a/test/configCases/output-module/issue-16040/bar.js b/test/configCases/output-module/issue-16040/bar.js
@@ -0,0 +1,7 @@
+import { countBy } from "lodash-es";
+
+import "./bar.css";
+
+const result = countBy([6.1, 4.2, 6.3], Math.floor);
+
+export default result["6"];
diff --git a/test/configCases/output-module/issue-16040/foo.css b/test/configCases/output-module/issue-16040/foo.css
@@ -0,0 +1,3 @@
+.foo {
+	color: #fff;
+}
diff --git a/test/configCases/output-module/issue-16040/foo.js b/test/configCases/output-module/issue-16040/foo.js
@@ -0,0 +1,7 @@
+import { dropRight } from "lodash-es";
+
+import "./foo.css";
+
+const result = dropRight([10, 20, 30], 2);
+
+export default result[0];
diff --git a/test/configCases/output-module/issue-16040/index.js b/test/configCases/output-module/issue-16040/index.js
@@ -0,0 +1,15 @@
+import foo from "./foo.js";
+import bar from "./bar.js";
+
+console.log(foo + bar);
+
+it("should not contain non javascript chunk in the main bundle", () => {
+	const fs = require("fs");
+	const source = fs.readFileSync(__STATS__.outputPath + "/main.mjs", "utf-8");
+
+	expect(__STATS__.chunks.some(c => c.names.includes("style"))).toBe(true);
+	// Should not import "./style.mjs";`
+	expect(source).not.toMatch(
+		/import\s\*\sas+\s__webpack_chunk_[0-9]+__\sfrom\s"\.\/style\.mjs"/g
+	);
+});
diff --git a/test/configCases/output-module/issue-16040/test.config.js b/test/configCases/output-module/issue-16040/test.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+	findBundle: function (i, options) {
+		return ["main.mjs", "vendor.mjs", "runtime.mjs"];
+	}
+};
diff --git a/test/configCases/output-module/issue-16040/test.filter.js b/test/configCases/output-module/issue-16040/test.filter.js
@@ -0,0 +1,5 @@
+const supportsRequireInModule = require("../../../helpers/supportsRequireInModule");
+
+module.exports = () => {
+	return supportsRequireInModule();
+};
diff --git a/test/configCases/output-module/issue-16040/webpack.config.js b/test/configCases/output-module/issue-16040/webpack.config.js
@@ -0,0 +1,77 @@
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+
+module.exports = {
+	mode: "production",
+	devtool: false,
+	experiments: {
+		outputModule: true
+	},
+	output: {
+		publicPath: "/",
+		filename: "[name].mjs",
+		chunkFilename: "[name].chunk.js",
+		assetModuleFilename: "[hash][ext][query]",
+		module: true,
+		libraryTarget: "module",
+		chunkFormat: "module",
+		chunkLoading: "import",
+		environment: {
+			dynamicImport: true,
+			module: true
+		}
+	},
+
+	module: {
+		rules: [
+			{
+				test: /\.css$/i,
+				use: [MiniCssExtractPlugin.loader, "css-loader"]
+			}
+		]
+	},
+
+	plugins: [
+		new MiniCssExtractPlugin({
+			filename: "style.css",
+			chunkFilename: "[id].css"
+		})
+	],
+
+	optimization: {
+		splitChunks: {
+			chunks: "all",
+
+			cacheGroups: {
+				style: {
+					name: "style",
+					type: "css/mini-extract",
+					chunks: "all",
+					enforce: true
+				},
+
+				defaultVendors: {
+					name: "vendor",
+					test: /[\\/]node_modules[\\/]/,
+					priority: -10,
+					chunks: "initial",
+					reuseExistingChunk: true
+				},
+
+				default: {
+					minChunks: 2,
+					priority: -20,
+					reuseExistingChunk: true
+				}
+			}
+		},
+
+		runtimeChunk: {
+			name: "runtime"
+		},
+
+		// currently Webpack has bugs when setting concatenateModules to true while produce ES Module output.
+		// concatenateModules: false,
+
+		minimize: false
+	}
+};