webpack 5.102.1 → 5.103.0

package/lib/asset/AssetSourceGenerator.js

@@ -65,7 +65,7 @@ class AssetSourceGenerator extends Generator {
 					} = ${JSON.stringify(encodedSource)};`;
 				} else {
 					runtimeRequirements.add(RuntimeGlobals.module);
-					sourceContent = `${RuntimeGlobals.module}.exports = ${JSON.stringify(
+					sourceContent = `${module.moduleArgument}.exports = ${JSON.stringify(
 						encodedSource
 					)};`;
 				}

package/lib/config/browserslistTargetHandler.js

@@ -354,6 +354,11 @@ const resolve = (browsers) => {
 			rawChecker({
 				node: [14, 18]
 			}),
+		importMetaDirnameAndFilename:
+			nodeProperty &&
+			rawChecker({
+				node: [22, 16]
+			}),
 		require: nodeProperty
 	};
 };

package/lib/config/defaults.js

@@ -202,6 +202,7 @@ const {
  * & { performance: NonNullable<WebpackOptionsNormalized["performance"]> }
  * & { recordsInputPath: NonNullable<WebpackOptionsNormalized["recordsInputPath"]> }
  * & { recordsOutputPath: NonNullable<WebpackOptionsNormalized["recordsOutputPath"]>
+ * & { dotenv: NonNullable<WebpackOptionsNormalized["dotenv"]> }
  * }} WebpackOptionsNormalizedWithDefaults
  */
 
