webpack 5.96.0 → 5.97.0

package/lib/CssModule.js

@@ -65,6 +65,11 @@ class CssModule extends NormalModule {
 			identifier += `|${inheritance.join("|")}`;
 		}
 
+		// We generate extra code for HMR, so we need to invalidate the module
+		if (this.hot) {
+			identifier += `|${this.hot}`;
+		}
+
 		return identifier;
 	}
 

package/lib/DependencyTemplate.js

@@ -40,11 +40,11 @@
 
 /**
  * @typedef {object} CssDependencyTemplateContextExtras
- * @property {CssExportsData} cssExportsData the css exports data
+ * @property {CssData} cssData the css exports data
  */
 
 /**
- * @typedef {object} CssExportsData
+ * @typedef {object} CssData
  * @property {boolean} esModule whether export __esModule
  * @property {Map<string, string>} exports the css exports
  */

package/lib/EvalSourceMapDevToolPlugin.js

@@ -12,6 +12,7 @@ const RuntimeGlobals = require("./RuntimeGlobals");
 const SourceMapDevToolModuleOptionsPlugin = require("./SourceMapDevToolModuleOptionsPlugin");
 const JavascriptModulesPlugin = require("./javascript/JavascriptModulesPlugin");
 const ConcatenatedModule = require("./optimize/ConcatenatedModule");
+const generateDebugId = require("./util/generateDebugId");
 const { makePathsAbsolute } = require("./util/identifier");
 
 /** @typedef {import("webpack-sources").Source} Source */
