From cf15e67cc3094177aee718496533d232d4ad0c36 Mon Sep 17 00:00:00 2001 From: Nitin Kumar Date: Sat, 11 Mar 2023 16:51:52 +0530 Subject: [PATCH 1/3] fix: do not import non javascript chunks --- lib/esm/ModuleChunkFormatPlugin.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/lib/esm/ModuleChunkFormatPlugin.js b/lib/esm/ModuleChunkFormatPlugin.js index e17d1053063..f0266bc0f61 100644 --- 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( From 196b49f4a7ddc1ae1cda6b00c08381e1a8fd47a2 Mon Sep 17 00:00:00 2001 From: Nitin Kumar Date: Tue, 14 Mar 2023 18:42:11 +0530 Subject: [PATCH 2/3] test(configCases): add a test case for #16040 --- .../output-module/issue-16040/bar.css | 3 + .../output-module/issue-16040/bar.js | 7 ++ .../output-module/issue-16040/entry.js | 1 + .../output-module/issue-16040/foo.css | 3 + .../output-module/issue-16040/foo.js | 7 ++ .../output-module/issue-16040/index.js | 15 ++++ .../output-module/issue-16040/test.config.js | 5 ++ .../issue-16040/webpack.config.js | 77 +++++++++++++++++++ 8 files changed, 118 insertions(+) create mode 100644 test/configCases/output-module/issue-16040/bar.css create mode 100644 test/configCases/output-module/issue-16040/bar.js create mode 100644 test/configCases/output-module/issue-16040/entry.js create mode 100644 test/configCases/output-module/issue-16040/foo.css create mode 100644 test/configCases/output-module/issue-16040/foo.js create mode 100644 test/configCases/output-module/issue-16040/index.js create mode 100644 test/configCases/output-module/issue-16040/test.config.js create mode 100644 test/configCases/output-module/issue-16040/webpack.config.js diff --git a/test/configCases/output-module/issue-16040/bar.css b/test/configCases/output-module/issue-16040/bar.css new file mode 100644 index 00000000000..5330aae07f8 --- /dev/null +++ b/test/configCases/output-module/issue-16040/bar.css @@ -0,0 +1,3 @@ +.bar { + color: #fff; +} \ No newline at end of file diff --git a/test/configCases/output-module/issue-16040/bar.js b/test/configCases/output-module/issue-16040/bar.js new file mode 100644 index 00000000000..f4ca3ebdc21 --- /dev/null +++ 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'] \ No newline at end of file diff --git a/test/configCases/output-module/issue-16040/entry.js b/test/configCases/output-module/issue-16040/entry.js new file mode 100644 index 00000000000..8b137891791 --- /dev/null +++ b/test/configCases/output-module/issue-16040/entry.js @@ -0,0 +1 @@ + diff --git a/test/configCases/output-module/issue-16040/foo.css b/test/configCases/output-module/issue-16040/foo.css new file mode 100644 index 00000000000..6bbab56ba21 --- /dev/null +++ b/test/configCases/output-module/issue-16040/foo.css @@ -0,0 +1,3 @@ +.foo { + color: #fff; +} \ No newline at end of file diff --git a/test/configCases/output-module/issue-16040/foo.js b/test/configCases/output-module/issue-16040/foo.js new file mode 100644 index 00000000000..d9805d58ba5 --- /dev/null +++ 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] \ No newline at end of file diff --git a/test/configCases/output-module/issue-16040/index.js b/test/configCases/output-module/issue-16040/index.js new file mode 100644 index 00000000000..cecb68042a2 --- /dev/null +++ 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 new file mode 100644 index 00000000000..be83c69bf17 --- /dev/null +++ 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/webpack.config.js b/test/configCases/output-module/issue-16040/webpack.config.js new file mode 100644 index 00000000000..275e36a5232 --- /dev/null +++ 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 + } +}; From 0df270ac9fc5a188e0e0da57636d571a5e087c86 Mon Sep 17 00:00:00 2001 From: Nitin Kumar Date: Wed, 15 Mar 2023 13:30:11 +0530 Subject: [PATCH 3/3] test: fix test case for node v10 --- test/configCases/output-module/issue-16040/bar.css | 2 +- test/configCases/output-module/issue-16040/bar.js | 8 ++++---- test/configCases/output-module/issue-16040/entry.js | 1 - test/configCases/output-module/issue-16040/foo.css | 2 +- test/configCases/output-module/issue-16040/foo.js | 8 ++++---- test/configCases/output-module/issue-16040/test.config.js | 2 +- test/configCases/output-module/issue-16040/test.filter.js | 5 +++++ 7 files changed, 16 insertions(+), 12 deletions(-) delete mode 100644 test/configCases/output-module/issue-16040/entry.js create mode 100644 test/configCases/output-module/issue-16040/test.filter.js diff --git a/test/configCases/output-module/issue-16040/bar.css b/test/configCases/output-module/issue-16040/bar.css index 5330aae07f8..66d9575715c 100644 --- a/test/configCases/output-module/issue-16040/bar.css +++ b/test/configCases/output-module/issue-16040/bar.css @@ -1,3 +1,3 @@ .bar { color: #fff; -} \ No newline at end of file +} diff --git a/test/configCases/output-module/issue-16040/bar.js b/test/configCases/output-module/issue-16040/bar.js index f4ca3ebdc21..cce1f49a437 100644 --- a/test/configCases/output-module/issue-16040/bar.js +++ b/test/configCases/output-module/issue-16040/bar.js @@ -1,7 +1,7 @@ -import { countBy } from 'lodash-es' +import { countBy } from "lodash-es"; -import './bar.css' +import "./bar.css"; -const result = countBy([6.1, 4.2, 6.3], Math.floor) +const result = countBy([6.1, 4.2, 6.3], Math.floor); -export default result['6'] \ No newline at end of file +export default result["6"]; diff --git a/test/configCases/output-module/issue-16040/entry.js b/test/configCases/output-module/issue-16040/entry.js deleted file mode 100644 index 8b137891791..00000000000 --- a/test/configCases/output-module/issue-16040/entry.js +++ /dev/null @@ -1 +0,0 @@ - diff --git a/test/configCases/output-module/issue-16040/foo.css b/test/configCases/output-module/issue-16040/foo.css index 6bbab56ba21..33a418a59a8 100644 --- a/test/configCases/output-module/issue-16040/foo.css +++ b/test/configCases/output-module/issue-16040/foo.css @@ -1,3 +1,3 @@ .foo { color: #fff; -} \ No newline at end of file +} diff --git a/test/configCases/output-module/issue-16040/foo.js b/test/configCases/output-module/issue-16040/foo.js index d9805d58ba5..dd96b964c76 100644 --- a/test/configCases/output-module/issue-16040/foo.js +++ b/test/configCases/output-module/issue-16040/foo.js @@ -1,7 +1,7 @@ -import { dropRight } from 'lodash-es' +import { dropRight } from "lodash-es"; -import './foo.css' +import "./foo.css"; -const result = dropRight([10, 20, 30], 2) +const result = dropRight([10, 20, 30], 2); -export default result[0] \ No newline at end of file +export default result[0]; diff --git a/test/configCases/output-module/issue-16040/test.config.js b/test/configCases/output-module/issue-16040/test.config.js index be83c69bf17..d8558101ac8 100644 --- a/test/configCases/output-module/issue-16040/test.config.js +++ b/test/configCases/output-module/issue-16040/test.config.js @@ -1,5 +1,5 @@ module.exports = { - findBundle: function(i, options) { + 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 new file mode 100644 index 00000000000..ad4dc826959 --- /dev/null +++ b/test/configCases/output-module/issue-16040/test.filter.js @@ -0,0 +1,5 @@ +const supportsRequireInModule = require("../../../helpers/supportsRequireInModule"); + +module.exports = () => { + return supportsRequireInModule(); +};