webpack 5.59.0 → 5.94.0

package/lib/config/defaults.js

@@ -7,6 +7,18 @@
 
 const fs = require("fs");
 const path = require("path");
+const {
+	JAVASCRIPT_MODULE_TYPE_AUTO,
+	JSON_MODULE_TYPE,
+	WEBASSEMBLY_MODULE_TYPE_ASYNC,
+	JAVASCRIPT_MODULE_TYPE_ESM,
+	JAVASCRIPT_MODULE_TYPE_DYNAMIC,
+	WEBASSEMBLY_MODULE_TYPE_SYNC,
+	ASSET_MODULE_TYPE,
+	CSS_MODULE_TYPE_AUTO,
+	CSS_MODULE_TYPE,
+	CSS_MODULE_TYPE_MODULE
+} = require("../ModuleTypeConstants");
 const Template = require("../Template");
 const { cleverMerge } = require("../util/cleverMerge");
 const {
@@ -15,33 +27,54 @@ const {
 	getDefaultTarget
 } = require("./target");
 
-/** @typedef {import("../../declarations/WebpackOptions").CacheOptionsNormalized} CacheOptions */
+/** @typedef {import("../../declarations/WebpackOptions").CacheOptions} CacheOptions */
+/** @typedef {import("../../declarations/WebpackOptions").CacheOptionsNormalized} CacheOptionsNormalized */
+/** @typedef {import("../../declarations/WebpackOptions").Context} Context */
+/** @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 */
+/** @typedef {import("../../declarations/WebpackOptions").Environment} Environment */
 /** @typedef {import("../../declarations/WebpackOptions").Experiments} Experiments */
 /** @typedef {import("../../declarations/WebpackOptions").ExperimentsNormalized} ExperimentsNormalized */
 /** @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 */
 /** @typedef {import("../../declarations/WebpackOptions").LibraryName} LibraryName */
 /** @typedef {import("../../declarations/WebpackOptions").LibraryOptions} LibraryOptions */
+/** @typedef {import("../../declarations/WebpackOptions").LibraryType} LibraryType */
 /** @typedef {import("../../declarations/WebpackOptions").Loader} Loader */
 /** @typedef {import("../../declarations/WebpackOptions").Mode} Mode */
 /** @typedef {import("../../declarations/WebpackOptions").ModuleOptionsNormalized} ModuleOptions */
 /** @typedef {import("../../declarations/WebpackOptions").Node} WebpackNode */
 /** @typedef {import("../../declarations/WebpackOptions").Optimization} Optimization */
+/** @typedef {import("../../declarations/WebpackOptions").OptimizationSplitChunksOptions} OptimizationSplitChunksOptions */
 /** @typedef {import("../../declarations/WebpackOptions").OutputNormalized} Output */
+/** @typedef {import("../../declarations/WebpackOptions").ParserOptionsByModuleTypeKnown} ParserOptionsByModuleTypeKnown */
 /** @typedef {import("../../declarations/WebpackOptions").Performance} Performance */
 /** @typedef {import("../../declarations/WebpackOptions").ResolveOptions} ResolveOptions */
 /** @typedef {import("../../declarations/WebpackOptions").RuleSetRules} RuleSetRules */
 /** @typedef {import("../../declarations/WebpackOptions").SnapshotOptions} SnapshotOptions */
 /** @typedef {import("../../declarations/WebpackOptions").Target} Target */
-/** @typedef {import("../../declarations/WebpackOptions").WebpackOptionsNormalized} WebpackOptions */
+/** @typedef {import("../../declarations/WebpackOptions").WebpackOptions} WebpackOptions */
+/** @typedef {import("../../declarations/WebpackOptions").WebpackOptionsNormalized} WebpackOptionsNormalized */
+/** @typedef {import("../Compiler")} Compiler */
+/** @typedef {import("../Module")} Module */
+/** @typedef {import("./target").PlatformTargetProperties} PlatformTargetProperties */
 /** @typedef {import("./target").TargetProperties} TargetProperties */
 
+/**
+ * @typedef {object} ResolvedOptions
+ * @property {PlatformTargetProperties | false} platform - platform target properties
+ */
+
 const NODE_MODULES_REGEXP = /[\\/]node_modules[\\/]/i;
+const DEFAULT_CACHE_NAME = "default";
 
 /**
  * Sets a constant default value when undefined
@@ -90,8 +123,8 @@ const A = (obj, prop, factory) => {
 	if (value === undefined) {
 		obj[prop] = factory();
 	} else if (Array.isArray(value)) {
-		/** @type {any[]} */
-		let newArray = undefined;
+		/** @type {any[] | undefined} */
+		let newArray;
 		for (let i = 0; i < value.length; i++) {
 			const item = value[i];
 			if (item === "...") {
@@ -113,7 +146,7 @@ const A = (obj, prop, factory) => {
 };
 
 /**
- * @param {WebpackOptions} options options to be modified
+ * @param {WebpackOptionsNormalized} options options to be modified
  * @returns {void}
  */
 const applyWebpackOptionsBaseDefaults = options => {
@@ -122,23 +155,27 @@ const applyWebpackOptionsBaseDefaults = options => {
 };
 
 /**
- * @param {WebpackOptions} options options to be modified
- * @returns {void}
+ * @param {WebpackOptionsNormalized} options options to be modified
+ * @param {number} [compilerIndex] index of compiler
+ * @returns {ResolvedOptions} Resolved options after apply defaults
  */
-const applyWebpackOptionsDefaults = options => {
+const applyWebpackOptionsDefaults = (options, compilerIndex) => {
 	F(options, "context", () => process.cwd());
-	F(options, "target", () => {
-		return getDefaultTarget(options.context);
-	});
+	F(options, "target", () =>
+		getDefaultTarget(/** @type {string} */ (options.context))
+	);
 
 	const { mode, name, target } = options;
 
-	let targetProperties =
+	const targetProperties =
 		target === false
 			? /** @type {false} */ (false)
 			: typeof target === "string"
-			? getTargetProperties(target, options.context)
-			: getTargetsProperties(target, 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;
@@ -160,20 +197,27 @@ const applyWebpackOptionsDefaults = options => {
 	D(options, "recordsInputPath", false);
 	D(options, "recordsOutputPath", false);
 
-	applyExperimentsDefaults(options.experiments, { production, development });
+	applyExperimentsDefaults(options.experiments, {
+		production,
+		development,
+		targetProperties
+	});
 
-	const futureDefaults = options.experiments.futureDefaults;
+	const futureDefaults =
+		/** @type {NonNullable<ExperimentsNormalized["futureDefaults"]>} */
+		(options.experiments.futureDefaults);
 
 	F(options, "cache", () =>
 		development ? { type: /** @type {"memory"} */ ("memory") } : false
 	);
 	applyCacheDefaults(options.cache, {
-		name: name || "default",
+		name: name || DEFAULT_CACHE_NAME,
 		mode: mode || "production",
 		development,
-		cacheUnaffected: options.experiments.cacheUnaffected
+		cacheUnaffected: options.experiments.cacheUnaffected,
+		compilerIndex
 	});
-	const cache = !!options.cache;
+	const cache = Boolean(options.cache);
 
 	applySnapshotDefaults(options.snapshot, {
 		production,
@@ -182,31 +226,47 @@ const applyWebpackOptionsDefaults = options => {
 
 	applyModuleDefaults(options.module, {
 		cache,
-		syncWebAssembly: options.experiments.syncWebAssembly,
-		asyncWebAssembly: options.experiments.asyncWebAssembly
+		syncWebAssembly:
+			/** @type {NonNullable<ExperimentsNormalized["syncWebAssembly"]>} */
+			(options.experiments.syncWebAssembly),
+		asyncWebAssembly:
+			/** @type {NonNullable<ExperimentsNormalized["asyncWebAssembly"]>} */
+			(options.experiments.asyncWebAssembly),
+		css:
+			/** @type {NonNullable<ExperimentsNormalized["css"]>} */
+			(options.experiments.css),
+		futureDefaults,
+		isNode: targetProperties && targetProperties.node === true,
+		targetProperties
 	});
 
 	applyOutputDefaults(options.output, {
-		context: options.context,
+		context: /** @type {Context} */ (options.context),
 		targetProperties,
 		isAffectedByBrowserslist:
 			target === undefined ||
 			(typeof target === "string" && target.startsWith("browserslist")) ||
 			(Array.isArray(target) &&
 				target.some(target => target.startsWith("browserslist"))),
-		outputModule: options.experiments.outputModule,
+		outputModule:
+			/** @type {NonNullable<ExperimentsNormalized["outputModule"]>} */
+			(options.experiments.outputModule),
 		development,
 		entry: options.entry,
-		module: options.module,
 		futureDefaults
 	});
 
 	applyExternalsPresetsDefaults(options.externalsPresets, {
 		targetProperties,
-		buildHttp: !!options.experiments.buildHttp
+		buildHttp: Boolean(options.experiments.buildHttp)
 	});
 
-	applyLoaderDefaults(options.loader, { targetProperties });
+	applyLoaderDefaults(
+		/** @type {NonNullable<WebpackOptionsNormalized["loader"]>} */ (
+			options.loader
+		),
+		{ targetProperties, environment: options.output.environment }
+	);
 
 	F(options, "externalsType", () => {
 		const validExternalTypes = require("../../schemas/WebpackOptions.json")
@@ -215,12 +275,15 @@ const applyWebpackOptionsDefaults = options => {
 			validExternalTypes.includes(options.output.library.type)
 			? /** @type {ExternalsType} */ (options.output.library.type)
 			: options.output.module
-			? "module"
-			: "var";
+				? "module-import"
+				: "var";
 	});
 
 	applyNodeDefaults(options.node, {
-		futureDefaults: options.experiments.futureDefaults,
+		futureDefaults:
+			/** @type {NonNullable<WebpackOptionsNormalized["experiments"]["futureDefaults"]>} */
+			(options.experiments.futureDefaults),
+		outputModule: options.output.module,
 		targetProperties
 	});
 
@@ -231,22 +294,32 @@ const applyWebpackOptionsDefaults = options => {
 			? {}
 			: false
 	);
-	applyPerformanceDefaults(options.performance, {
-		production
-	});
+	applyPerformanceDefaults(
+		/** @type {NonNullable<WebpackOptionsNormalized["performance"]>} */
+		(options.performance),
+		{
+			production
+		}
+	);
 
 	applyOptimizationDefaults(options.optimization, {
 		development,
 		production,
-		records: !!(options.recordsInputPath || options.recordsOutputPath)
+		css:
+			/** @type {NonNullable<ExperimentsNormalized["css"]>} */
+			(options.experiments.css),
+		records: Boolean(options.recordsInputPath || options.recordsOutputPath)
 	});
 
 	options.resolve = cleverMerge(
 		getResolveDefaults({
 			cache,
-			context: options.context,
+			context: /** @type {Context} */ (options.context),
 			targetProperties,
-			mode: options.mode
+			mode: /** @type {Mode} */ (options.mode),
+			css:
+				/** @type {NonNullable<ExperimentsNormalized["css"]>} */
+				(options.experiments.css)
 		}),
 		options.resolve
 	);
@@ -255,26 +328,51 @@ const applyWebpackOptionsDefaults = options => {
 		getResolveLoaderDefaults({ cache }),
 		options.resolveLoader
 	);
+
+	return {
+		platform:
+			targetProperties === false
+				? targetProperties
+				: {
+						web: targetProperties.web,
+						browser: targetProperties.browser,
+						webworker: targetProperties.webworker,
+						node: targetProperties.node,
+						nwjs: targetProperties.nwjs,
+						electron: targetProperties.electron
+					}
+	};
 };
 
 /**
  * @param {ExperimentsNormalized} experiments options
- * @param {Object} options options
+ * @param {object} options options
  * @param {boolean} options.production is production
  * @param {boolean} options.development is development mode
+ * @param {TargetProperties | false} options.targetProperties target properties
  * @returns {void}
  */
-const applyExperimentsDefaults = (experiments, { production, development }) => {
-	D(experiments, "topLevelAwait", false);
+const applyExperimentsDefaults = (
+	experiments,
+	{ production, development, targetProperties }
+) => {
+	D(experiments, "futureDefaults", false);
+	D(experiments, "backCompat", !experiments.futureDefaults);
 	D(experiments, "syncWebAssembly", false);
-	D(experiments, "asyncWebAssembly", false);
+	D(experiments, "asyncWebAssembly", experiments.futureDefaults);
 	D(experiments, "outputModule", false);
-	D(experiments, "asset", false);
 	D(experiments, "layers", false);
 	D(experiments, "lazyCompilation", undefined);
 	D(experiments, "buildHttp", undefined);
-	D(experiments, "futureDefaults", false);
 	D(experiments, "cacheUnaffected", experiments.futureDefaults);
+	F(experiments, "css", () => (experiments.futureDefaults ? true : undefined));
+
+	// TODO webpack 6: remove this. topLevelAwait should be enabled by default
+	let shouldEnableTopLevelAwait = true;
+	if (typeof experiments.topLevelAwait === "boolean") {
+		shouldEnableTopLevelAwait = experiments.topLevelAwait;
+	}
+	D(experiments, "topLevelAwait", shouldEnableTopLevelAwait);
 
 	if (typeof experiments.buildHttp === "object") {
 		D(experiments.buildHttp, "frozen", production);
@@ -283,31 +381,37 @@ const applyExperimentsDefaults = (experiments, { production, development }) => {
 };
 
 /**
- * @param {CacheOptions} cache options
- * @param {Object} options options
+ * @param {CacheOptionsNormalized} cache options
+ * @param {object} options options
  * @param {string} options.name name
- * @param {string} options.mode mode
+ * @param {Mode} options.mode mode
  * @param {boolean} options.development is development mode
- * @param {boolean} options.cacheUnaffected the cacheUnaffected experiment is enabled
+ * @param {number} [options.compilerIndex] index of compiler
+ * @param {Experiments["cacheUnaffected"]} options.cacheUnaffected the cacheUnaffected experiment is enabled
  * @returns {void}
  */
 const applyCacheDefaults = (
 	cache,
-	{ name, mode, development, cacheUnaffected }
+	{ name, mode, development, cacheUnaffected, compilerIndex }
 ) => {
 	if (cache === false) return;
 	switch (cache.type) {
 		case "filesystem":
-			F(cache, "name", () => name + "-" + mode);
+			F(cache, "name", () =>
+				compilerIndex !== undefined
+					? `${`${name}-${mode}`}__compiler${compilerIndex + 1}__`
+					: `${name}-${mode}`
+			);
 			D(cache, "version", "");
 			F(cache, "cacheDirectory", () => {
 				const cwd = process.cwd();
+				/** @type {string | undefined} */
 				let dir = cwd;
 				for (;;) {
 					try {
 						if (fs.statSync(path.join(dir, "package.json")).isFile()) break;
 						// eslint-disable-next-line no-empty
-					} catch (e) {}
+					} catch (_err) {}
 					const parent = path.dirname(dir);
 					if (dir === parent) {
 						dir = undefined;
@@ -321,12 +425,15 @@ const applyCacheDefaults = (
 					return path.resolve(dir, ".pnp/.cache/webpack");
 				} else if (process.versions.pnp === "3") {
 					return path.resolve(dir, ".yarn/.cache/webpack");
-				} else {
-					return path.resolve(dir, "node_modules/.cache/webpack");
 				}
+				return path.resolve(dir, "node_modules/.cache/webpack");
 			});
 			F(cache, "cacheLocation", () =>
-				path.resolve(cache.cacheDirectory, cache.name)
+				path.resolve(
+					/** @type {NonNullable<FileCacheOptions["cacheDirectory"]>} */
+					(cache.cacheDirectory),
+					/** @type {NonNullable<FileCacheOptions["name"]>} */ (cache.name)
+				)
 			);
 			D(cache, "hashAlgorithm", "md4");
 			D(cache, "store", "pack");
@@ -339,9 +446,13 @@ const applyCacheDefaults = (
 			D(cache, "maxAge", 1000 * 60 * 60 * 24 * 60); // 1 month
 			D(cache, "allowCollectingMemory", development);
 			D(cache, "memoryCacheUnaffected", development && cacheUnaffected);
-			D(cache.buildDependencies, "defaultWebpack", [
-				path.resolve(__dirname, "..") + path.sep
-			]);
+			D(cache, "readonly", false);
+			D(
+				/** @type {NonNullable<FileCacheOptions["buildDependencies"]>} */
+				(cache.buildDependencies),
+				"defaultWebpack",
+				[path.resolve(__dirname, "..") + path.sep]
+			);
 			break;
 		case "memory":
 			D(cache, "maxGenerations", Infinity);
@@ -352,7 +463,7 @@ const applyCacheDefaults = (
 
 /**
  * @param {SnapshotOptions} snapshot options
- * @param {Object} options options
+ * @param {object} options options
  * @param {boolean} options.production is production
  * @param {boolean} options.futureDefaults is future defaults enabled
  * @returns {void}
@@ -363,7 +474,7 @@ const applySnapshotDefaults = (snapshot, { production, futureDefaults }) => {
 			process.versions.pnp === "3"
 				? [
 						/^(.+?(?:[\\/]\.yarn[\\/]unplugged[\\/][^\\/]+)?[\\/]node_modules[\\/])/
-				  ]
+					]
 				: [/^(.+?[\\/]node_modules[\\/])/]
 		);
 		F(snapshot, "immutablePaths", () =>
@@ -382,8 +493,7 @@ const applySnapshotDefaults = (snapshot, { production, futureDefaults }) => {
 					return [path.resolve(match[1], "unplugged")];
 				}
 			} else {
-				const match = /^(.+?[\\/]node_modules)[\\/]/.exec(
-					// eslint-disable-next-line node/no-extraneous-require
+				const match = /^(.+?[\\/]node_modules[\\/])/.exec(
 					require.resolve("watchpack")
 				);
 				if (match) {
@@ -413,6 +523,7 @@ const applySnapshotDefaults = (snapshot, { production, futureDefaults }) => {
 			return [];
 		});
 	}
+	F(snapshot, "unmanagedPaths", () => []);
 	F(snapshot, "resolveBuildDependencies", () => ({
 		timestamp: true,
 		hash: true
@@ -428,9 +539,15 @@ const applySnapshotDefaults = (snapshot, { production, futureDefaults }) => {
 
 /**
  * @param {JavascriptParserOptions} parserOptions parser options
+ * @param {object} options options
+ * @param {boolean} options.futureDefaults is future defaults enabled
+ * @param {boolean} options.isNode is node target platform
  * @returns {void}
  */
-const applyJavascriptParserOptionsDefaults = parserOptions => {
+const applyJavascriptParserOptionsDefaults = (
+	parserOptions,
+	{ futureDefaults, isNode }
+) => {
 	D(parserOptions, "unknownContextRequest", ".");
 	D(parserOptions, "unknownContextRegExp", false);
 	D(parserOptions, "unknownContextRecursive", true);
@@ -442,44 +559,148 @@ const applyJavascriptParserOptionsDefaults = parserOptions => {
 	D(parserOptions, "wrappedContextRegExp", /.*/);
 	D(parserOptions, "wrappedContextRecursive", true);
 	D(parserOptions, "wrappedContextCritical", false);
-
-	D(parserOptions, "strictExportPresence", false);
 	D(parserOptions, "strictThisContextOnImports", false);
+	D(parserOptions, "importMeta", true);
+	D(parserOptions, "dynamicImportMode", "lazy");
+	D(parserOptions, "dynamicImportPrefetch", false);
+	D(parserOptions, "dynamicImportPreload", false);
+	D(parserOptions, "dynamicImportFetchPriority", false);
+	D(parserOptions, "createRequire", isNode);
+	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
+	);
+	D(generatorOptions, "esModule", true);
 };
 
 /**
  * @param {ModuleOptions} module options
- * @param {Object} options 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 {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 }
+	{
+		cache,
+		syncWebAssembly,
+		asyncWebAssembly,
+		css,
+		futureDefaults,
+		isNode,
+		targetProperties
+	}
 ) => {
 	if (cache) {
-		D(module, "unsafeCache", module => {
-			const name = module.nameForCondition();
-			return name && NODE_MODULES_REGEXP.test(name);
-		});
+		D(
+			module,
+			"unsafeCache",
+			/**
+			 * @param {Module} module module
+			 * @returns {boolean | null | string} true, if we want to cache the module
+			 */
+			module => {
+				const name = module.nameForCondition();
+				return name && NODE_MODULES_REGEXP.test(name);
+			}
+		);
 	} else {
 		D(module, "unsafeCache", false);
 	}
 
-	F(module.parser, "asset", () => ({}));
-	F(module.parser.asset, "dataUrlCondition", () => ({}));
-	if (typeof module.parser.asset.dataUrlCondition === "object") {
-		D(module.parser.asset.dataUrlCondition, "maxSize", 8096);
+	F(module.parser, ASSET_MODULE_TYPE, () => ({}));
+	F(
+		/** @type {NonNullable<ParserOptionsByModuleTypeKnown["asset"]>} */
+		(module.parser.asset),
+		"dataUrlCondition",
+		() => ({})
+	);
+	if (
+		typeof (
+			/** @type {NonNullable<ParserOptionsByModuleTypeKnown["asset"]>} */
+			(module.parser.asset).dataUrlCondition
+		) === "object"
+	) {
+		D(
+			/** @type {NonNullable<ParserOptionsByModuleTypeKnown["asset"]>} */
+			(module.parser.asset).dataUrlCondition,
+			"maxSize",
+			8096
+		);
 	}
 
 	F(module.parser, "javascript", () => ({}));
-	applyJavascriptParserOptionsDefaults(module.parser.javascript);
+
+	applyJavascriptParserOptionsDefaults(
+		/** @type {NonNullable<ParserOptionsByModuleTypeKnown["javascript"]>} */
+		(module.parser.javascript),
+		{
+			futureDefaults,
+			isNode
+		}
+	);
+
+	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 }
+		);
+
+		F(module.generator, "css/auto", () => ({}));
+		D(
+			module.generator["css/auto"],
+			"localIdentName",
+			"[uniqueName]-[id]-[local]"
+		);
+		D(module.generator["css/auto"], "exportsConvention", "as-is");
+
+		F(module.generator, "css/module", () => ({}));
+		D(
+			module.generator["css/module"],
+			"localIdentName",
+			"[uniqueName]-[id]-[local]"
+		);
+		D(module.generator["css/module"], "exportsConvention", "as-is");
+
+		F(module.generator, "css/global", () => ({}));
+		D(
+			module.generator["css/global"],
+			"localIdentName",
+			"[uniqueName]-[id]-[local]"
+		);
+		D(module.generator["css/global"], "exportsConvention", "as-is");
+	}
 
 	A(module, "defaultRules", () => {
 		const esm = {
-			type: "javascript/esm",
+			type: JAVASCRIPT_MODULE_TYPE_ESM,
 			resolve: {
 				byDependency: {
 					esm: {
@@ -489,21 +710,21 @@ const applyModuleDefaults = (
 			}
 		};
 		const commonjs = {
-			type: "javascript/dynamic"
+			type: JAVASCRIPT_MODULE_TYPE_DYNAMIC
 		};
 		/** @type {RuleSetRules} */
 		const rules = [
 			{
 				mimetype: "application/node",
-				type: "javascript/auto"
+				type: JAVASCRIPT_MODULE_TYPE_AUTO
 			},
 			{
 				test: /\.json$/i,
-				type: "json"
+				type: JSON_MODULE_TYPE
 			},
 			{
 				mimetype: "application/json",
-				type: "json"
+				type: JSON_MODULE_TYPE
 			},
 			{
 				test: /\.mjs$/i,
@@ -536,7 +757,7 @@ const applyModuleDefaults = (
 		];
 		if (asyncWebAssembly) {
 			const wasm = {
-				type: "webassembly/async",
+				type: WEBASSEMBLY_MODULE_TYPE_ASYNC,
 				rules: [
 					{
 						descriptionData: {
@@ -558,7 +779,7 @@ const applyModuleDefaults = (
 			});
 		} else if (syncWebAssembly) {
 			const wasm = {
-				type: "webassembly/sync",
+				type: WEBASSEMBLY_MODULE_TYPE_SYNC,
 				rules: [
 					{
 						descriptionData: {
@@ -579,6 +800,27 @@ const applyModuleDefaults = (
 				...wasm
 			});
 		}
+		if (css) {
+			const resolve = {
+				fullySpecified: true,
+				preferRelative: true
+			};
+			rules.push({
+				test: /\.css$/i,
+				type: CSS_MODULE_TYPE_AUTO,
+				resolve
+			});
+			rules.push({
+				mimetype: "text/css+module",
+				type: CSS_MODULE_TYPE_MODULE,
+				resolve
+			});
+			rules.push({
+				mimetype: "text/css",
+				type: CSS_MODULE_TYPE,
+				resolve
+			});
+		}
 		rules.push(
 			{
 				dependency: "url",
@@ -594,7 +836,11 @@ const applyModuleDefaults = (
 			},
 			{
 				assert: { type: "json" },
-				type: "json"
+				type: JSON_MODULE_TYPE
+			},
+			{
+				with: { type: "json" },
+				type: JSON_MODULE_TYPE
 			}
 		);
 		return rules;
@@ -603,14 +849,13 @@ const applyModuleDefaults = (
 
 /**
  * @param {Output} output options
- * @param {Object} options options
+ * @param {object} options options
  * @param {string} options.context context
  * @param {TargetProperties | false} options.targetProperties target properties
  * @param {boolean} options.isAffectedByBrowserslist is affected by browserslist
  * @param {boolean} options.outputModule is outputModule experiment enabled
  * @param {boolean} options.development is development mode
  * @param {Entry} options.entry entry option
- * @param {ModuleOptions} options.module module option
  * @param {boolean} options.futureDefaults is future defaults enabled
  * @returns {void}
  */
@@ -623,7 +868,6 @@ const applyOutputDefaults = (
 		outputModule,
 		development,
 		entry,
-		module,
 		futureDefaults
 	}
 ) => {
@@ -638,7 +882,7 @@ const applyOutputDefaults = (
 			!Array.isArray(library) &&
 			"type" in library
 				? library.name
-				: /** @type {LibraryName=} */ (library);
+				: /** @type {LibraryName} */ (library);
 		if (Array.isArray(libraryName)) {
 			return libraryName.join(".");
 		} else if (typeof libraryName === "object") {
@@ -650,28 +894,40 @@ const applyOutputDefaults = (
 	};
 
 	F(output, "uniqueName", () => {
-		const libraryName = getLibraryName(output.library);
+		const libraryName = getLibraryName(output.library).replace(
+			/^\[(\\*[\w:]+\\*)\](\.)|(\.)\[(\\*[\w:]+\\*)\](?=\.|$)|\[(\\*[\w:]+\\*)\]/g,
+			(m, a, d1, d2, b, c) => {
+				const content = a || b || c;
+				return content.startsWith("\\") && content.endsWith("\\")
+					? `${d2 || ""}[${content.slice(1, -1)}]${d1 || ""}`
+					: "";
+			}
+		);
 		if (libraryName) return libraryName;
 		const pkgPath = path.resolve(context, "package.json");
 		try {
 			const packageInfo = JSON.parse(fs.readFileSync(pkgPath, "utf-8"));
 			return packageInfo.name || "";
-		} catch (e) {
-			if (e.code !== "ENOENT") {
-				e.message += `\nwhile determining default 'output.uniqueName' from 'name' in ${pkgPath}`;
-				throw e;
+		} catch (err) {
+			if (/** @type {Error & { code: string }} */ (err).code !== "ENOENT") {
+				/** @type {Error & { code: string }} */
+				(err).message +=
+					`\nwhile determining default 'output.uniqueName' from 'name' in ${pkgPath}`;
+				throw err;
 			}
 			return "";
 		}
 	});
 
-	F(output, "module", () => !!outputModule);
+	F(output, "module", () => Boolean(outputModule));
 	D(output, "filename", output.module ? "[name].mjs" : "[name].js");
 	F(output, "iife", () => !output.module);
 	D(output, "importFunctionName", "import");
 	D(output, "importMetaName", "import.meta");
 	F(output, "chunkFilename", () => {
-		const filename = output.filename;
+		const filename =
+			/** @type {NonNullable<Output["chunkFilename"]>} */
+			(output.filename);
 		if (typeof filename !== "function") {
 			const hasName = filename.includes("[name]");
 			const hasId = filename.includes("[id]");
@@ -684,20 +940,34 @@ const applyOutputDefaults = (
 		}
 		return output.module ? "[id].mjs" : "[id].js";
 	});
+	F(output, "cssFilename", () => {
+		const filename =
+			/** @type {NonNullable<Output["cssFilename"]>} */
+			(output.filename);
+		if (typeof filename !== "function") {
+			return filename.replace(/\.[mc]?js(\?|$)/, ".css$1");
+		}
+		return "[id].css";
+	});
+	F(output, "cssChunkFilename", () => {
+		const chunkFilename =
+			/** @type {NonNullable<Output["cssChunkFilename"]>} */
+			(output.chunkFilename);
+		if (typeof chunkFilename !== "function") {
+			return chunkFilename.replace(/\.[mc]?js(\?|$)/, ".css$1");
+		}
+		return "[id].css";
+	});
+	D(output, "cssHeadDataCompression", !development);
 	D(output, "assetModuleFilename", "[hash][ext][query]");
 	D(output, "webassemblyModuleFilename", "[hash].module.wasm");
 	D(output, "compareBeforeEmit", true);
 	D(output, "charset", true);
-	F(output, "hotUpdateGlobal", () =>
-		Template.toIdentifier(
-			"webpackHotUpdate" + Template.toIdentifier(output.uniqueName)
-		)
-	);
-	F(output, "chunkLoadingGlobal", () =>
-		Template.toIdentifier(
-			"webpackChunk" + Template.toIdentifier(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";
@@ -716,8 +986,9 @@ const applyOutputDefaults = (
 				throw new Error(
 					"For the selected environment is no default ESM chunk format available:\n" +
 						"ESM exports can be chosen when 'import()' is available.\n" +
-						"JSONP Array push can be chosen when 'document' is available.\n" +
-						helpMessage
+						`JSONP Array push can be chosen when 'document' is available.\n${
+							helpMessage
+						}`
 				);
 			} else {
 				if (tp.document) return "array-push";
@@ -727,8 +998,9 @@ const applyOutputDefaults = (
 				throw new Error(
 					"For the selected environment is no default script chunk format available:\n" +
 						"JSONP Array push can be chosen when 'document' or 'importScripts' is available.\n" +
-						"CommonJs exports can be chosen when 'require' or node builtins are available.\n" +
-						helpMessage
+						`CommonJs exports can be chosen when 'require' or node builtins are available.\n${
+							helpMessage
+						}`
 				);
 			}
 		}
@@ -736,6 +1008,7 @@ const applyOutputDefaults = (
 			"Chunk format can't be selected by default when no target is specified"
 		);
 	});
+	D(output, "asyncChunks", true);
 	F(output, "chunkLoading", () => {
 		if (tp) {
 			switch (output.chunkFormat) {
@@ -748,7 +1021,7 @@ const applyOutputDefaults = (
 					if (tp.nodeBuiltins) return "async-node";
 					break;
 				case "module":
-					if (tp.dynamicImport) return "import";
+					if (tp.dynamicImport || output.module) return "import";
 					break;
 			}
 			if (
@@ -773,7 +1046,7 @@ const applyOutputDefaults = (
 					if (tp.nodeBuiltins) return "async-node";
 					break;
 				case "module":
-					if (tp.dynamicImportInWorker) return "import";
+					if (tp.dynamicImportInWorker || output.module) return "import";
 					break;
 			}
 			if (
@@ -820,28 +1093,110 @@ const applyOutputDefaults = (
 			? "auto"
 			: ""
 	);
+	D(output, "workerPublicPath", "");
 	D(output, "chunkLoadTimeout", 120000);
 	D(output, "hashFunction", futureDefaults ? "xxhash64" : "md4");
 	D(output, "hashDigest", "hex");
-	D(output, "hashDigestLength", 20);
+	D(output, "hashDigestLength", futureDefaults ? 16 : 20);
+	D(output, "strictModuleErrorHandling", false);
 	D(output, "strictModuleExceptionHandling", false);
 
+	const environment = /** @type {Environment} */ (output.environment);
+	/**
+	 * @param {boolean | undefined} v value
+	 * @returns {boolean} true, when v is truthy or undefined
+	 */
 	const optimistic = v => v || v === undefined;
+	/**
+	 * @param {boolean | undefined} v value
+	 * @param {boolean | undefined} c condition
+	 * @returns {boolean | undefined} true, when v is truthy or undefined, or c is truthy
+	 */
+	const conditionallyOptimistic = (v, c) => (v === undefined && c) || v;
+
+	F(
+		environment,
+		"globalThis",
+		() => /** @type {boolean | undefined} */ (tp && tp.globalThis)
+	);
+	F(
+		environment,
+		"bigIntLiteral",
+		() =>
+			tp && optimistic(/** @type {boolean | undefined} */ (tp.bigIntLiteral))
+	);
 	F(
-		output.environment,
+		environment,
+		"const",
+		() => tp && optimistic(/** @type {boolean | undefined} */ (tp.const))
+	);
+	F(
+		environment,
 		"arrowFunction",
-		() => tp && optimistic(tp.arrowFunction)
+		() =>
+			tp && optimistic(/** @type {boolean | undefined} */ (tp.arrowFunction))
 	);
-	F(output.environment, "const", () => tp && optimistic(tp.const));
 	F(
-		output.environment,
+		environment,
+		"asyncFunction",
+		() =>
+			tp && optimistic(/** @type {boolean | undefined} */ (tp.asyncFunction))
+	);
+	F(
+		environment,
+		"forOf",
+		() => tp && optimistic(/** @type {boolean | undefined} */ (tp.forOf))
+	);
+	F(
+		environment,
 		"destructuring",
-		() => tp && optimistic(tp.destructuring)
+		() =>
+			tp && optimistic(/** @type {boolean | undefined} */ (tp.destructuring))
+	);
+	F(
+		environment,
+		"optionalChaining",
+		() =>
+			tp && optimistic(/** @type {boolean | undefined} */ (tp.optionalChaining))
+	);
+	F(
+		environment,
+		"nodePrefixForCoreModules",
+		() =>
+			tp &&
+			optimistic(
+				/** @type {boolean | undefined} */ (tp.nodePrefixForCoreModules)
+			)
+	);
+	F(
+		environment,
+		"templateLiteral",
+		() =>
+			tp && optimistic(/** @type {boolean | undefined} */ (tp.templateLiteral))
+	);
+	F(environment, "dynamicImport", () =>
+		conditionallyOptimistic(
+			/** @type {boolean | undefined} */ (tp && tp.dynamicImport),
+			output.module
+		)
+	);
+	F(environment, "dynamicImportInWorker", () =>
+		conditionallyOptimistic(
+			/** @type {boolean | undefined} */ (tp && tp.dynamicImportInWorker),
+			output.module
+		)
+	);
+	F(environment, "module", () =>
+		conditionallyOptimistic(
+			/** @type {boolean | undefined} */ (tp && tp.module),
+			output.module
+		)
+	);
+	F(
+		environment,
+		"document",
+		() => tp && optimistic(/** @type {boolean | undefined} */ (tp.document))
 	);
-	F(output.environment, "forOf", () => tp && optimistic(tp.forOf));
-	F(output.environment, "bigIntLiteral", () => tp && tp.bigIntLiteral);
-	F(output.environment, "dynamicImport", () => tp && tp.dynamicImport);
-	F(output.environment, "module", () => tp && tp.module);
 
 	const { trustedTypes } = output;
 	if (trustedTypes) {
@@ -849,8 +1204,10 @@ const applyOutputDefaults = (
 			trustedTypes,
 			"policyName",
 			() =>
-				output.uniqueName.replace(/[^a-zA-Z0-9\-#=_/@.%]+/g, "_") || "webpack"
+				/** @type {NonNullable<Output["uniqueName"]>} */
+				(output.uniqueName).replace(/[^a-zA-Z0-9\-#=_/@.%]+/g, "_") || "webpack"
 		);
+		D(trustedTypes, "onPolicyCreationFailure", "stop");
 	}
 
 	/**
@@ -859,10 +1216,11 @@ const applyOutputDefaults = (
 	 */
 	const forEachEntry = fn => {
 		for (const name of Object.keys(entry)) {
-			fn(entry[name]);
+			fn(/** @type {{[k: string] : EntryDescription}} */ (entry)[name]);
 		}
 	};
 	A(output, "enabledLibraryTypes", () => {
+		/** @type {LibraryType[]} */
 		const enabledLibraryTypes = [];
 		if (output.library) {
 			enabledLibraryTypes.push(output.library.type);
@@ -910,7 +1268,7 @@ const applyOutputDefaults = (
 
 /**
  * @param {ExternalsPresets} externalsPresets options
- * @param {Object} options options
+ * @param {object} options options
  * @param {TargetProperties | false} options.targetProperties target properties
  * @param {boolean} options.buildHttp buildHttp experiment enabled
  * @returns {void}
@@ -922,45 +1280,67 @@ const applyExternalsPresetsDefaults = (
 	D(
 		externalsPresets,
 		"web",
-		!buildHttp && targetProperties && targetProperties.web
+		/** @type {boolean | undefined} */
+		(!buildHttp && targetProperties && targetProperties.web)
+	);
+	D(
+		externalsPresets,
+		"node",
+		/** @type {boolean | undefined} */
+		(targetProperties && targetProperties.node)
+	);
+	D(
+		externalsPresets,
+		"nwjs",
+		/** @type {boolean | undefined} */
+		(targetProperties && targetProperties.nwjs)
 	);
-	D(externalsPresets, "node", targetProperties && targetProperties.node);
-	D(externalsPresets, "nwjs", targetProperties && targetProperties.nwjs);
 	D(
 		externalsPresets,
 		"electron",
-		targetProperties && targetProperties.electron
+		/** @type {boolean | undefined} */
+		(targetProperties && targetProperties.electron)
 	);
 	D(
 		externalsPresets,
 		"electronMain",
-		targetProperties &&
-			targetProperties.electron &&
-			targetProperties.electronMain
+		/** @type {boolean | undefined} */
+		(
+			targetProperties &&
+				targetProperties.electron &&
+				targetProperties.electronMain
+		)
 	);
 	D(
 		externalsPresets,
 		"electronPreload",
-		targetProperties &&
-			targetProperties.electron &&
-			targetProperties.electronPreload
+		/** @type {boolean | undefined} */
+		(
+			targetProperties &&
+				targetProperties.electron &&
+				targetProperties.electronPreload
+		)
 	);
 	D(
 		externalsPresets,
 		"electronRenderer",
-		targetProperties &&
-			targetProperties.electron &&
-			targetProperties.electronRenderer
+		/** @type {boolean | undefined} */
+		(
+			targetProperties &&
+				targetProperties.electron &&
+				targetProperties.electronRenderer
+		)
 	);
 };
 
 /**
  * @param {Loader} loader options
- * @param {Object} options options
+ * @param {object} options options
  * @param {TargetProperties | false} options.targetProperties target properties
+ * @param {Environment} options.environment environment
  * @returns {void}
  */
-const applyLoaderDefaults = (loader, { targetProperties }) => {
+const applyLoaderDefaults = (loader, { targetProperties, environment }) => {
 	F(loader, "target", () => {
 		if (targetProperties) {
 			if (targetProperties.electron) {
@@ -974,16 +1354,21 @@ const applyLoaderDefaults = (loader, { targetProperties }) => {
 			if (targetProperties.web) return "web";
 		}
 	});
+	D(loader, "environment", environment);
 };
 
 /**
  * @param {WebpackNode} node options
- * @param {Object} options options
+ * @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", () => {
@@ -991,21 +1376,21 @@ 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);
 };
 
 /**
  * @param {Performance} performance options
- * @param {Object} options options
+ * @param {object} options options
  * @param {boolean} options.production is production
  * @returns {void}
  */
@@ -1018,15 +1403,16 @@ const applyPerformanceDefaults = (performance, { production }) => {
 
 /**
  * @param {Optimization} optimization options
- * @param {Object} options options
+ * @param {object} options options
  * @param {boolean} options.production is production
  * @param {boolean} options.development is development
+ * @param {boolean} options.css is css enabled
  * @param {boolean} options.records using records
  * @returns {void}
  */
 const applyOptimizationDefaults = (
 	optimization,
-	{ production, development, records }
+	{ production, development, css, records }
 ) => {
 	D(optimization, "removeAvailableModules", false);
 	D(optimization, "removeEmptyChunks", true);
@@ -1077,7 +1463,9 @@ const applyOptimizationDefaults = (
 	});
 	const { splitChunks } = optimization;
 	if (splitChunks) {
-		A(splitChunks, "defaultSizeTypes", () => ["javascript", "unknown"]);
+		A(splitChunks, "defaultSizeTypes", () =>
+			css ? ["javascript", "css", "unknown"] : ["javascript", "unknown"]
+		);
 		D(splitChunks, "hidePathInfo", production);
 		D(splitChunks, "chunks", "async");
 		D(splitChunks, "usedExports", optimization.usedExports === true);
@@ -1088,7 +1476,9 @@ const applyOptimizationDefaults = (
 		F(splitChunks, "maxAsyncRequests", () => (production ? 30 : Infinity));
 		F(splitChunks, "maxInitialRequests", () => (production ? 30 : Infinity));
 		D(splitChunks, "automaticNameDelimiter", "-");
-		const { cacheGroups } = splitChunks;
+		const cacheGroups =
+			/** @type {NonNullable<OptimizationSplitChunksOptions["cacheGroups"]>} */
+			(splitChunks.cacheGroups);
 		F(cacheGroups, "default", () => ({
 			idHint: "",
 			reuseExistingChunk: true,
@@ -1105,14 +1495,21 @@ const applyOptimizationDefaults = (
 };
 
 /**
- * @param {Object} options options
+ * @param {object} options options
  * @param {boolean} options.cache is cache enable
  * @param {string} options.context build context
  * @param {TargetProperties | false} options.targetProperties target properties
  * @param {Mode} options.mode mode
+ * @param {boolean} options.css is css enabled
  * @returns {ResolveOptions} resolve options
  */
-const getResolveDefaults = ({ cache, context, targetProperties, mode }) => {
+const getResolveDefaults = ({
+	cache,
+	context,
+	targetProperties,
+	mode,
+	css
+}) => {
 	/** @type {string[]} */
 	const conditions = ["webpack"];
 
@@ -1158,6 +1555,7 @@ const getResolveDefaults = ({ cache, context, targetProperties, mode }) => {
 		exportsFields: ["exports"],
 		roots: [context],
 		mainFields: ["main"],
+		importsFields: ["imports"],
 		byDependency: {
 			wasm: esmDeps(),
 			esm: esmDeps(),
@@ -1180,11 +1578,30 @@ const getResolveDefaults = ({ cache, context, targetProperties, mode }) => {
 		}
 	};
 
+	if (css) {
+		const styleConditions = [];
+
+		styleConditions.push("webpack");
+		styleConditions.push(mode === "development" ? "development" : "production");
+		styleConditions.push("style");
+
+		resolveOptions.byDependency["css-import"] = {
+			// We avoid using any main files because we have to be consistent with CSS `@import`
+			// and CSS `@import` does not handle `main` files in directories,
+			// you should always specify the full URL for styles
+			mainFiles: [],
+			mainFields: ["style", "..."],
+			conditionNames: styleConditions,
+			extensions: [".css"],
+			preferRelative: true
+		};
+	}
+
 	return resolveOptions;
 };
 
 /**
- * @param {Object} options options
+ * @param {object} options options
  * @param {boolean} options.cache is cache enable
  * @returns {ResolveOptions} resolve options
  */
@@ -1217,5 +1634,6 @@ const applyInfrastructureLoggingDefaults = infrastructureLogging => {
 	D(infrastructureLogging, "appendOnly", !tty);
 };
 
-exports.applyWebpackOptionsBaseDefaults = applyWebpackOptionsBaseDefaults;
-exports.applyWebpackOptionsDefaults = applyWebpackOptionsDefaults;
+module.exports.applyWebpackOptionsBaseDefaults =
+	applyWebpackOptionsBaseDefaults;
+module.exports.applyWebpackOptionsDefaults = applyWebpackOptionsDefaults;