@@ -173,6 +174,10 @@ class EvalSourceMapDevToolPlugin {
 						sourceMap.file =
 							typeof moduleId === "number" ? `${moduleId}.js` : moduleId;
 
+						if (options.debugIds) {
+							sourceMap.debugId = generateDebugId(content, sourceMap.file);
+						}
+
 						const footer = `${this.sourceMapComment.replace(
 							/\[url\]/g,
 							`data:application/json;charset=utf-8;base64,${Buffer.from(

package/lib/FalseIIFEUmdWarning.js

@@ -0,0 +1,19 @@
+/*
+	MIT License http://www.opensource.org/licenses/mit-license.php
+	Author Arka Pratim Chaudhuri @arkapratimc
+*/
+
+"use strict";
+
+const WebpackError = require("./WebpackError");
+
+class FalseIIFEUmdWarning extends WebpackError {
+	constructor() {
+		super();
+		this.name = "FalseIIFEUmdWarning";
+		this.message =
+			"Configuration:\nSetting 'output.iife' to 'false' is incompatible with 'output.library.type' set to 'umd'. This configuration may cause unexpected behavior, as UMD libraries are expected to use an IIFE (Immediately Invoked Function Expression) to support various module formats. Consider setting 'output.iife' to 'true' or choosing a different 'library.type' to ensure compatibility.\nLearn more: https://webpack.js.org/configuration/output/";
+	}
+}
+
+module.exports = FalseIIFEUmdWarning;

package/lib/HotModuleReplacementPlugin.js

@@ -856,6 +856,10 @@ To fix this, make sure to include [runtime] in the output.hotUpdateMainFilename
 					.tap(PLUGIN_NAME, parser => {
 						applyImportMetaHot(parser);
 					});
+				normalModuleFactory.hooks.module.tap(PLUGIN_NAME, module => {
+					module.hot = true;
+					return module;
+				});
 
 				NormalModule.getCompilationHooks(compilation).loader.tap(
 					PLUGIN_NAME,

package/lib/Module.js

@@ -106,6 +106,7 @@ const makeSerializable = require("./util/makeSerializable");
  * @property {boolean=} strictHarmonyModule
  * @property {boolean=} async
  * @property {boolean=} sideEffectFree
+ * @property {Record<string, string>=} exportsFinalName
  */
 
 /**
@@ -199,6 +200,9 @@ class Module extends DependenciesBlock {
 		/** @type {boolean} */
 		this.useSimpleSourceMap = false;
 
+		// Is in hot context, i.e. HotModuleReplacementPlugin.js enabled
+		/** @type {boolean} */
+		this.hot = false;
 		// Info from Build
 		/** @type {WebpackError[] | undefined} */
 		this._warnings = undefined;
@@ -1074,6 +1078,7 @@ class Module extends DependenciesBlock {
 		write(this.factoryMeta);
 		write(this.useSourceMap);
 		write(this.useSimpleSourceMap);
+		write(this.hot);
 		write(
 			this._warnings !== undefined && this._warnings.length === 0
 				? undefined
@@ -1103,6 +1108,7 @@ class Module extends DependenciesBlock {
 		this.factoryMeta = read();
 		this.useSourceMap = read();
 		this.useSimpleSourceMap = read();
+		this.hot = read();
 		this._warnings = read();
 		this._errors = read();
 		this.buildMeta = read();

package/lib/ModuleSourceTypesConstants.js

@@ -39,11 +39,21 @@ const ASSET_AND_JS_AND_CSS_URL_TYPES = new Set([
  */
 const JS_TYPES = new Set(["javascript"]);
 
+/**
+ * @type {ReadonlySet<"javascript" | "css-export">}
+ */
+const JS_AND_CSS_EXPORT_TYPES = new Set(["javascript", "css-export"]);
+
 /**
  * @type {ReadonlySet<"javascript" | "css-url">}
  */
 const JS_AND_CSS_URL_TYPES = new Set(["javascript", "css-url"]);
 
+/**
+ * @type {ReadonlySet<"javascript" | "css">}
+ */
+const JS_AND_CSS_TYPES = new Set(["javascript", "css"]);
+
 /**
  * @type {ReadonlySet<"css">}
  */
@@ -85,7 +95,9 @@ const SHARED_INIT_TYPES = new Set(["share-init"]);
 
 module.exports.NO_TYPES = NO_TYPES;
 module.exports.JS_TYPES = JS_TYPES;
+module.exports.JS_AND_CSS_TYPES = JS_AND_CSS_TYPES;
 module.exports.JS_AND_CSS_URL_TYPES = JS_AND_CSS_URL_TYPES;
+module.exports.JS_AND_CSS_EXPORT_TYPES = JS_AND_CSS_EXPORT_TYPES;
 module.exports.ASSET_TYPES = ASSET_TYPES;
 module.exports.ASSET_AND_JS_TYPES = ASSET_AND_JS_TYPES;
 module.exports.ASSET_AND_CSS_URL_TYPES = ASSET_AND_CSS_URL_TYPES;

package/lib/NormalModule.js

@@ -113,6 +113,7 @@ const memoize = require("./util/memoize");
  * @property {string=} sourceRoot
  * @property {string[]=} sourcesContent
  * @property {string[]=} names
+ * @property {string=} debugId
  */
 
 const getInvalidDependenciesModuleWarning = memoize(() =>

package/lib/RuntimeTemplate.js

@@ -105,6 +105,13 @@ class RuntimeTemplate {
 		return this.outputOptions.module;
 	}
 
+	isNeutralPlatform() {
+		return (
+			!this.outputOptions.environment.document &&
+			!this.compilation.compiler.platform.node
+		);
+	}
+
 	supportsConst() {
 		return this.outputOptions.environment.const;
 	}

package/lib/SourceMapDevToolPlugin.js

@@ -14,6 +14,7 @@ const SourceMapDevToolModuleOptionsPlugin = require("./SourceMapDevToolModuleOpt
 const createSchemaValidation = require("./util/create-schema-validation");
 const createHash = require("./util/createHash");
 const { relative, dirname } = require("./util/fs");
+const generateDebugId = require("./util/generateDebugId");
 const { makePathsAbsolute } = require("./util/identifier");
 
 /** @typedef {import("webpack-sources").MapOptions} MapOptions */
@@ -479,6 +480,13 @@ class SourceMapDevToolPlugin {
 												"\n/*$1*/"
 											);
 									}
+
+									if (options.debugIds) {
+										const debugId = generateDebugId(source, sourceMap.file);
+										sourceMap.debugId = debugId;
+										currentSourceMappingURLComment = `\n//# debugId=${debugId}${currentSourceMappingURLComment}`;
+									}
+
 									const sourceMapString = JSON.stringify(sourceMap);
 									if (sourceMapFilename) {
 										const filename = file;

package/lib/WebpackOptionsApply.js

@@ -264,6 +264,7 @@ class WebpackOptionsApply extends OptionsApply {
 				const cheap = options.devtool.includes("cheap");
 				const moduleMaps = options.devtool.includes("module");
 				const noSources = options.devtool.includes("nosources");
+				const debugIds = options.devtool.includes("debugids");
 				const Plugin = evalWrapped
 					? require("./EvalSourceMapDevToolPlugin")
 					: require("./SourceMapDevToolPlugin");
@@ -276,7 +277,8 @@ class WebpackOptionsApply extends OptionsApply {
 					module: moduleMaps ? true : !cheap,
 					columns: !cheap,
 					noSources,
-					namespace: options.output.devtoolNamespace
+					namespace: options.output.devtoolNamespace,
+					debugIds
 				}).apply(compiler);
 			} else if (options.devtool.includes("eval")) {
 				const EvalDevToolModulePlugin = require("./EvalDevToolModulePlugin");

package/lib/asset/AssetModulesPlugin.js

@@ -202,14 +202,19 @@ class AssetModulesPlugin {
 								const data =
 									/** @type {NonNullable<CodeGenerationResult["data"]>} */
 									(codeGenResult.data);
+								const errored = module.getNumberOfErrors() > 0;
 								result.push({
 									render: () =>
 										/** @type {Source} */ (codeGenResult.sources.get(type)),
-									filename: buildInfo.filename || data.get("filename"),
+									filename: errored
+										? module.nameForCondition()
+										: buildInfo.filename || data.get("filename"),
 									info: buildInfo.assetInfo || data.get("assetInfo"),
 									auxiliary: true,
 									identifier: `assetModule${chunkGraph.getModuleId(module)}`,
-									hash: buildInfo.fullContentHash || data.get("fullContentHash")
+									hash: errored
+										? chunkGraph.getModuleHash(module, chunk.runtime)
+										: buildInfo.fullContentHash || data.get("fullContentHash")
 								});
 							} catch (err) {
 								/** @type {Error} */ (err).message +=

package/lib/config/defaults.js

@@ -229,6 +229,25 @@ const applyWebpackOptionsDefaults = (options, compilerIndex) => {
 		futureDefaults
 	});
 
+	applyOutputDefaults(options.output, {
+		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:
+			/** @type {NonNullable<ExperimentsNormalized["outputModule"]>} */
+			(options.experiments.outputModule),
+		development,
+		entry: options.entry,
+		futureDefaults,
+		asyncWebAssembly:
+			/** @type {NonNullable<ExperimentsNormalized["asyncWebAssembly"]>} */
+			(options.experiments.asyncWebAssembly)
+	});
+
 	applyModuleDefaults(options.module, {
 		cache,
 		syncWebAssembly:
@@ -242,25 +261,10 @@ const applyWebpackOptionsDefaults = (options, compilerIndex) => {
 			(options.experiments.css),
 		futureDefaults,
 		isNode: targetProperties && targetProperties.node === true,
+		uniqueName: options.output.uniqueName,
 		targetProperties
 	});
 
-	applyOutputDefaults(options.output, {
-		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:
-			/** @type {NonNullable<ExperimentsNormalized["outputModule"]>} */
-			(options.experiments.outputModule),
-		development,
-		entry: options.entry,
-		futureDefaults
-	});
-
 	applyExternalsPresetsDefaults(options.externalsPresets, {
 		targetProperties,
 		buildHttp: Boolean(options.experiments.buildHttp)
@@ -589,7 +593,7 @@ const applyCssGeneratorOptionsDefaults = (
 	D(
 		generatorOptions,
 		"exportsOnly",
-		!targetProperties || !targetProperties.document
+		!targetProperties || targetProperties.document === false
 	);
 	D(generatorOptions, "esModule", true);
 };
@@ -602,6 +606,7 @@ const applyCssGeneratorOptionsDefaults = (
  * @param {boolean} options.asyncWebAssembly is asyncWebAssembly enabled
  * @param {boolean} options.css is css enabled
  * @param {boolean} options.futureDefaults is future defaults enabled
+ * @param {string} options.uniqueName the unique name
  * @param {boolean} options.isNode is node target platform
  * @param {TargetProperties | false} options.targetProperties target properties
  * @returns {void}
@@ -615,6 +620,7 @@ const applyModuleDefaults = (
 		css,
 		futureDefaults,
 		isNode,
+		uniqueName,
 		targetProperties
 	}
 ) => {
@@ -670,6 +676,8 @@ const applyModuleDefaults = (
 	if (css) {
 		F(module.parser, CSS_MODULE_TYPE, () => ({}));
 
+		D(module.parser[CSS_MODULE_TYPE], "import", true);
+		D(module.parser[CSS_MODULE_TYPE], "url", true);
 		D(module.parser[CSS_MODULE_TYPE], "namedExports", true);
 
 		F(module.generator, CSS_MODULE_TYPE, () => ({}));
@@ -680,19 +688,18 @@ const applyModuleDefaults = (
 			{ targetProperties }
 		);
 
+		const localIdentName =
+			uniqueName.length > 0 ? "[uniqueName]-[id]-[local]" : "[id]-[local]";
+
 		F(module.generator, CSS_MODULE_TYPE_AUTO, () => ({}));
-		D(
-			module.generator[CSS_MODULE_TYPE_AUTO],
-			"localIdentName",
-			"[uniqueName]-[id]-[local]"
-		);
+		D(module.generator[CSS_MODULE_TYPE_AUTO], "localIdentName", localIdentName);
 		D(module.generator[CSS_MODULE_TYPE_AUTO], "exportsConvention", "as-is");
 
 		F(module.generator, CSS_MODULE_TYPE_MODULE, () => ({}));
 		D(
 			module.generator[CSS_MODULE_TYPE_MODULE],
 			"localIdentName",
-			"[uniqueName]-[id]-[local]"
+			localIdentName
 		);
 		D(module.generator[CSS_MODULE_TYPE_MODULE], "exportsConvention", "as-is");
 
@@ -700,7 +707,7 @@ const applyModuleDefaults = (
 		D(
 			module.generator[CSS_MODULE_TYPE_GLOBAL],
 			"localIdentName",
-			"[uniqueName]-[id]-[local]"
+			localIdentName
 		);
 		D(module.generator[CSS_MODULE_TYPE_GLOBAL], "exportsConvention", "as-is");
 	}
@@ -864,6 +871,7 @@ const applyModuleDefaults = (
  * @param {boolean} options.development is development mode
  * @param {Entry} options.entry entry option
  * @param {boolean} options.futureDefaults is future defaults enabled
+ * @param {boolean} options.asyncWebAssembly is asyncWebAssembly enabled
  * @returns {void}
  */
 const applyOutputDefaults = (
@@ -875,7 +883,8 @@ const applyOutputDefaults = (
 		outputModule,
 		development,
 		entry,
-		futureDefaults
+		futureDefaults,
+		asyncWebAssembly
 	}
 ) => {
 	/**
@@ -1063,7 +1072,6 @@ const applyOutputDefaults = (
 		}
 		return "[id].css";
 	});
-	D(output, "cssHeadDataCompression", !development);
 	D(output, "assetModuleFilename", "[hash][ext][query]");
 	D(output, "webassemblyModuleFilename", "[hash].module.wasm");
 	D(output, "compareBeforeEmit", true);
@@ -1130,10 +1138,12 @@ const applyOutputDefaults = (
 					break;
 			}
 			if (
-				tp.require === null ||
-				tp.nodeBuiltins === null ||
-				tp.document === null ||
-				tp.importScripts === null
+				(tp.require === null ||
+					tp.nodeBuiltins === null ||
+					tp.document === null ||
+					tp.importScripts === null) &&
+				output.module &&
+				environment.dynamicImport
 			) {
 				return "universal";
 			}
@@ -1155,9 +1165,11 @@ const applyOutputDefaults = (
 					break;
 			}
 			if (
-				tp.require === null ||
-				tp.nodeBuiltins === null ||
-				tp.importScriptsInWorker === null
+				(tp.require === null ||
+					tp.nodeBuiltins === null ||
+					tp.importScriptsInWorker === null) &&
+				output.module &&
+				environment.dynamicImport
 			) {
 				return "universal";
 			}
@@ -1167,9 +1179,13 @@ const applyOutputDefaults = (
 	F(output, "wasmLoading", () => {
 		if (tp) {
 			if (tp.fetchWasm) return "fetch";
-			if (tp.nodeBuiltins)
-				return output.module ? "async-node-module" : "async-node";
-			if (tp.nodeBuiltins === null || tp.fetchWasm === null) {
+			if (tp.nodeBuiltins) return "async-node";
+			if (
+				(tp.nodeBuiltins === null || tp.fetchWasm === null) &&
+				asyncWebAssembly &&
+				output.module &&
+				environment.dynamicImport
+			) {
 				return "universal";
 			}
 		}

package/lib/config/normalization.js

@@ -315,7 +315,6 @@ const getNormalizedWebpackOptions = config => ({
 			chunkLoadTimeout: output.chunkLoadTimeout,
 			cssFilename: output.cssFilename,
 			cssChunkFilename: output.cssChunkFilename,
-			cssHeadDataCompression: output.cssHeadDataCompression,
 			clean: output.clean,
 			compareBeforeEmit: output.compareBeforeEmit,
 			crossOriginLoading: output.crossOriginLoading,

package/lib/config/target.js

@@ -122,10 +122,10 @@ You can also more options via the 'target' option: 'browserslist' / 'browserslis
 		"Web browser.",
 		/^web$/,
 		() => ({
+			node: false,
 			web: true,
-			browser: true,
 			webworker: null,
-			node: false,
+			browser: true,
 			electron: false,
 			nwjs: false,
 
@@ -143,10 +143,10 @@ You can also more options via the 'target' option: 'browserslist' / 'browserslis
 		"Web Worker, SharedWorker or Service Worker.",
 		/^webworker$/,
 		() => ({
+			node: false,
 			web: true,
-			browser: true,
 			webworker: true,
-			node: false,
+			browser: true,
 			electron: false,
 			nwjs: false,
 
@@ -168,11 +168,11 @@ You can also more options via the 'target' option: 'browserslist' / 'browserslis
 			// see https://node.green/
 			return {
 				node: true,
-				electron: false,
-				nwjs: false,
 				web: false,
 				webworker: false,
 				browser: false,
+				electron: false,
+				nwjs: false,
 
 				require: !asyncFlag,
 				nodeBuiltins: true,
@@ -208,10 +208,10 @@ You can also more options via the 'target' option: 'browserslist' / 'browserslis
 			// see https://node.green/ + https://github.com/electron/releases
 			return {
 				node: true,
-				electron: true,
 				web: context !== "main",
 				webworker: false,
 				browser: false,
+				electron: true,
 				nwjs: false,
 
 				electronMain: context === "main",
@@ -255,10 +255,10 @@ You can also more options via the 'target' option: 'browserslist' / 'browserslis
 			return {
 				node: true,
 				web: true,
-				nwjs: true,
 				webworker: null,
 				browser: false,
 				electron: false,
+				nwjs: true,
 
 				global: true,
 				nodeBuiltins: true,