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( 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..66d9575715c --- /dev/null +++ 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 new file mode 100644 index 00000000000..cce1f49a437 --- /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"]; 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..33a418a59a8 --- /dev/null +++ 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 new file mode 100644 index 00000000000..dd96b964c76 --- /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]; 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..d8558101ac8 --- /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/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(); +}; 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 + } +};