webpack 5.102.1 → 5.104.0

package/lib/EnvironmentPlugin.js

@@ -39,16 +39,18 @@ class EnvironmentPlugin {
 	 * @returns {void}
 	 */
 	apply(compiler) {
-		/** @type {Record<string, CodeValue>} */
-		const definitions = {};
-		for (const key of this.keys) {
-			const value =
-				process.env[key] !== undefined
-					? process.env[key]
-					: this.defaultValues[key];
+		const definePlugin = new DefinePlugin({});
 
-			if (value === undefined) {
-				compiler.hooks.thisCompilation.tap(PLUGIN_NAME, (compilation) => {
+		compiler.hooks.thisCompilation.tap(PLUGIN_NAME, (compilation) => {
+			/** @type {Record<string, CodeValue>} */
+			const definitions = {};
+			for (const key of this.keys) {
+				const value =
+					process.env[key] !== undefined
+						? process.env[key]
+						: this.defaultValues[key];
+
+				if (value === undefined) {
 					const error = new WebpackError(
 						`${PLUGIN_NAME} - ${key} environment variable is undefined.\n\n` +
 							"You can pass an object with default values to suppress this warning.\n" +
@@ -57,14 +59,15 @@ class EnvironmentPlugin {
 
 					error.name = "EnvVariableNotDefinedError";
 					compilation.errors.push(error);
-				});
+				}
+				const defValue =
+					value === undefined ? "undefined" : JSON.stringify(value);
+				definitions[`process.env.${key}`] = defValue;
+				definitions[`import.meta.env.${key}`] = defValue;
 			}
-
-			definitions[`process.env.${key}`] =
-				value === undefined ? "undefined" : JSON.stringify(value);
-		}
-
-		new DefinePlugin(definitions).apply(compiler);
+			definePlugin.definitions = definitions;
+		});
+		definePlugin.apply(compiler);
 	}
 }
 

package/lib/EvalSourceMapDevToolPlugin.js

@@ -18,6 +18,7 @@ const { makePathsAbsolute } = require("./util/identifier");
 /** @typedef {import("webpack-sources").RawSourceMap} RawSourceMap */
 /** @typedef {import("webpack-sources").Source} Source */
 /** @typedef {import("../declarations/plugins/SourceMapDevToolPlugin").SourceMapDevToolPluginOptions} SourceMapDevToolPluginOptions */
+/** @typedef {import("../declarations/plugins/SourceMapDevToolPlugin").Rules} Rules */
 /** @typedef {import("./ChunkGraph").ModuleId} ModuleId */
 /** @typedef {import("./Compiler")} Compiler */
 
@@ -163,6 +164,21 @@ class EvalSourceMapDevToolPlugin {
 						}
 					);
 					sourceMap.sources = moduleFilenames;
+					sourceMap.ignoreList = options.ignoreList
+						? sourceMap.sources.reduce(
+								/** @type {(acc: number[], sourceName: string, idx: number) => number[]} */ (
+									(acc, sourceName, idx) => {
+										const rule = /** @type {Rules} */ (options.ignoreList);
+										if (ModuleFilenameHelpers.matchPart(sourceName, rule)) {
+											acc.push(idx);
+										}
+										return acc;
+									}
+								),
+								[]
+							)
+						: [];
+
 					if (options.noSources) {
 						sourceMap.sourcesContent = undefined;
 					}

package/lib/ExportsInfo.js

@@ -5,6 +5,7 @@
 
 "use strict";
 
+const { ImportPhaseUtils } = require("./dependencies/ImportPhase");
 const { equals } = require("./util/ArrayHelpers");
 const SortableSet = require("./util/SortableSet");
 const makeSerializable = require("./util/makeSerializable");
@@ -1345,8 +1346,11 @@ class ExportInfo {
 			export: rawTarget.export,
 			deferred: Boolean(
 				rawTarget.connection.dependency &&
-					/** @type {HarmonyImportDependency} */
-					(rawTarget.connection.dependency).defer
+				ImportPhaseUtils.isDefer(
+					/** @type {HarmonyImportDependency} */ (
+						rawTarget.connection.dependency
+					).phase
+				)
 			)
 		};
 		for (;;) {

package/lib/ExternalModule.js

@@ -14,8 +14,9 @@ const Module = require("./Module");
 const {
 	CSS_IMPORT_TYPES,
 	CSS_URL_TYPES,
-	JS_TYPES
-} = require("./ModuleSourceTypesConstants");
+	JAVASCRIPT_TYPE,
+	JAVASCRIPT_TYPES
+} = require("./ModuleSourceTypeConstants");
 const { JAVASCRIPT_MODULE_TYPE_DYNAMIC } = require("./ModuleTypeConstants");
 const RuntimeGlobals = require("./RuntimeGlobals");
 const Template = require("./Template");
@@ -28,6 +29,7 @@ const propertyAccess = require("./util/propertyAccess");
 const { register } = require("./util/serialization");
 
 /** @typedef {import("webpack-sources").Source} Source */
+/** @typedef {import("../declarations/WebpackOptions").ExternalsType} ExternalsType */
 /** @typedef {import("../declarations/WebpackOptions").HashFunction} HashFunction */
 /** @typedef {import("./config/defaults").WebpackOptionsNormalizedWithDefaults} WebpackOptions */
 /** @typedef {import("./Chunk")} Chunk */
@@ -85,7 +87,7 @@ const RUNTIME_REQUIREMENTS_FOR_SCRIPT = new Set([RuntimeGlobals.loadScript]);
 const RUNTIME_REQUIREMENTS_FOR_MODULE = new Set([
 	RuntimeGlobals.definePropertyGetters
 ]);
-const EMPTY_RUNTIME_REQUIREMENTS = new Set([]);
+const EMPTY_RUNTIME_REQUIREMENTS = new Set();
 
 /**
  * @param {string | string[]} variableName the variable name or path
@@ -442,10 +444,6 @@ const getSourceForModuleExternal = (
 	dependencyMeta,
 	concatenationScope
 ) => {
-	if (!Array.isArray(moduleAndSpecifiers)) {
-		moduleAndSpecifiers = [moduleAndSpecifiers];
-	}
-
 	/** @type {Imported} */
 	let imported = true;
 	if (concatenationScope) {
@@ -465,6 +463,15 @@ const getSourceForModuleExternal = (
 		}
 	}
 
+	if (!Array.isArray(moduleAndSpecifiers)) {
+		moduleAndSpecifiers = [moduleAndSpecifiers];
+	}
+
+	// Return to `namespace` when the external request includes a specific export
+	if (moduleAndSpecifiers.length > 1) {
+		imported = true;
+	}
+
 	const initFragment = new ModuleExternalInitFragment(
 		moduleAndSpecifiers[0],
 		imported,
@@ -473,22 +480,6 @@ const getSourceForModuleExternal = (
 		runtimeTemplate.outputOptions.hashFunction
 	);
 	const normalizedImported = initFragment.getImported();
-	const specifiers =
-		normalizedImported === true
-			? undefined
-			: /** @type {[string, string][]} */ (
-					normalizedImported.map(([name, rawFinalName]) => {
-						let finalName = rawFinalName;
-						let counter = 0;
-
-						if (concatenationScope) {
-							while (!concatenationScope.registerUsedName(finalName)) {
-								finalName = `${finalName}_${counter++}`;
-							}
-						}
-						return [name, finalName];
-					})
-				);
 
 	const baseAccess = `${initFragment.getNamespaceIdentifier()}${propertyAccess(
 		moduleAndSpecifiers,
@@ -518,7 +509,7 @@ const getSourceForModuleExternal = (
 					"x"
 				)}`
 			: undefined,
-		specifiers,
+		specifiers: normalizedImported === true ? undefined : normalizedImported,
 		runtimeRequirements: moduleRemapping
 			? RUNTIME_REQUIREMENTS_FOR_MODULE
 			: undefined,
@@ -632,7 +623,7 @@ const getSourceForDefaultCase = (optional, request, runtimeTemplate) => {
 class ExternalModule extends Module {
 	/**
 	 * @param {ExternalModuleRequest} request request
-	 * @param {string} type type
+	 * @param {ExternalsType} type type
 	 * @param {string} userRequest user request
 	 * @param {DependencyMeta=} dependencyMeta dependency meta
 	 */
@@ -642,7 +633,7 @@ class ExternalModule extends Module {
 		// Info from Factory
 		/** @type {ExternalModuleRequest} */
 		this.request = request;
-		/** @type {string} */
+		/** @type {ExternalsType} */
 		this.externalType = type;
 		/** @type {string} */
 		this.userRequest = userRequest;
@@ -665,7 +656,7 @@ class ExternalModule extends Module {
 			return CSS_IMPORT_TYPES;
 		}
 
-		return JS_TYPES;
+		return JAVASCRIPT_TYPES;
 	}
 
 	/**
@@ -821,6 +812,10 @@ class ExternalModule extends Module {
 		return undefined;
 	}
 
+	/**
+	 * @private
+	 * @returns {{ request: string | string[], externalType: ExternalsType }} the request and external type
+	 */
 	_getRequestAndExternalType() {
 		let { request, externalType } = this;
 		if (typeof request === "object" && !Array.isArray(request)) {
@@ -833,8 +828,8 @@ class ExternalModule extends Module {
 	/**
 	 * Resolve the detailed external type from the raw external type.
 	 * e.g. resolve "module" or "import" from "module-import" type
-	 * @param {string} externalType raw external type
-	 * @returns {string} resolved external type
+	 * @param {ExternalsType} externalType raw external type
+	 * @returns {ExternalsType} resolved external type
 	 */
 	_resolveExternalType(externalType) {
 		if (externalType === "module-import") {
@@ -866,7 +861,7 @@ class ExternalModule extends Module {
 	/**
 	 * @private
 	 * @param {string | string[]} request request
-	 * @param {string} externalType the external type
+	 * @param {ExternalsType} externalType the external type
 	 * @param {RuntimeTemplate} runtimeTemplate the runtime template
 	 * @param {ModuleGraph} moduleGraph the module graph
 	 * @param {ChunkGraph} chunkGraph the chunk graph
@@ -959,8 +954,6 @@ class ExternalModule extends Module {
 			}
 			case "var":
 			case "promise":
-			case "const":
-			case "let":
 			case "assign":
 			default:
 				return getSourceForDefaultCase(
@@ -987,7 +980,7 @@ class ExternalModule extends Module {
 			case "asset": {
 				const sources = new Map();
 				sources.set(
-					"javascript",
+					JAVASCRIPT_TYPE,
 					new RawSource(`module.exports = ${JSON.stringify(request)};`)
 				);
 				const data = new Map();
@@ -1072,11 +1065,11 @@ class ExternalModule extends Module {
 				const sources = new Map();
 				if (this.useSourceMap || this.useSimpleSourceMap) {
 					sources.set(
-						"javascript",
+						JAVASCRIPT_TYPE,
 						new OriginalSource(sourceString, this.identifier())
 					);
 				} else {
-					sources.set("javascript", new RawSource(sourceString));
+					sources.set(JAVASCRIPT_TYPE, new RawSource(sourceString));
 				}
 
 				let runtimeRequirements = sourceData.runtimeRequirements;

package/lib/ExternalModuleFactoryPlugin.js

@@ -16,6 +16,7 @@ const { cachedSetProperty, resolveByProperty } = require("./util/cleverMerge");
 
 /** @typedef {import("enhanced-resolve").ResolveContext} ResolveContext */
 /** @typedef {import("../declarations/WebpackOptions").ResolveOptions} ResolveOptions */
+/** @typedef {import("../declarations/WebpackOptions").ExternalsType} ExternalsType */
 /** @typedef {import("../declarations/WebpackOptions").ExternalItemValue} ExternalItemValue */
 /** @typedef {import("../declarations/WebpackOptions").ExternalItemObjectKnown} ExternalItemObjectKnown */
 /** @typedef {import("../declarations/WebpackOptions").ExternalItemObjectUnknown} ExternalItemObjectUnknown */
@@ -25,7 +26,7 @@ const { cachedSetProperty, resolveByProperty } = require("./util/cleverMerge");
 /** @typedef {import("./ModuleFactory").ModuleFactoryCreateDataContextInfo} ModuleFactoryCreateDataContextInfo */
 /** @typedef {import("./NormalModuleFactory")} NormalModuleFactory */
 
-/** @typedef {((context: string, request: string, callback: (err?: Error | null, result?: string | false, resolveRequest?: import('enhanced-resolve').ResolveRequest) => void) => void)} ExternalItemFunctionDataGetResolveCallbackResult */
+/** @typedef {((context: string, request: string, callback: (err?: Error | null, result?: string | false, resolveRequest?: import("enhanced-resolve").ResolveRequest) => void) => void)} ExternalItemFunctionDataGetResolveCallbackResult */
 /** @typedef {((context: string, request: string) => Promise<string>)} ExternalItemFunctionDataGetResolveResult */
 /** @typedef {(options?: ResolveOptions) => ExternalItemFunctionDataGetResolveCallbackResult | ExternalItemFunctionDataGetResolveResult} ExternalItemFunctionDataGetResolve */
 
@@ -50,7 +51,7 @@ const callDeprecatedExternals = util.deprecate(
 	 * @param {EXPECTED_FUNCTION} externalsFunction externals function
 	 * @param {string} context context
 	 * @param {string} request request
-	 * @param {(err: Error | null | undefined, value: ExternalValue | undefined, ty: ExternalType | undefined) => void} cb cb
+	 * @param {(err: Error | null | undefined, value: ExternalValue | undefined, ty: ExternalsType | undefined) => void} cb cb
 	 */
 	(externalsFunction, context, request, cb) => {
 		// eslint-disable-next-line no-useless-call
@@ -90,13 +91,12 @@ const resolveLayer = (obj, layer) => {
 };
 
 /** @typedef {string | string[] | boolean | Record<string, string | string[]>} ExternalValue */
-/** @typedef {string | undefined} ExternalType */
 
 const PLUGIN_NAME = "ExternalModuleFactoryPlugin";
 
 class ExternalModuleFactoryPlugin {
 	/**
-	 * @param {string} type default external type
+	 * @param {ExternalsType} type default external type
 	 * @param {Externals} externals externals config
 	 */
 	constructor(type, externals) {
@@ -122,7 +122,7 @@ class ExternalModuleFactoryPlugin {
 
 				/**
 				 * @param {ExternalValue} value the external config
-				 * @param {ExternalType | undefined} type type of external
+				 * @param {ExternalsType | undefined} type type of external
 				 * @param {HandleExternalCallback} callback callback
 				 * @returns {void}
 				 */
@@ -131,7 +131,7 @@ class ExternalModuleFactoryPlugin {
 						// Not externals, fallback to original factory
 						return callback();
 					}
-					/** @type {string | string[] | Record<string, string|string[]>} */
+					/** @type {ExternalValue} */
 					let externalConfig = value === true ? dependency.request : value;
 					// When no explicit type is specified, extract it from the externalConfig
 					if (type === undefined) {
@@ -140,7 +140,9 @@ class ExternalModuleFactoryPlugin {
 							UNSPECIFIED_EXTERNAL_TYPE_REGEXP.test(externalConfig)
 						) {
 							const idx = externalConfig.indexOf(" ");
-							type = externalConfig.slice(0, idx);
+							type =
+								/** @type {ExternalsType} */
+								(externalConfig.slice(0, idx));
 							externalConfig = externalConfig.slice(idx + 1);
 						} else if (
 							Array.isArray(externalConfig) &&
@@ -149,7 +151,7 @@ class ExternalModuleFactoryPlugin {
 						) {
 							const firstItem = externalConfig[0];
 							const idx = firstItem.indexOf(" ");
-							type = firstItem.slice(0, idx);
+							type = /** @type {ExternalsType} */ (firstItem.slice(0, idx));
 							externalConfig = [
 								firstItem.slice(idx + 1),
 								...externalConfig.slice(1)
@@ -255,7 +257,7 @@ class ExternalModuleFactoryPlugin {
 						/**
 						 * @param {Error | null | undefined} err err
 						 * @param {ExternalValue=} value value
-						 * @param {ExternalType=} type type
+						 * @param {ExternalsType=} type type
 						 * @returns {void}
 						 */
 						const cb = (err, value, type) => {

package/lib/ExternalsPlugin.js

@@ -9,6 +9,7 @@ const { ModuleExternalInitFragment } = require("./ExternalModule");
 const ExternalModuleFactoryPlugin = require("./ExternalModuleFactoryPlugin");
 const ConcatenatedModule = require("./optimize/ConcatenatedModule");
 
+/** @typedef {import("../declarations/WebpackOptions").ExternalsType} ExternalsType */
 /** @typedef {import("../declarations/WebpackOptions").Externals} Externals */
 /** @typedef {import("./Compiler")} Compiler */
 /** @typedef {import("./ExternalModule").Imported} Imported */
@@ -17,7 +18,7 @@ const PLUGIN_NAME = "ExternalsPlugin";
 
 class ExternalsPlugin {
 	/**
-	 * @param {string} type default external type
+	 * @param {ExternalsType} type default external type
 	 * @param {Externals} externals externals config
 	 */
 	constructor(type, externals) {

package/lib/FileSystemInfo.js

@@ -939,7 +939,7 @@ const mergeSets = (a, b) => {
  * Finding file or directory to manage
  * @param {string} managedPath path that is managing by {@link FileSystemInfo}
  * @param {string} path path to file or directory
- * @returns {string|null} managed item
+ * @returns {string | null} managed item
  * @example
  * getManagedItem(
  *   '/Users/user/my-project/node_modules/',

package/lib/Generator.js

@@ -5,6 +5,8 @@
 
 "use strict";
 
+const { JAVASCRIPT_TYPE } = require("./ModuleSourceTypeConstants");
+
 /** @typedef {import("webpack-sources").Source} Source */
 /** @typedef {import("./ChunkGraph")} ChunkGraph */
 /** @typedef {import("./CodeGenerationResults")} CodeGenerationResults */
@@ -13,6 +15,7 @@
 /** @typedef {import("./Module").CodeGenerationResultData} CodeGenerationResultData */
 /** @typedef {import("./Module").ConcatenationBailoutReasonContext} ConcatenationBailoutReasonContext */
 /** @typedef {import("./Module").RuntimeRequirements} RuntimeRequirements */
+/** @typedef {import("./Module").SourceType} SourceType */
 /** @typedef {import("./Module").SourceTypes} SourceTypes */
 /** @typedef {import("./ModuleGraph")} ModuleGraph */
 /** @typedef {import("./NormalModule")} NormalModule */
@@ -30,7 +33,7 @@
  * @property {RuntimeSpec} runtime the runtime
  * @property {ConcatenationScope=} concatenationScope when in concatenated module, information about other concatenated modules
  * @property {CodeGenerationResults=} codeGenerationResults code generation results of other modules (need to have a codeGenerationDependency to use that)
- * @property {string} type which kind of code should be generated
+ * @property {SourceType} type which kind of code should be generated
  * @property {() => CodeGenerationResultData=} getData get access to the code generation data
  */
 
@@ -52,7 +55,7 @@
 
 class Generator {
 	/**
-	 * @param {Record<string, Generator>} map map of types
+	 * @param {{ [key in SourceType]?: Generator }} map map of types
 	 * @returns {ByTypeGenerator} generator by type
 	 */
 	static byType(map) {
@@ -75,7 +78,7 @@ class Generator {
 	/**
 	 * @abstract
 	 * @param {NormalModule} module the module
-	 * @param {string=} type source type
+	 * @param {SourceType=} type source type
 	 * @returns {number} estimate size of the module
 	 */
 	getSize(module, type) {
@@ -138,12 +141,12 @@ function generateError(error, module, generateContext) {
 
 class ByTypeGenerator extends Generator {
 	/**
-	 * @param {Record<string, Generator>} map map of types
+	 * @param {{ [key in SourceType]?: Generator }} map map of types
 	 */
 	constructor(map) {
 		super();
 		this.map = map;
-		this._types = new Set(Object.keys(map));
+		this._types = /** @type {SourceTypes} */ (new Set(Object.keys(map)));
 		/** @type {GenerateErrorFn | undefined} */
 		this.generateError = generateError.bind(this);
 	}
@@ -158,10 +161,10 @@ class ByTypeGenerator extends Generator {
 
 	/**
 	 * @param {NormalModule} module the module
-	 * @param {string=} type source type
+	 * @param {SourceType=} type source type
 	 * @returns {number} estimate size of the module
 	 */
-	getSize(module, type = "javascript") {
+	getSize(module, type = JAVASCRIPT_TYPE) {
 		const t = type;
 		const generator = this.map[t];
 		return generator ? generator.getSize(module, t) : 0;

package/lib/HookWebpackError.js

@@ -6,6 +6,10 @@
 "use strict";
 
 const WebpackError = require("./WebpackError");
+const makeSerializable = require("./util/makeSerializable");
+
+/** @typedef {import("./serialization/ObjectMiddleware").ObjectDeserializerContext} ObjectDeserializerContext */
+/** @typedef {import("./serialization/ObjectMiddleware").ObjectSerializerContext} ObjectSerializerContext */
 
 /**
  * @template T
@@ -22,18 +26,43 @@ class HookWebpackError extends WebpackError {
 	 * @param {string} hook name of hook
 	 */
 	constructor(error, hook) {
-		super(error.message);
+		super(error ? error.message : undefined, error ? { cause: error } : {});
 
-		this.name = "HookWebpackError";
 		this.hook = hook;
 		this.error = error;
+		this.name = "HookWebpackError";
 		this.hideStack = true;
-		this.details = `caused by plugins in ${hook}\n${error.stack}`;
+		this.stack += `\n-- inner error --\n${error ? error.stack : ""}`;
+		this.details = `caused by plugins in ${hook}\n${error ? error.stack : ""}`;
+	}
+
+	/**
+	 * @param {ObjectSerializerContext} context context
+	 */
+	serialize(context) {
+		const { write } = context;
+
+		write(this.error);
+		write(this.hook);
 
-		this.stack += `\n-- inner error --\n${error.stack}`;
+		super.serialize(context);
+	}
+
+	/**
+	 * @param {ObjectDeserializerContext} context context
+	 */
+	deserialize(context) {
+		const { read } = context;
+
+		this.error = read();
+		this.hook = read();
+
+		super.deserialize(context);
 	}
 }
 
+makeSerializable(HookWebpackError, "webpack/lib/HookWebpackError");
+
 module.exports = HookWebpackError;
 
 /**

package/lib/HotModuleReplacementPlugin.js

@@ -19,6 +19,7 @@ const {
 const NormalModule = require("./NormalModule");
 const RuntimeGlobals = require("./RuntimeGlobals");
 const WebpackError = require("./WebpackError");
+const { chunkHasCss } = require("./css/CssModulesPlugin");
 const ConstDependency = require("./dependencies/ConstDependency");
 const ImportMetaHotAcceptDependency = require("./dependencies/ImportMetaHotAcceptDependency");
 const ImportMetaHotDeclineDependency = require("./dependencies/ImportMetaHotDeclineDependency");
@@ -817,6 +818,7 @@ To fix this, make sure to include [runtime] in the output.hotUpdateMainFilename
 							filename,
 							{ removedChunkIds, removedModules, updatedChunkIds, assetInfo }
 						] of hotUpdateMainContentByFilename) {
+							/** @type {{c: ChunkId[], r: ChunkId[], m: ModuleId[], css?: {r: ChunkId[]}}} */
 							const hotUpdateMainJson = {
 								c: [...updatedChunkIds],
 								r: [...removedChunkIds],
@@ -833,6 +835,26 @@ To fix this, make sure to include [runtime] in the output.hotUpdateMainFilename
 											]
 							};
 
+							// Build CSS removed chunks list (chunks in updatedChunkIds that no longer have CSS)
+							/** @type {ChunkId[]} */
+							const cssRemovedChunkIds = [];
+							if (compilation.options.experiments.css) {
+								for (const chunkId of updatedChunkIds) {
+									for (const /** @type {Chunk} */ chunk of compilation.chunks) {
+										if (chunk.id === chunkId) {
+											if (!chunkHasCss(chunk, chunkGraph)) {
+												cssRemovedChunkIds.push(chunkId);
+											}
+											break;
+										}
+									}
+								}
+							}
+
+							if (cssRemovedChunkIds.length > 0) {
+								hotUpdateMainJson.css = { r: cssRemovedChunkIds };
+							}
+
 							const source = new RawSource(
 								(filename.endsWith(".json") ? "" : "export default ") +
 									JSON.stringify(hotUpdateMainJson)