@@ -410,7 +411,10 @@ const applyWebpackOptionsDefaults = (options, compilerIndex) => {
 
 	applyExternalsPresetsDefaults(options.externalsPresets, {
 		targetProperties,
-		buildHttp: Boolean(options.experiments.buildHttp)
+		buildHttp: Boolean(options.experiments.buildHttp),
+		outputModule:
+			/** @type {NonNullable<WebpackOptionsNormalized["output"]["module"]>} */
+			(options.output.module)
 	});
 
 	applyLoaderDefaults(
@@ -513,6 +517,7 @@ const applyExperimentsDefaults = (
 ) => {
 	D(experiments, "futureDefaults", false);
 	D(experiments, "backCompat", !experiments.futureDefaults);
+	// TODO do we need sync web assembly in webpack@6?
 	D(experiments, "syncWebAssembly", false);
 	D(experiments, "asyncWebAssembly", experiments.futureDefaults);
 	D(experiments, "outputModule", false);
@@ -1042,6 +1047,35 @@ const applyModuleDefaults = (
 				type: CSS_MODULE_TYPE,
 				resolve
 			});
+			// For CSS modules, i.e. `.class { composes: className from "./style.css" }`
+			// We inherit for such constructions
+			rules.push({
+				dependency: /css-import-local-module/,
+				type: CSS_MODULE_TYPE_MODULE,
+				resolve
+			});
+			rules.push({
+				dependency: /css-import-global-module/,
+				type: CSS_MODULE_TYPE_GLOBAL,
+				resolve
+			});
+
+			rules.push(
+				{
+					with: { type: "css" },
+					parser: {
+						exportType: "css-style-sheet"
+					},
+					resolve
+				},
+				{
+					assert: { type: "css" },
+					parser: {
+						exportType: "css-style-sheet"
+					},
+					resolve
+				}
+			);
 		}
 		rules.push(
 			{
@@ -1058,11 +1092,13 @@ const applyModuleDefaults = (
 			},
 			{
 				with: { type: JSON_MODULE_TYPE },
-				type: JSON_MODULE_TYPE
+				type: JSON_MODULE_TYPE,
+				parser: { namedExports: false }
 			},
 			{
 				assert: { type: JSON_MODULE_TYPE },
-				type: JSON_MODULE_TYPE
+				type: JSON_MODULE_TYPE,
+				parser: { namedExports: false }
 			},
 			{
 				with: { type: "text" },
@@ -1220,6 +1256,13 @@ const applyOutputDefaults = (
 				/** @type {boolean | undefined} */ (tp.nodePrefixForCoreModules)
 			)
 	);
+	F(
+		environment,
+		"importMetaDirnameAndFilename",
+		() =>
+			// No optimistic, because it is new
+			tp && /** @type {boolean | undefined} */ (tp.importMetaDirnameAndFilename)
+	);
 	F(
 		environment,
 		"templateLiteral",
@@ -1301,6 +1344,8 @@ const applyOutputDefaults = (
 		if (tp) {
 			if (tp.global) return "global";
 			if (tp.globalThis) return "globalThis";
+			// For universal target (i.e. code can be run in browser/node/worker etc.)
+			if (tp.web === null && tp.node === null && tp.module) return "globalThis";
 		}
 		return "self";
 	});
@@ -1403,7 +1448,6 @@ const applyOutputDefaults = (
 			if (tp.nodeBuiltins) return "async-node";
 			if (
 				(tp.nodeBuiltins === null || tp.fetchWasm === null) &&
-				asyncWebAssembly &&
 				output.module &&
 				environment.dynamicImport
 			) {
@@ -1527,35 +1571,47 @@ const applyOutputDefaults = (
  * @param {object} options options
  * @param {TargetProperties | false} options.targetProperties target properties
  * @param {boolean} options.buildHttp buildHttp experiment enabled
+ * @param {boolean} options.outputModule is output type is module
  * @returns {void}
  */
 const applyExternalsPresetsDefaults = (
 	externalsPresets,
-	{ targetProperties, buildHttp }
+	{ targetProperties, buildHttp, outputModule }
 ) => {
+	/**
+	 * @param {keyof TargetProperties} key a key
+	 * @returns {boolean} true when target is universal, otherwise false
+	 */
+	const isUniversal = (key) =>
+		Boolean(outputModule && targetProperties && targetProperties[key] === null);
+
 	D(
 		externalsPresets,
 		"web",
 		/** @type {boolean | undefined} */
-		(!buildHttp && targetProperties && targetProperties.web)
+		(
+			!buildHttp &&
+				targetProperties &&
+				(targetProperties.web || isUniversal("node"))
+		)
 	);
 	D(
 		externalsPresets,
 		"node",
 		/** @type {boolean | undefined} */
-		(targetProperties && targetProperties.node)
+		(targetProperties && (targetProperties.node || isUniversal("node")))
 	);
 	D(
 		externalsPresets,
 		"nwjs",
 		/** @type {boolean | undefined} */
-		(targetProperties && targetProperties.nwjs)
+		(targetProperties && (targetProperties.nwjs || isUniversal("nwjs")))
 	);
 	D(
 		externalsPresets,
 		"electron",
 		/** @type {boolean | undefined} */
-		(targetProperties && targetProperties.electron)
+		((targetProperties && targetProperties.electron) || isUniversal("electron"))
 	);
 	D(
 		externalsPresets,
@@ -1564,7 +1620,7 @@ const applyExternalsPresetsDefaults = (
 		(
 			targetProperties &&
 				targetProperties.electron &&
-				targetProperties.electronMain
+				(targetProperties.electronMain || isUniversal("electronMain"))
 		)
 	);
 	D(
@@ -1574,7 +1630,7 @@ const applyExternalsPresetsDefaults = (
 		(
 			targetProperties &&
 				targetProperties.electron &&
-				targetProperties.electronPreload
+				(targetProperties.electronPreload || isUniversal("electronPreload"))
 		)
 	);
 	D(
@@ -1584,7 +1640,7 @@ const applyExternalsPresetsDefaults = (
 		(
 			targetProperties &&
 				targetProperties.electron &&
-				targetProperties.electronRenderer
+				(targetProperties.electronRenderer || isUniversal("electronRenderer"))
 		)
 	);
 };
@@ -1629,15 +1685,28 @@ const applyNodeDefaults = (
 
 	F(node, "global", () => {
 		if (targetProperties && targetProperties.global) return false;
-		// TODO webpack 6 should always default to false
+		// We use `warm` because overriding `global` with `globalThis` (or a polyfill) is sometimes safe (global.URL), sometimes unsafe (global.process), but we need to warn about it
 		return futureDefaults ? "warn" : true;
 	});
 
 	const handlerForNames = () => {
-		if (targetProperties && targetProperties.node) {
-			return outputModule ? "node-module" : "eval-only";
+		// TODO webpack@6 remove `node-module` in favor of `eval-only`
+		if (targetProperties) {
+			if (targetProperties.node) {
+				return "eval-only";
+			}
+
+			// For the "universal" target we only evaluate these values
+			if (
+				outputModule &&
+				targetProperties.node === null &&
+				targetProperties.web === null
+			) {
+				return "eval-only";
+			}
 		}
-		// TODO webpack 6 should always default to false
+
+		// TODO webpack@6 should we use `warn-even-only`?
 		return futureDefaults ? "warn-mock" : "mock";
 	};
 
@@ -1844,8 +1913,8 @@ const getResolveDefaults = ({
 		styleConditions.push(mode === "development" ? "development" : "production");
 		styleConditions.push("style");
 
-		/** @type {NonNullable<ResolveOptions["byDependency"]>} */
-		(resolveOptions.byDependency)["css-import"] = {
+		/** @type {ResolveOptions} */
+		const cssResolveOptions = {
 			// 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
@@ -1855,6 +1924,17 @@ const getResolveDefaults = ({
 			extensions: [".css"],
 			preferRelative: true
 		};
+
+		/** @type {NonNullable<ResolveOptions["byDependency"]>} */
+		(resolveOptions.byDependency)["css-import"] = cssResolveOptions;
+		// For CSS modules, i.e. `.class { composes: className from "./style.css" }`
+		// We inherit for such constructions
+		/** @type {NonNullable<ResolveOptions["byDependency"]>} */
+		(resolveOptions.byDependency)["css-import-local-module"] =
+			cssResolveOptions;
+		/** @type {NonNullable<ResolveOptions["byDependency"]>} */
+		(resolveOptions.byDependency)["css-import-global-module"] =
+			cssResolveOptions;
 	}
 
 	return resolveOptions;

package/lib/config/normalization.js

@@ -178,6 +178,7 @@ const getNormalizedWebpackOptions = (config) => ({
 		return { ...devServer };
 	}),
 	devtool: config.devtool,
+	dotenv: config.dotenv,
 	entry:
 		config.entry === undefined
 			? { main: {} }
@@ -241,6 +242,7 @@ const getNormalizedWebpackOptions = (config) => ({
 				unsafeCache: module.unsafeCache,
 				parser: keyedNestedConfig(module.parser, cloneObject, {
 					javascript: (parserOptions) => ({
+						// TODO webpack 6 remove from `ModuleOptions`, keep only `*ByModuleType`
 						unknownContextRequest: module.unknownContextRequest,
 						unknownContextRegExp: module.unknownContextRegExp,
 						unknownContextRecursive: module.unknownContextRecursive,
@@ -252,7 +254,6 @@ const getNormalizedWebpackOptions = (config) => ({
 						wrappedContextRegExp: module.wrappedContextRegExp,
 						wrappedContextRecursive: module.wrappedContextRecursive,
 						wrappedContextCritical: module.wrappedContextCritical,
-						// TODO webpack 6 remove
 						strictExportPresence: module.strictExportPresence,
 						strictThisContextOnImports: module.strictThisContextOnImports,
 						...parserOptions

package/lib/config/target.js

@@ -42,6 +42,7 @@ const getDefaultTarget = (context) => {
  * @property {boolean | null} require has require function available
  * @property {boolean | null} nodeBuiltins has node.js built-in modules available
  * @property {boolean | null} nodePrefixForCoreModules node.js allows to use `node:` prefix for 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} importScripts has importScripts available
  * @property {boolean | null} importScriptsInWorker has importScripts available when creating a worker
@@ -178,6 +179,9 @@ You can also more options via the 'target' option: 'browserslist' / 'browserslis
 				nodeBuiltins: true,
 				// v16.0.0, v14.18.0
 				nodePrefixForCoreModules: Number(major) < 15 ? v(14, 18) : v(16),
+				// Added in: v21.2.0, v20.11.0, but Node.js will output experimental warning, we don't want it
+				// v24.0.0, v22.16.0 - This property is no longer experimental.
+				importMetaDirnameAndFilename: v(22, 16),
 				global: true,
 				document: false,
 				fetchWasm: false,
@@ -223,6 +227,8 @@ You can also more options via the 'target' option: 'browserslist' / 'browserslis
 				// 15.0.0	- Node.js	v16.5
 				// 14.0.0 - Mode.js v14.17, but prefixes only since v14.18
 				nodePrefixForCoreModules: v(15),
+				// 37.0.0 - Node.js v22.16
+				importMetaDirnameAndFilename: v(37),
 
 				require: true,
 				document: context === "renderer",