webpack 5.108.4 → 5.109.1

package/lib/config/target.js

@@ -52,6 +52,7 @@ const getDefaultTarget = (context) => {
  * @property {boolean | null} nodeBuiltinModuleGetter node.js exposes `process.getBuiltinModule()` to synchronously load core modules
  * @property {boolean | null} importMetaDirnameAndFilename node.js allows to use `import.meta.dirname` and `import.meta.filename`
  * @property {boolean | null} document has document available (allows script tags)
+ * @property {(boolean | null)=} modulePreload supports `<link rel="modulepreload">` (optional; absent means "assume supported")
  * @property {boolean | null} importScripts has importScripts available
  * @property {boolean | null} importScriptsInWorker has importScripts available when creating a worker
  * @property {boolean | null} fetchWasm has fetch function available for WebAssembly
@@ -79,6 +80,7 @@ const getDefaultTarget = (context) => {
  * @property {boolean | null} spread spread and rest in array/object literals and calls is available
  * @property {boolean | null} templateLiteral template literal is available
  * @property {boolean | null} asyncFunction async functions and await are available
+ * @property {boolean | null} generator generator functions and yield are available
  */
 
 /**
@@ -259,6 +261,7 @@ You can also more options via the 'target' option: 'browserslist' / 'browserslis
 				methodShorthand: v(4),
 				arrowFunction: v(6),
 				asyncFunction: v(7, 6),
+				generator: v(4),
 				forOf: v(5),
 				destructuring: v(6),
 				bigIntLiteral: v(10, 4),
@@ -315,7 +318,8 @@ You can also more options via the 'target' option: 'browserslist' / 'browserslis
 				optionalChaining: true,
 				spread: true,
 				templateLiteral: true,
-				asyncFunction: true
+				asyncFunction: true,
+				generator: true
 			};
 		}
 	],
@@ -362,6 +366,7 @@ You can also more options via the 'target' option: 'browserslist' / 'browserslis
 			methodShorthand: true,
 			arrowFunction: true,
 			asyncFunction: true,
+			generator: true,
 			forOf: true,
 			destructuring: true,
 			bigIntLiteral: true,
@@ -418,6 +423,7 @@ You can also more options via the 'target' option: 'browserslist' / 'browserslis
 				methodShorthand: v(1, 1),
 				arrowFunction: v(1, 1),
 				asyncFunction: v(1, 7),
+				generator: v(1, 1),
 				forOf: v(0, 36),
 				destructuring: v(1, 1),
 				bigIntLiteral: v(4),
@@ -466,6 +472,7 @@ You can also more options via the 'target' option: 'browserslist' / 'browserslis
 				methodShorthand: v(0, 15),
 				arrowFunction: v(0, 15),
 				asyncFunction: v(0, 21),
+				generator: v(0, 15),
 				forOf: v(0, 13),
 				destructuring: v(0, 15),
 				bigIntLiteral: v(0, 32),
@@ -495,6 +502,7 @@ You can also more options via the 'target' option: 'browserslist' / 'browserslis
 				destructuring: v >= 2015,
 				module: v >= 2015,
 				asyncFunction: v >= 2017,
+				generator: v >= 2015,
 				globalThis: v >= 2020,
 				symbol: v >= 2015,
 				hasOwn: v >= 2022,

package/lib/container/HoistContainerReferencesPlugin.js

@@ -38,12 +38,13 @@ class HoistContainerReferences {
 			const depsToTrace = new Set();
 			/** @type {Set<Dependency>} */
 			const entryExternalsToHoist = new Set();
-			hooks.addContainerEntryDependency.tap(PLUGIN_NAME, (dep) => {
+			// Both hooks feed the same trace set, so they share one callback.
+			/** @type {(dep: Dependency) => void} */
+			const traceDep = (dep) => {
 				depsToTrace.add(dep);
-			});
-			hooks.addFederationRuntimeDependency.tap(PLUGIN_NAME, (dep) => {
-				depsToTrace.add(dep);
-			});
+			};
+			hooks.addContainerEntryDependency.tap(PLUGIN_NAME, traceDep);
+			hooks.addFederationRuntimeDependency.tap(PLUGIN_NAME, traceDep);
 
 			compilation.hooks.addEntry.tap(PLUGIN_NAME, (entryDep) => {
 				if (entryDep.type === "entry") {
@@ -76,46 +77,26 @@ class HoistContainerReferences {
 	 * @param {Set<Dependency>} entryExternalsToHoist Set of container entry dependencies to hoist.
 	 */
 	hoistModulesInChunks(compilation, depsToTrace, entryExternalsToHoist) {
-		const { chunkGraph, moduleGraph } = compilation;
+		const { moduleGraph } = compilation;
 
-		// loop over entry points
+		// Entry externals: hoist the external modules (e.g. RemoteModule) they reference.
 		for (const dep of entryExternalsToHoist) {
 			const entryModule = moduleGraph.getModule(dep);
 			if (!entryModule) continue;
-			// get all the external module types and hoist them to the runtime chunk, this will get RemoteModule externals
 			const allReferencedModules = getAllReferencedModules(
 				compilation,
 				entryModule,
 				"external",
 				false
 			);
-
-			const containerRuntimes = chunkGraph.getModuleRuntimes(entryModule);
-			/** @type {Set<string>} */
-			const runtimes = new Set();
-
-			for (const runtimeSpec of containerRuntimes) {
-				forEachRuntime(runtimeSpec, (runtimeKey) => {
-					if (runtimeKey) {
-						runtimes.add(runtimeKey);
-					}
-				});
-			}
-
-			for (const runtime of runtimes) {
-				const runtimeChunk = compilation.namedChunks.get(runtime);
-				if (!runtimeChunk) continue;
-
-				for (const module of allReferencedModules) {
-					if (!chunkGraph.isModuleInChunk(module, runtimeChunk)) {
-						chunkGraph.connectChunkAndModule(runtimeChunk, module);
-					}
-				}
-			}
-			this.cleanUpChunks(compilation, allReferencedModules);
+			this.hoistReferencedModules(
+				compilation,
+				entryModule,
+				allReferencedModules
+			);
 		}
 
-		// handle container entry specifically
+		// Container entries: hoist the initial graph plus its external references.
 		for (const dep of depsToTrace) {
 			const containerEntryModule = moduleGraph.getModule(dep);
 			if (!containerEntryModule) continue;
@@ -125,43 +106,54 @@ class HoistContainerReferences {
 				"initial",
 				false
 			);
-
 			const allRemoteReferences = getAllReferencedModules(
 				compilation,
 				containerEntryModule,
 				"external",
 				false
 			);
-
 			for (const remote of allRemoteReferences) {
 				allReferencedModules.add(remote);
 			}
+			this.hoistReferencedModules(
+				compilation,
+				containerEntryModule,
+				allReferencedModules
+			);
+		}
+	}
 
-			const containerRuntimes =
-				chunkGraph.getModuleRuntimes(containerEntryModule);
-			/** @type {Set<string>} */
-			const runtimes = new Set();
-
-			for (const runtimeSpec of containerRuntimes) {
-				forEachRuntime(runtimeSpec, (runtimeKey) => {
-					if (runtimeKey) {
-						runtimes.add(runtimeKey);
-					}
-				});
-			}
+	/**
+	 * Connect `referencedModules` into each runtime chunk of `entryModule`, then
+	 * prune the chunks they were hoisted out of. The two passes above build
+	 * `referencedModules` differently but hoist them identically.
+	 * @param {Compilation} compilation The webpack compilation instance.
+	 * @param {Module} entryModule The module whose runtimes receive the modules.
+	 * @param {Set<Module>} referencedModules The modules to hoist.
+	 */
+	hoistReferencedModules(compilation, entryModule, referencedModules) {
+		const { chunkGraph } = compilation;
+		/** @type {Set<string>} */
+		const runtimes = new Set();
+		for (const runtimeSpec of chunkGraph.getModuleRuntimes(entryModule)) {
+			forEachRuntime(runtimeSpec, (runtimeKey) => {
+				if (runtimeKey) {
+					runtimes.add(runtimeKey);
+				}
+			});
+		}
 
-			for (const runtime of runtimes) {
-				const runtimeChunk = compilation.namedChunks.get(runtime);
-				if (!runtimeChunk) continue;
+		for (const runtime of runtimes) {
+			const runtimeChunk = compilation.namedChunks.get(runtime);
+			if (!runtimeChunk) continue;
 
-				for (const module of allReferencedModules) {
-					if (!chunkGraph.isModuleInChunk(module, runtimeChunk)) {
-						chunkGraph.connectChunkAndModule(runtimeChunk, module);
-					}
+			for (const module of referencedModules) {
+				if (!chunkGraph.isModuleInChunk(module, runtimeChunk)) {
+					chunkGraph.connectChunkAndModule(runtimeChunk, module);
 				}
 			}
-			this.cleanUpChunks(compilation, allReferencedModules);
 		}
+		this.cleanUpChunks(compilation, referencedModules);
 	}
 
 	/**

package/lib/css/CssGenerator.js

@@ -402,20 +402,28 @@ class CssGenerator extends Generator {
 						return new RawSource("");
 					}
 
+					const exportsInfo =
+						generateContext.moduleGraph.getExportsInfo(module);
+
+					/**
+					 * @param {string} name export name
+					 * @returns {string | false} used export name when the export is referenced
+					 */
+					const getUsedExportName = (name) =>
+						/** @type {string | false} */ (
+							exportsInfo
+								.getExportInfo(name)
+								.getUsedName(name, generateContext.runtime)
+						);
+
 					if (generateContext.concatenationScope) {
 						const source = new ConcatSource();
 						/** @type {Set<string>} */
 						const usedIdentifiers = new Set();
 						const { RESERVED_IDENTIFIER } = getPropertyName();
-						const exportsInfo =
-							generateContext.moduleGraph.getExportsInfo(module);
 
 						if (defaultExport) {
-							const usedName = /** @type {string | false} */ (
-								exportsInfo
-									.getExportInfo("default")
-									.getUsedName("default", generateContext.runtime)
-							);
+							const usedName = getUsedExportName("default");
 							if (usedName) {
 								let identifier = Template.toIdentifier(usedName);
 								if (RESERVED_IDENTIFIER.has(identifier)) {
@@ -435,16 +443,8 @@ class CssGenerator extends Generator {
 						}
 
 						for (const [name, v] of cssData.exports) {
-							const usedName = /** @type {string | false} */ (
-								exportsInfo
-									.getExportInfo(name)
-									.getUsedName(name, generateContext.runtime)
-							);
-							if (!usedName) {
-								continue;
-							}
-
-							let identifier = Template.toIdentifier(usedName);
+							const usedName = getUsedExportName(name);
+							let identifier = Template.toIdentifier(usedName || name);
 							if (RESERVED_IDENTIFIER.has(identifier)) {
 								identifier = `_${identifier}`;
 							}
@@ -469,9 +469,7 @@ class CssGenerator extends Generator {
 
 					const needNsObj =
 						this._esModule &&
-						generateContext.moduleGraph
-							.getExportsInfo(module)
-							.otherExportsInfo.getUsed(generateContext.runtime) !==
+						exportsInfo.otherExportsInfo.getUsed(generateContext.runtime) !==
 							UsageState.Unused;
 
 					if (needNsObj) {
@@ -483,7 +481,25 @@ class CssGenerator extends Generator {
 					// Should be after `concatenationScope` to allow module inlining
 					generateContext.runtimeRequirements.add(RuntimeGlobals.module);
 
-					if (!isCssModule && !needNsObj) {
+					const defaultUsedName = defaultExport
+						? getUsedExportName("default")
+						: false;
+
+					/** @type {string[]} */
+					const exportEntries = [];
+					for (const [name, v] of cssData.exports) {
+						const exportKey = getUsedExportName(name) || name;
+						exportEntries.push(
+							`\t${JSON.stringify(exportKey)}: ${JSON.stringify(v)}`
+						);
+					}
+
+					if (
+						!isCssModule &&
+						!needNsObj &&
+						exportEntries.length === 0 &&
+						defaultUsedName
+					) {
 						return new ConcatSource(
 							`${module.moduleArgument}.exports = `,
 							/** @type {Source} */ (defaultExport)
@@ -497,21 +513,14 @@ class CssGenerator extends Generator {
 						}.exports = {\n`
 					);
 
-					if (defaultExport) {
+					if (defaultUsedName) {
 						result.add('\t"default": ');
-						result.add(defaultExport);
-						if (cssData.exports.size > 0) {
+						result.add(/** @type {Source} */ (defaultExport));
+						if (exportEntries.length > 0) {
 							result.add(",\n");
 						}
 					}
 
-					/** @type {string[]} */
-					const exportEntries = [];
-					for (const [name, v] of cssData.exports) {
-						exportEntries.push(
-							`\t${JSON.stringify(name)}: ${JSON.stringify(v)}`
-						);
-					}
 					if (exportEntries.length > 0) {
 						result.add(exportEntries.join(",\n"));
 					}

package/lib/css/CssLoadingRuntimeModule.js

@@ -99,7 +99,9 @@ class CssLoadingRuntimeModule extends RuntimeModule {
 		const withPreload =
 			this._runtimeRequirements.has(RuntimeGlobals.preloadChunkHandlers) &&
 			(environment.document || isNeutralPlatform) &&
-			chunk.hasChildByOrder(chunkGraph, "preload", true, chunkHasCss);
+			(chunk.hasChildByOrder(chunkGraph, "preload", true, chunkHasCss) ||
+				// `parser.javascript.dynamicImportCssPreload` — CSS-only preload order.
+				chunk.hasChildByOrder(chunkGraph, "cssPreload", true, chunkHasCss));
 
 		const { linkPreload, linkPrefetch, createStylesheet, linkInsert } =
 			CssLoadingRuntimeModule.getCompilationHooks(compilation);
@@ -295,6 +297,7 @@ class CssLoadingRuntimeModule extends RuntimeModule {
 																"error.name = 'ChunkLoadError';",
 																"error.type = errorType;",
 																"error.request = realHref;",
+																"error.event = event;",
 																"installedChunkData[1](error);"
 															]),
 															"} else {",
@@ -548,6 +551,7 @@ class CssLoadingRuntimeModule extends RuntimeModule {
 														"error.name = 'ChunkLoadError';",
 														"error.type = errorType;",
 														"error.request = realHref;",
+														"error.event = event;",
 														"reject(error);"
 													]),
 													"} else {",

package/lib/css/CssModulesPlugin.js

@@ -39,6 +39,7 @@ const { compareModulesByFullName } = require("../util/comparators");
 const createHash = require("../util/createHash");
 const createHooksRegistry = require("../util/createHooksRegistry");
 const { getUndoPath } = require("../util/identifier");
+const implicitTypeLoaderFallback = require("../util/implicitTypeLoaderFallback");
 const memoize = require("../util/memoize");
 const { digestNonNumericOnlyWithFull } = require("../util/nonNumericOnlyHash");
 const {
@@ -231,9 +232,21 @@ class CssModulesPlugin {
 	 * @returns {void}
 	 */
 	apply(compiler) {
+		// `"auto"` marks implicit enablement (no user rule for CSS files) — see
+		// `applyExperimentsDefaults`. Only then loaders win over the built-in type.
+		// TODO webpack 6: css defaults to `true`, drop this implicit-only fallback.
+		const implicitlyEnabled = compiler.options.experiments.css === "auto";
 		compiler.hooks.compilation.tap(
 			PLUGIN_NAME,
 			(compilation, { normalModuleFactory }) => {
+				if (implicitlyEnabled) {
+					implicitTypeLoaderFallback(
+						normalModuleFactory,
+						PLUGIN_NAME,
+						/\.css$/i,
+						CSS_MODULE_TYPE_AUTO
+					);
+				}
 				const hooks = CssModulesPlugin.getCompilationHooks(compilation);
 				compilation.dependencyFactories.set(
 					CssImportDependency,