fix: avoid module concatenation in child compilation for module library (#19457)

Author: alexander-akait

lib/library/ModuleLibraryPlugin.js

@@ -64,7 +64,7 @@ class ModuleLibraryPlugin extends AbstractLibraryPlugin {
 	apply(compiler) {
 		super.apply(compiler);
 
-		compiler.hooks.compilation.tap(PLUGIN_NAME, compilation => {
+		compiler.hooks.thisCompilation.tap(PLUGIN_NAME, compilation => {
 			const { exportsDefinitions } =
 				ConcatenatedModule.getCompilationHooks(compilation);
 			exportsDefinitions.tap(PLUGIN_NAME, (definitions, module) => {

test/configCases/library/module-and-child-compilation/index.js

@@ -0,0 +1,5 @@
+import { myClass } from "./style.custom";
+
+it("should work", function() {
+	expect(myClass).toBe("my-class");
+});

test/configCases/library/module-and-child-compilation/loader.js

@@ -0,0 +1,86 @@
+/** @type {import("../../../../").LoaderDefinitionFunction} */
+module.exports = async function loader() {
+	const callback = this.async();
+	const loader = this;
+	const compilerName = `extract:${loader.resourcePath}`;
+	const compiler = loader._compiler;
+	const filename = "*";
+	const childCompiler = loader._compilation.createChildCompiler(
+		compilerName,
+		{
+			filename,
+		},
+		[]
+	);
+
+	const NodeTemplatePlugin = compiler.webpack.node.NodeTemplatePlugin;
+	new NodeTemplatePlugin().apply(childCompiler);
+
+	const NodeTargetPlugin = compiler.webpack.node.NodeTargetPlugin;
+	new NodeTargetPlugin().apply(childCompiler);
+
+	const {
+		EntryOptionPlugin,
+		library: {
+			EnableLibraryPlugin
+		}
+	} = loader._compiler.webpack;
+
+	new EnableLibraryPlugin('commonjs2').apply(childCompiler);
+
+	EntryOptionPlugin.applyEntryOption(childCompiler, loader.context, {
+		child: {
+			library: {
+				type: 'commonjs2'
+			},
+			import: [`!!${loader.resourcePath}`]
+		}
+	});
+
+	const LimitChunkCountPlugin = compiler.webpack.optimize.LimitChunkCountPlugin;
+
+	new LimitChunkCountPlugin({
+		maxChunks: 1
+	}).apply(childCompiler);
+
+	let source;
+
+	childCompiler.hooks.compilation.tap(compilerName, compilation => {
+		compilation.hooks.processAssets.tap(compilerName, () => {
+			source = compilation.assets[filename] && compilation.assets[filename].source();
+
+			// Remove all chunk assets
+			compilation.chunks.forEach(chunk => {
+				chunk.files.forEach(file => {
+					compilation.deleteAsset(file);
+				});
+			});
+		});
+	});
+
+	try {
+		await new Promise((resolve, reject) => {
+			childCompiler.runAsChild((err, _entries, compilation) => {
+				if (err) {
+					return reject(err);
+				}
+
+				if (compilation.errors.length > 0) {
+					return reject(compilation.errors[0]);
+				}
+
+				resolve();
+			});
+		})
+	} catch (e) {
+		callback(e);
+		return;
+	}
+
+	if (!source) {
+		callback(new Error("Didn't get a result from child compiler"));
+		return;
+	}
+
+	callback(null, source);
+}

test/configCases/library/module-and-child-compilation/style.custom

@@ -0,0 +1,2 @@
+import style from "./test.mjs";
+export const myClass = style("my-class");

test/configCases/library/module-and-child-compilation/test.mjs

@@ -0,0 +1,3 @@
+export default function(name) {
+	return name;
+}

test/configCases/library/module-and-child-compilation/webpack.config.js

@@ -0,0 +1,23 @@
+/** @type {import("../../../../").Configuration} */
+module.exports = {
+	mode: "production",
+	target: "web",
+	output: {
+		module: true,
+		library: {
+			type: "module"
+		}
+	},
+	module: {
+		strictExportPresence: true,
+		rules: [
+			{
+				test: /\.custom$/i,
+				loader: require.resolve("./loader")
+			}
+		]
+	},
+	experiments: {
+		outputModule: true
+	}
+};