webpack 5.89.0 → 5.90.0

package/lib/config/defaults.js

@@ -29,7 +29,8 @@ const {
 
 /** @typedef {import("../../declarations/WebpackOptions").CacheOptionsNormalized} CacheOptions */
 /** @typedef {import("../../declarations/WebpackOptions").Context} Context */
-/** @typedef {import("../../declarations/WebpackOptions").CssExperimentOptions} CssExperimentOptions */
+/** @typedef {import("../../declarations/WebpackOptions").CssGeneratorOptions} CssGeneratorOptions */
+/** @typedef {import("../../declarations/WebpackOptions").CssParserOptions} CssParserOptions */
 /** @typedef {import("../../declarations/WebpackOptions").EntryDescription} EntryDescription */
 /** @typedef {import("../../declarations/WebpackOptions").EntryNormalized} Entry */
 /** @typedef {import("../../declarations/WebpackOptions").EntryStaticNormalized} EntryStaticNormalized */
@@ -39,6 +40,7 @@ const {
 /** @typedef {import("../../declarations/WebpackOptions").ExternalsPresets} ExternalsPresets */
 /** @typedef {import("../../declarations/WebpackOptions").ExternalsType} ExternalsType */
 /** @typedef {import("../../declarations/WebpackOptions").FileCacheOptions} FileCacheOptions */
+/** @typedef {import("../../declarations/WebpackOptions").GeneratorOptionsByModuleTypeKnown} GeneratorOptionsByModuleTypeKnown */
 /** @typedef {import("../../declarations/WebpackOptions").InfrastructureLogging} InfrastructureLogging */
 /** @typedef {import("../../declarations/WebpackOptions").JavascriptParserOptions} JavascriptParserOptions */
 /** @typedef {import("../../declarations/WebpackOptions").Library} Library */
@@ -159,11 +161,11 @@ const applyWebpackOptionsDefaults = options => {
 		target === false
 			? /** @type {false} */ (false)
 			: typeof target === "string"
-			? getTargetProperties(target, /** @type {Context} */ (options.context))
-			: getTargetsProperties(
-					/** @type {string[]} */ (target),
-					/** @type {Context} */ (options.context)
-			  );
+				? getTargetProperties(target, /** @type {Context} */ (options.context))
+				: getTargetsProperties(
+						/** @type {string[]} */ (target),
+						/** @type {Context} */ (options.context)
+					);
 
 	const development = mode === "development";
 	const production = mode === "production" || !mode;
@@ -223,7 +225,8 @@ const applyWebpackOptionsDefaults = options => {
 			/** @type {NonNullable<ExperimentsNormalized["css"]>} */
 			(options.experiments.css),
 		futureDefaults,
-		isNode: targetProperties && targetProperties.node === true
+		isNode: targetProperties && targetProperties.node === true,
+		targetProperties
 	});
 
 	applyOutputDefaults(options.output, {
@@ -260,14 +263,15 @@ const applyWebpackOptionsDefaults = options => {
 			validExternalTypes.includes(options.output.library.type)
 			? /** @type {ExternalsType} */ (options.output.library.type)
 			: options.output.module
-			? "module"
-			: "var";
+				? "module"
+				: "var";
 	});
 
 	applyNodeDefaults(options.node, {
 		futureDefaults:
 			/** @type {NonNullable<WebpackOptions["experiments"]["futureDefaults"]>} */
 			(options.experiments.futureDefaults),
+		outputModule: options.output.module,
 		targetProperties
 	});
 
@@ -335,7 +339,7 @@ const applyExperimentsDefaults = (
 	D(experiments, "lazyCompilation", undefined);
 	D(experiments, "buildHttp", undefined);
 	D(experiments, "cacheUnaffected", experiments.futureDefaults);
-	F(experiments, "css", () => (experiments.futureDefaults ? {} : undefined));
+	F(experiments, "css", () => (experiments.futureDefaults ? true : undefined));
 
 	// TODO webpack 6: remove this. topLevelAwait should be enabled by default
 	let shouldEnableTopLevelAwait = true;
@@ -348,14 +352,6 @@ const applyExperimentsDefaults = (
 		D(experiments.buildHttp, "frozen", production);
 		D(experiments.buildHttp, "upgrade", false);
 	}
-
-	if (typeof experiments.css === "object") {
-		D(
-			experiments.css,
-			"exportsOnly",
-			!targetProperties || !targetProperties.document
-		);
-	}
 };
 
 /**
@@ -448,7 +444,7 @@ const applySnapshotDefaults = (snapshot, { production, futureDefaults }) => {
 			process.versions.pnp === "3"
 				? [
 						/^(.+?(?:[\\/]\.yarn[\\/]unplugged[\\/][^\\/]+)?[\\/]node_modules[\\/])/
-				  ]
+					]
 				: [/^(.+?[\\/]node_modules[\\/])/]
 		);
 		F(snapshot, "immutablePaths", () =>
@@ -468,7 +464,6 @@ const applySnapshotDefaults = (snapshot, { production, futureDefaults }) => {
 				}
 			} else {
 				const match = /^(.+?[\\/]node_modules[\\/])/.exec(
-					// eslint-disable-next-line node/no-extraneous-require
 					require.resolve("watchpack")
 				);
 				if (match) {
@@ -543,20 +538,46 @@ const applyJavascriptParserOptionsDefaults = (
 	if (futureDefaults) D(parserOptions, "exportsPresence", "error");
 };
 
+/**
+ * @param {CssGeneratorOptions} generatorOptions generator options
+ * @param {Object} options options
+ * @param {TargetProperties | false} options.targetProperties target properties
+ * @returns {void}
+ */
+const applyCssGeneratorOptionsDefaults = (
+	generatorOptions,
+	{ targetProperties }
+) => {
+	D(
+		generatorOptions,
+		"exportsOnly",
+		!targetProperties || !targetProperties.document
+	);
+};
+
 /**
  * @param {ModuleOptions} module options
  * @param {Object} options options
  * @param {boolean} options.cache is caching enabled
  * @param {boolean} options.syncWebAssembly is syncWebAssembly enabled
  * @param {boolean} options.asyncWebAssembly is asyncWebAssembly enabled
- * @param {CssExperimentOptions|false} options.css is css enabled
+ * @param {boolean} options.css is css enabled
  * @param {boolean} options.futureDefaults is future defaults enabled
  * @param {boolean} options.isNode is node target platform
+ * @param {TargetProperties | false} options.targetProperties target properties
  * @returns {void}
  */
 const applyModuleDefaults = (
 	module,
-	{ cache, syncWebAssembly, asyncWebAssembly, css, futureDefaults, isNode }
+	{
+		cache,
+		syncWebAssembly,
+		asyncWebAssembly,
+		css,
+		futureDefaults,
+		isNode,
+		targetProperties
+	}
 ) => {
 	if (cache) {
 		D(
@@ -607,6 +628,20 @@ const applyModuleDefaults = (
 		}
 	);
 
+	if (css) {
+		F(module.parser, "css", () => ({}));
+
+		D(module.parser.css, "namedExports", true);
+
+		F(module.generator, "css", () => ({}));
+
+		applyCssGeneratorOptionsDefaults(
+			/** @type {NonNullable<GeneratorOptionsByModuleTypeKnown["css"]>} */
+			(module.generator.css),
+			{ targetProperties }
+		);
+	}
+
 	A(module, "defaultRules", () => {
 		const esm = {
 			type: JAVASCRIPT_MODULE_TYPE_ESM,
@@ -818,9 +853,8 @@ const applyOutputDefaults = (
 		} catch (e) {
 			if (/** @type {Error & { code: string }} */ (e).code !== "ENOENT") {
 				/** @type {Error & { code: string }} */
-				(
-					e
-				).message += `\nwhile determining default 'output.uniqueName' from 'name' in ${pkgPath}`;
+				(e).message +=
+					`\nwhile determining default 'output.uniqueName' from 'name' in ${pkgPath}`;
 				throw e;
 			}
 			return "";
@@ -870,22 +904,11 @@ const applyOutputDefaults = (
 	D(output, "webassemblyModuleFilename", "[hash].module.wasm");
 	D(output, "compareBeforeEmit", true);
 	D(output, "charset", true);
-	F(output, "hotUpdateGlobal", () =>
-		Template.toIdentifier(
-			"webpackHotUpdate" +
-				Template.toIdentifier(
-					/** @type {NonNullable<Output["uniqueName"]>} */ (output.uniqueName)
-				)
-		)
-	);
-	F(output, "chunkLoadingGlobal", () =>
-		Template.toIdentifier(
-			"webpackChunk" +
-				Template.toIdentifier(
-					/** @type {NonNullable<Output["uniqueName"]>} */ (output.uniqueName)
-				)
-		)
+	const uniqueNameId = Template.toIdentifier(
+		/** @type {NonNullable<Output["uniqueName"]>} */ (output.uniqueName)
 	);
+	F(output, "hotUpdateGlobal", () => "webpackHotUpdate" + uniqueNameId);
+	F(output, "chunkLoadingGlobal", () => "webpackChunk" + uniqueNameId);
 	F(output, "globalObject", () => {
 		if (tp) {
 			if (tp.global) return "global";
@@ -1014,6 +1037,7 @@ const applyOutputDefaults = (
 	D(output, "hashFunction", futureDefaults ? "xxhash64" : "md4");
 	D(output, "hashDigest", "hex");
 	D(output, "hashDigestLength", futureDefaults ? 16 : 20);
+	D(output, "strictModuleErrorHandling", false);
 	D(output, "strictModuleExceptionHandling", false);
 
 	const environment = /** @type {Environment} */ (output.environment);
@@ -1050,6 +1074,12 @@ const applyOutputDefaults = (
 		() =>
 			tp && optimistic(/** @type {boolean | undefined} */ (tp.arrowFunction))
 	);
+	F(
+		environment,
+		"asyncFunction",
+		() =>
+			tp && optimistic(/** @type {boolean | undefined} */ (tp.asyncFunction))
+	);
 	F(
 		environment,
 		"forOf",
@@ -1256,9 +1286,13 @@ const applyLoaderDefaults = (loader, { targetProperties, environment }) => {
  * @param {Object} options options
  * @param {TargetProperties | false} options.targetProperties target properties
  * @param {boolean} options.futureDefaults is future defaults enabled
+ * @param {boolean} options.outputModule is output type is module
  * @returns {void}
  */
-const applyNodeDefaults = (node, { futureDefaults, targetProperties }) => {
+const applyNodeDefaults = (
+	node,
+	{ futureDefaults, outputModule, targetProperties }
+) => {
 	if (node === false) return;
 
 	F(node, "global", () => {
@@ -1266,16 +1300,16 @@ const applyNodeDefaults = (node, { futureDefaults, targetProperties }) => {
 		// TODO webpack 6 should always default to false
 		return futureDefaults ? "warn" : true;
 	});
-	F(node, "__filename", () => {
-		if (targetProperties && targetProperties.node) return "eval-only";
-		// TODO webpack 6 should always default to false
-		return futureDefaults ? "warn-mock" : "mock";
-	});
-	F(node, "__dirname", () => {
-		if (targetProperties && targetProperties.node) return "eval-only";
+
+	const handlerForNames = () => {
+		if (targetProperties && targetProperties.node)
+			return outputModule ? "node-module" : "eval-only";
 		// TODO webpack 6 should always default to false
 		return futureDefaults ? "warn-mock" : "mock";
-	});
+	};
+
+	F(node, "__filename", handlerForNames);
+	F(node, "__dirname", handlerForNames);
 };
 
 /**
@@ -1296,7 +1330,7 @@ const applyPerformanceDefaults = (performance, { production }) => {
  * @param {Object} options options
  * @param {boolean} options.production is production
  * @param {boolean} options.development is development
- * @param {CssExperimentOptions|false} options.css is css enabled
+ * @param {boolean} options.css is css enabled
  * @param {boolean} options.records using records
  * @returns {void}
  */
@@ -1390,7 +1424,7 @@ const applyOptimizationDefaults = (
  * @param {string} options.context build context
  * @param {TargetProperties | false} options.targetProperties target properties
  * @param {Mode} options.mode mode
- * @param {CssExperimentOptions|false} options.css is css enabled
+ * @param {boolean} options.css is css enabled
  * @returns {ResolveOptions} resolve options
  */
 const getResolveDefaults = ({
@@ -1481,7 +1515,8 @@ const getResolveDefaults = ({
 			mainFiles: [],
 			mainFields: ["style", "..."],
 			conditionNames: styleConditions,
-			extensions: [".css"]
+			extensions: [".css"],
+			preferRelative: true
 		};
 	}
 

package/lib/config/normalization.js

@@ -109,7 +109,7 @@ const keyedNestedConfig = (value, fn, customKeys) => {
 						obj
 					),
 					/** @type {Record<string, R>} */ ({})
-			  );
+				);
 	if (customKeys) {
 		for (const key of Object.keys(customKeys)) {
 			if (!(key in result)) {
@@ -175,19 +175,20 @@ const getNormalizedWebpackOptions = config => {
 			),
 		context: config.context,
 		dependencies: config.dependencies,
-		devServer: optionalNestedConfig(config.devServer, devServer => ({
-			...devServer
-		})),
+		devServer: optionalNestedConfig(config.devServer, devServer => {
+			if (devServer === false) return false;
+			return { ...devServer };
+		}),
 		devtool: config.devtool,
 		entry:
 			config.entry === undefined
 				? { main: {} }
 				: typeof config.entry === "function"
-				? (
-						fn => () =>
-							Promise.resolve().then(fn).then(getNormalizedEntryStatic)
-				  )(config.entry)
-				: getNormalizedEntryStatic(config.entry),
+					? (
+							fn => () =>
+								Promise.resolve().then(fn).then(getNormalizedEntryStatic)
+						)(config.entry)
+					: getNormalizedEntryStatic(config.entry),
 		experiments: nestedConfig(config.experiments, experiments => ({
 			...experiments,
 			buildHttp: optionalNestedConfig(experiments.buildHttp, options =>
@@ -196,9 +197,6 @@ const getNormalizedWebpackOptions = config => {
 			lazyCompilation: optionalNestedConfig(
 				experiments.lazyCompilation,
 				options => (options === true ? {} : options)
-			),
-			css: optionalNestedConfig(experiments.css, options =>
-				options === true ? {} : options
 			)
 		})),
 		externals: /** @type {NonNullable<Externals>} */ (config.externals),
@@ -227,7 +225,7 @@ const getNormalizedWebpackOptions = config => {
 						}
 						return true;
 					};
-			  })
+				})
 			: undefined,
 		infrastructureLogging: cloneObject(config.infrastructureLogging),
 		loader: cloneObject(config.loader),
@@ -292,7 +290,7 @@ const getNormalizedWebpackOptions = config => {
 						? handledDeprecatedNoEmitOnErrors(
 								optimization.noEmitOnErrors,
 								optimization.emitOnErrors
-						  )
+							)
 						: optimization.emitOnErrors
 			};
 		}),
@@ -306,10 +304,10 @@ const getNormalizedWebpackOptions = config => {
 				"type" in library
 					? library
 					: libraryAsName || output.libraryTarget
-					? /** @type {LibraryOptions} */ ({
-							name: libraryAsName
-					  })
-					: undefined;
+						? /** @type {LibraryOptions} */ ({
+								name: libraryAsName
+							})
+						: undefined;
 			/** @type {OutputNormalized} */
 			const result = {
 				assetModuleFilename: output.assetModuleFilename,
@@ -382,6 +380,7 @@ const getNormalizedWebpackOptions = config => {
 				publicPath: output.publicPath,
 				sourceMapFilename: output.sourceMapFilename,
 				sourcePrefix: output.sourcePrefix,
+				strictModuleErrorHandling: output.strictModuleErrorHandling,
 				strictModuleExceptionHandling: output.strictModuleExceptionHandling,
 				trustedTypes: optionalNestedConfig(
 					output.trustedTypes,

package/lib/config/target.js

@@ -61,6 +61,7 @@ const getDefaultTarget = context => {
  * @property {boolean | null} module ESM syntax is available (when in module)
  * @property {boolean | null} optionalChaining optional chaining is available
  * @property {boolean | null} templateLiteral template literal is available
+ * @property {boolean | null} asyncFunction async functions and await are available
  */
 
 ///** @typedef {PlatformTargetProperties | ApiTargetProperties | EcmaTargetProperties | PlatformTargetProperties & ApiTargetProperties | PlatformTargetProperties & EcmaTargetProperties | ApiTargetProperties & EcmaTargetProperties} TargetProperties */
@@ -192,6 +193,7 @@ You can also more options via the 'target' option: 'browserslist' / 'browserslis
 				templateLiteral: v(4),
 				optionalChaining: v(14),
 				arrowFunction: v(6),
+				asyncFunction: v(7, 6),
 				forOf: v(5),
 				destructuring: v(6),
 				bigIntLiteral: v(10, 4),
@@ -233,6 +235,7 @@ You can also more options via the 'target' option: 'browserslist' / 'browserslis
 				templateLiteral: v(1, 1),
 				optionalChaining: v(8),
 				arrowFunction: v(1, 1),
+				asyncFunction: v(1, 7),
 				forOf: v(0, 36),
 				destructuring: v(1, 1),
 				bigIntLiteral: v(4),
@@ -270,6 +273,7 @@ You can also more options via the 'target' option: 'browserslist' / 'browserslis
 				templateLiteral: v(0, 13),
 				optionalChaining: v(0, 44),
 				arrowFunction: v(0, 15),
+				asyncFunction: v(0, 21),
 				forOf: v(0, 13),
 				destructuring: v(0, 15),
 				bigIntLiteral: v(0, 32),
@@ -294,6 +298,7 @@ You can also more options via the 'target' option: 'browserslist' / 'browserslis
 				forOf: v >= 2015,
 				destructuring: v >= 2015,
 				module: v >= 2015,
+				asyncFunction: v >= 2017,
 				globalThis: v >= 2020,
 				bigIntLiteral: v >= 2020,
 				dynamicImport: v >= 2020,

package/lib/container/ContainerReferencePlugin.js

@@ -113,7 +113,7 @@ class ContainerReferencePlugin {
 												? external.slice(9)
 												: `webpack/container/reference/${key}${
 														i ? `/fallback-${i}` : ""
-												  }`
+													}`
 										),
 										`.${data.request.slice(key.length)}`,
 										config.shareScope

package/lib/css/CssExportsGenerator.js

@@ -47,6 +47,7 @@ class CssExportsGenerator extends Generator {
 
 		generateContext.runtimeRequirements.add(RuntimeGlobals.module);
 
+		let chunkInitFragments;
 		const runtimeRequirements = new Set();
 
 		const templateContext = {
@@ -60,7 +61,19 @@ class CssExportsGenerator extends Generator {
 			concatenationScope: generateContext.concatenationScope,
 			codeGenerationResults: generateContext.codeGenerationResults,
 			initFragments,
-			cssExports
+			cssExports,
+			get chunkInitFragments() {
+				if (!chunkInitFragments) {
+					const data = generateContext.getData();
+					chunkInitFragments = data.get("chunkInitFragments");
+					if (!chunkInitFragments) {
+						chunkInitFragments = [];
+						data.set("chunkInitFragments", chunkInitFragments);
+					}
+				}
+
+				return chunkInitFragments;
+			}
 		};
 
 		/**

package/lib/css/CssGenerator.js

@@ -38,6 +38,7 @@ class CssGenerator extends Generator {
 
 		generateContext.runtimeRequirements.add(RuntimeGlobals.hasCssModules);
 
+		let chunkInitFragments;
 		const templateContext = {
 			runtimeTemplate: generateContext.runtimeTemplate,
 			dependencyTemplates: generateContext.dependencyTemplates,
@@ -49,7 +50,19 @@ class CssGenerator extends Generator {
 			concatenationScope: generateContext.concatenationScope,
 			codeGenerationResults: generateContext.codeGenerationResults,
 			initFragments,
-			cssExports
+			cssExports,
+			get chunkInitFragments() {
+				if (!chunkInitFragments) {
+					const data = generateContext.getData();
+					chunkInitFragments = data.get("chunkInitFragments");
+					if (!chunkInitFragments) {
+						chunkInitFragments = [];
+						data.set("chunkInitFragments", chunkInitFragments);
+					}
+				}
+
+				return chunkInitFragments;
+			}
 		};
 
 		/**

package/lib/css/CssLoadingRuntimeModule.js

@@ -129,7 +129,7 @@ class CssLoadingRuntimeModule extends RuntimeModule {
 								`link.crossOrigin = ${JSON.stringify(crossOriginLoading)};`
 							),
 							"}"
-					  ])
+						])
 				: ""
 		]);
 
@@ -141,7 +141,7 @@ class CssLoadingRuntimeModule extends RuntimeModule {
 					{ expr: "uniqueName" },
 					"-",
 					{ expr: "chunkId" }
-			  )
+				)
 			: runtimeTemplate.concatenation("--webpack-", { expr: "chunkId" });
 
 		return Template.asString([
@@ -158,7 +158,7 @@ class CssLoadingRuntimeModule extends RuntimeModule {
 			uniqueName
 				? `var uniqueName = ${JSON.stringify(
 						runtimeTemplate.outputOptions.uniqueName
-				  )};`
+					)};`
 				: "// data-webpack is not used as build has no uniqueName",
 			`var loadCssChunkData = ${runtimeTemplate.basicFunction(
 				"target, link, chunkId",
@@ -210,10 +210,10 @@ class CssLoadingRuntimeModule extends RuntimeModule {
 											{ expr: "token" },
 											"-",
 											{ expr: "exports[x]" }
-									  )
+										)
 									: runtimeTemplate.concatenation({ expr: "token" }, "-", {
 											expr: "exports[x]"
-									  })
+										})
 							}`,
 							"x"
 						)}); exportsWithDashes.forEach(${runtimeTemplate.expressionFunction(
@@ -292,18 +292,18 @@ class CssLoadingRuntimeModule extends RuntimeModule {
 			initialChunkIdsWithCss.size > 2
 				? `${JSON.stringify(
 						Array.from(initialChunkIdsWithCss)
-				  )}.forEach(loadCssChunkData.bind(null, ${
+					)}.forEach(loadCssChunkData.bind(null, ${
 						RuntimeGlobals.moduleFactories
-				  }, 0));`
+					}, 0));`
 				: initialChunkIdsWithCss.size > 0
-				? `${Array.from(
-						initialChunkIdsWithCss,
-						id =>
-							`loadCssChunkData(${
-								RuntimeGlobals.moduleFactories
-							}, 0, ${JSON.stringify(id)});`
-				  ).join("")}`
-				: "// no initial css",
+					? `${Array.from(
+							initialChunkIdsWithCss,
+							id =>
+								`loadCssChunkData(${
+									RuntimeGlobals.moduleFactories
+								}, 0, ${JSON.stringify(id)});`
+						).join("")}`
+					: "// no initial css",
 			"",
 			withLoading
 				? Template.asString([
@@ -345,11 +345,11 @@ class CssLoadingRuntimeModule extends RuntimeModule {
 														'if(event.type !== "load") {',
 														Template.indent([
 															"var errorType = event && event.type;",
-															"var realSrc = event && event.target && event.target.src;",
-															"error.message = 'Loading css chunk ' + chunkId + ' failed.\\n(' + errorType + ': ' + realSrc + ')';",
+															"var realHref = event && event.target && event.target.href;",
+															"error.message = 'Loading css chunk ' + chunkId + ' failed.\\n(' + errorType + ': ' + realHref + ')';",
 															"error.name = 'ChunkLoadError';",
 															"error.type = errorType;",
-															"error.request = realSrc;",
+															"error.request = realHref;",
 															"installedChunkData[1](error);"
 														]),
 														"} else {",
@@ -372,7 +372,7 @@ class CssLoadingRuntimeModule extends RuntimeModule {
 							]),
 							"}"
 						])};`
-				  ])
+					])
 				: "// no chunk loading",
 			"",
 			withHmr
@@ -435,11 +435,11 @@ class CssLoadingRuntimeModule extends RuntimeModule {
 													'if(event.type !== "load") {',
 													Template.indent([
 														"var errorType = event && event.type;",
-														"var realSrc = event && event.target && event.target.src;",
-														"error.message = 'Loading css hot update chunk ' + chunkId + ' failed.\\n(' + errorType + ': ' + realSrc + ')';",
+														"var realHref = event && event.target && event.target.href;",
+														"error.message = 'Loading css hot update chunk ' + chunkId + ' failed.\\n(' + errorType + ': ' + realHref + ')';",
 														"error.name = 'ChunkLoadError';",
 														"error.type = errorType;",
-														"error.request = realSrc;",
+														"error.request = realHref;",
 														"reject(error);"
 													]),
 													"} else {",
@@ -464,7 +464,7 @@ class CssLoadingRuntimeModule extends RuntimeModule {
 								])});`
 							]
 						)}`
-				  ])
+					])
 				: "// no hmr"
 		]);
 	}