Merge pull request #10923 from webpack/mfe/expose-main-module

allow to expose and consume an index module from containers

lib/container/ContainerReferencePlugin.js

@@ -22,6 +22,8 @@ const { parseOptions } = require("./options");
 /** @typedef {import("../Compiler")} Compiler */
 /** @typedef {import("./RemoteOverridesModule").OverrideOptions} OverrideOptions */
 
+const slashCode = "/".charCodeAt(0);
+
 class ContainerReferencePlugin {
 	/**
 	 * @param {ContainerReferencePluginOptions} options options
@@ -73,6 +75,7 @@ class ContainerReferencePlugin {
 		for (const [key, config] of remotes) {
 			let i = 0;
 			for (const external of config.external) {
+				if (external.startsWith("internal ")) continue;
 				remoteExternals[
 					`webpack/container/reference/${key}${i ? `/fallback-${i}` : ""}`
 				] = external;
@@ -105,15 +108,20 @@ class ContainerReferencePlugin {
 					data => {
 						if (!data.request.includes("!")) {
 							for (const [key, config] of remotes) {
-								if (data.request.startsWith(`${key}/`)) {
+								if (
+									data.request.startsWith(`${key}`) &&
+									(data.request.length === key.length ||
+										data.request.charCodeAt(key.length) === slashCode)
+								) {
 									return new RemoteModule(
 										data.request,
 										this._overrides,
-										config.external.map(
-											(_, i) =>
-												`webpack/container/reference/${key}${
-													i ? `/fallback-${i}` : ""
-												}`
+										config.external.map((external, i) =>
+											external.startsWith("internal ")
+												? external.slice(9)
+												: `webpack/container/reference/${key}${
+														i ? `/fallback-${i}` : ""
+												  }`
 										),
 										data.request.slice(key.length + 1)
 									);
@@ -125,7 +133,7 @@ class ContainerReferencePlugin {
 
 				compilation.hooks.runtimeRequirementInTree
 					.for(RuntimeGlobals.ensureChunkHandlers)
-					.tap("OverridablesPlugin", (chunk, set) => {
+					.tap("ContainerReferencePlugin", (chunk, set) => {
 						set.add(RuntimeGlobals.module);
 						set.add(RuntimeGlobals.moduleFactories);
 						set.add(RuntimeGlobals.hasOwnProperty);

test/configCases/container/container-entry/index.js

@@ -5,6 +5,9 @@ it("should expose modules from the container", async () => {
 	const testFactory = await container.get("test");
 	expect(testFactory).toBeTypeOf("function");
 	expect(testFactory()).toBe("test");
+	const mainFactory = await container.get("");
+	expect(mainFactory).toBeTypeOf("function");
+	expect(mainFactory()).toBe("main");
 	const test2Factory = await container.get("test2");
 	expect(test2Factory).toBeTypeOf("function");
 	expect(test2Factory()).toEqual(

test/configCases/container/container-entry/main.js

@@ -0,0 +1 @@
+module.exports = "main";

test/configCases/container/container-entry/webpack.config.js

@@ -14,7 +14,8 @@ module.exports = {
 			},
 			exposes: {
 				test: "./test",
-				test2: ["./init-module", "./test2"]
+				test2: ["./init-module", "./test2"],
+				"": "./main"
 			}
 		})
 	]

test/configCases/container/container-reference/module.js

@@ -1,9 +1,11 @@
 import abc from "abc/hello-world";
+import main from "abc";
 import def, { module } from "def/hello-world";
 import def2, { module as module2 } from "def/hello/other/world";
 
 export function test() {
 	expect(abc).toBe("abc hello-world");
+	expect(main).toBe("abc ");
 	expect(def).toBe("def");
 	expect(def2).toBe("def");
 	expect(module).toBe("hello-world");