webpack 5.94.0 → 5.96.0

package/lib/ExternalModule.js

@@ -11,6 +11,11 @@ const EnvironmentNotSupportAsyncWarning = require("./EnvironmentNotSupportAsyncW
 const { UsageState } = require("./ExportsInfo");
 const InitFragment = require("./InitFragment");
 const Module = require("./Module");
+const {
+	JS_TYPES,
+	CSS_URL_TYPES,
+	CSS_IMPORT_TYPES
+} = require("./ModuleSourceTypesConstants");
 const { JAVASCRIPT_MODULE_TYPE_DYNAMIC } = require("./ModuleTypeConstants");
 const RuntimeGlobals = require("./RuntimeGlobals");
 const Template = require("./Template");
@@ -30,6 +35,7 @@ const { register } = require("./util/serialization");
 /** @typedef {import("./DependencyTemplates")} DependencyTemplates */
 /** @typedef {import("./ExportsInfo")} ExportsInfo */
 /** @typedef {import("./Generator").GenerateContext} GenerateContext */
+/** @typedef {import("./Generator").SourceTypes} SourceTypes */
 /** @typedef {import("./Module").BuildInfo} BuildInfo */
 /** @typedef {import("./Module").CodeGenerationContext} CodeGenerationContext */
 /** @typedef {import("./Module").CodeGenerationResult} CodeGenerationResult */
@@ -37,7 +43,6 @@ const { register } = require("./util/serialization");
 /** @typedef {import("./Module").LibIdentOptions} LibIdentOptions */
 /** @typedef {import("./Module").NeedBuildContext} NeedBuildContext */
 /** @typedef {import("./Module").ReadOnlyRuntimeRequirements} ReadOnlyRuntimeRequirements */
-/** @typedef {import("./Module").SourceTypes} SourceTypes */
 /** @typedef {import("./ModuleGraph")} ModuleGraph */
 /** @typedef {import("./NormalModuleFactory")} NormalModuleFactory */
 /** @typedef {import("./RequestShortener")} RequestShortener */
@@ -55,8 +60,9 @@ const { register } = require("./util/serialization");
 
 /** @typedef {{ attributes?: ImportAttributes, externalType: "import" | "module" | undefined }} ImportDependencyMeta */
 /** @typedef {{ layer?: string, supports?: string, media?: string }} CssImportDependencyMeta */
+/** @typedef {{ sourceType: "css-url" }} AssetDependencyMeta */
 
-/** @typedef {ImportDependencyMeta | CssImportDependencyMeta} DependencyMeta */
+/** @typedef {ImportDependencyMeta | CssImportDependencyMeta | AssetDependencyMeta} DependencyMeta */
 
 /**
  * @typedef {object} SourceData
@@ -67,8 +73,6 @@ const { register } = require("./util/serialization");
  * @property {ReadOnlyRuntimeRequirements=} runtimeRequirements
  */
 
-const TYPES = new Set(["javascript"]);
-const CSS_TYPES = new Set(["css-import"]);
 const RUNTIME_REQUIREMENTS = new Set([RuntimeGlobals.module]);
 const RUNTIME_REQUIREMENTS_FOR_SCRIPT = new Set([RuntimeGlobals.loadScript]);
 const RUNTIME_REQUIREMENTS_FOR_MODULE = new Set([
@@ -500,7 +504,18 @@ class ExternalModule extends Module {
 	 * @returns {SourceTypes} types available (do not mutate)
 	 */
 	getSourceTypes() {
-		return this.externalType === "css-import" ? CSS_TYPES : TYPES;
+		if (
+			this.externalType === "asset" &&
+			this.dependencyMeta &&
+			/** @type {AssetDependencyMeta} */
+			(this.dependencyMeta).sourceType === "css-url"
+		) {
+			return CSS_URL_TYPES;
+		} else if (this.externalType === "css-import") {
+			return CSS_IMPORT_TYPES;
+		}
+
+		return JS_TYPES;
 	}
 
 	/**
@@ -526,7 +541,7 @@ class ExternalModule extends Module {
 	 * @returns {string} a unique identifier of the module
 	 */
 	identifier() {
-		return `external ${this.externalType} ${JSON.stringify(this.request)}`;
+		return `external ${this._resolveExternalType(this.externalType)} ${JSON.stringify(this.request)}`;
 	}
 
 	/**
@@ -546,25 +561,6 @@ class ExternalModule extends Module {
 		return callback(null, !this.buildMeta);
 	}
 
-	/**
-	 * @param {string} externalType raw external type
-	 * @returns {string} resolved external type
-	 */
-	getModuleImportType(externalType) {
-		if (externalType === "module-import") {
-			if (
-				this.dependencyMeta &&
-				/** @type {ImportDependencyMeta} */ (this.dependencyMeta).externalType
-			) {
-				return /** @type {ImportDependencyMeta} */ (this.dependencyMeta)
-					.externalType;
-			}
-			return "module";
-		}
-
-		return externalType;
-	}
-
 	/**
 	 * @param {WebpackOptions} options webpack options
 	 * @param {Compilation} compilation the compilation
@@ -597,6 +593,25 @@ class ExternalModule extends Module {
 					canMangle = true;
 				}
 				break;
+			case "module":
+				if (this.buildInfo.module) {
+					if (!Array.isArray(request) || request.length === 1) {
+						this.buildMeta.exportsType = "namespace";
+						canMangle = true;
+					}
+				} else {
+					this.buildMeta.async = true;
+					EnvironmentNotSupportAsyncWarning.check(
+						this,
+						compilation.runtimeTemplate,
+						"external module"
+					);
+					if (!Array.isArray(request) || request.length === 1) {
+						this.buildMeta.exportsType = "namespace";
+						canMangle = false;
+					}
+				}
+				break;
 			case "script":
 				this.buildMeta.async = true;
 				EnvironmentNotSupportAsyncWarning.check(
@@ -613,45 +628,18 @@ class ExternalModule extends Module {
 					"external promise"
 				);
 				break;
-			case "module":
 			case "import":
-			case "module-import": {
-				const type = this.getModuleImportType(externalType);
-				if (type === "module") {
-					if (this.buildInfo.module) {
-						if (!Array.isArray(request) || request.length === 1) {
-							this.buildMeta.exportsType = "namespace";
-							canMangle = true;
-						}
-					} else {
-						this.buildMeta.async = true;
-						EnvironmentNotSupportAsyncWarning.check(
-							this,
-							compilation.runtimeTemplate,
-							"external module"
-						);
-						if (!Array.isArray(request) || request.length === 1) {
-							this.buildMeta.exportsType = "namespace";
-							canMangle = false;
-						}
-					}
-				}
-
-				if (type === "import") {
-					this.buildMeta.async = true;
-					EnvironmentNotSupportAsyncWarning.check(
-						this,
-						compilation.runtimeTemplate,
-						"external import"
-					);
-					if (!Array.isArray(request) || request.length === 1) {
-						this.buildMeta.exportsType = "namespace";
-						canMangle = false;
-					}
+				this.buildMeta.async = true;
+				EnvironmentNotSupportAsyncWarning.check(
+					this,
+					compilation.runtimeTemplate,
+					"external import"
+				);
+				if (!Array.isArray(request) || request.length === 1) {
+					this.buildMeta.exportsType = "namespace";
+					canMangle = false;
 				}
-
 				break;
-			}
 		}
 		this.addDependency(new StaticExportsDependency(true, canMangle));
 		callback();
@@ -687,9 +675,43 @@ class ExternalModule extends Module {
 		let { request, externalType } = this;
 		if (typeof request === "object" && !Array.isArray(request))
 			request = request[externalType];
+		externalType = this._resolveExternalType(externalType);
 		return { request, externalType };
 	}
 
+	/**
+	 * 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
+	 */
+	_resolveExternalType(externalType) {
+		if (externalType === "module-import") {
+			if (
+				this.dependencyMeta &&
+				/** @type {ImportDependencyMeta} */
+				(this.dependencyMeta).externalType
+			) {
+				return /** @type {ImportDependencyMeta} */ (this.dependencyMeta)
+					.externalType;
+			}
+			return "module";
+		} else if (externalType === "asset") {
+			if (
+				this.dependencyMeta &&
+				/** @type {AssetDependencyMeta} */
+				(this.dependencyMeta).sourceType
+			) {
+				return /** @type {AssetDependencyMeta} */ (this.dependencyMeta)
+					.sourceType;
+			}
+
+			return "asset";
+		}
+
+		return externalType;
+	}
+
 	/**
 	 * @private
 	 * @param {string | string[]} request request
@@ -749,52 +771,43 @@ class ExternalModule extends Module {
 					runtimeTemplate
 				);
 			}
+			case "import":
+				return getSourceForImportExternal(
+					request,
+					runtimeTemplate,
+					/** @type {ImportDependencyMeta} */ (dependencyMeta)
+				);
 			case "script":
 				return getSourceForScriptExternal(request, runtimeTemplate);
-			case "module":
-			case "import":
-			case "module-import": {
-				const type = this.getModuleImportType(externalType);
-				if (type === "import") {
-					return getSourceForImportExternal(
-						request,
-						runtimeTemplate,
-						/** @type {ImportDependencyMeta} */ (dependencyMeta)
-					);
-				}
-
-				if (type === "module") {
-					if (!(/** @type {BuildInfo} */ (this.buildInfo).module)) {
-						if (!runtimeTemplate.supportsDynamicImport()) {
-							throw new Error(
-								`The target environment doesn't support dynamic import() syntax so it's not possible to use external type 'module' within a script${
-									runtimeTemplate.supportsEcmaScriptModuleSyntax()
-										? "\nDid you mean to build a EcmaScript Module ('output.module: true')?"
-										: ""
-								}`
-							);
-						}
-						return getSourceForImportExternal(
-							request,
-							runtimeTemplate,
-							/** @type {ImportDependencyMeta} */ (dependencyMeta)
-						);
-					}
-					if (!runtimeTemplate.supportsEcmaScriptModuleSyntax()) {
+			case "module": {
+				if (!(/** @type {BuildInfo} */ (this.buildInfo).module)) {
+					if (!runtimeTemplate.supportsDynamicImport()) {
 						throw new Error(
-							"The target environment doesn't support EcmaScriptModule syntax so it's not possible to use external type 'module'"
+							`The target environment doesn't support dynamic import() syntax so it's not possible to use external type 'module' within a script${
+								runtimeTemplate.supportsEcmaScriptModuleSyntax()
+									? "\nDid you mean to build a EcmaScript Module ('output.module: true')?"
+									: ""
+							}`
 						);
 					}
-					return getSourceForModuleExternal(
+					return getSourceForImportExternal(
 						request,
-						moduleGraph.getExportsInfo(this),
-						runtime,
 						runtimeTemplate,
 						/** @type {ImportDependencyMeta} */ (dependencyMeta)
 					);
 				}
-
-				break;
+				if (!runtimeTemplate.supportsEcmaScriptModuleSyntax()) {
+					throw new Error(
+						"The target environment doesn't support EcmaScriptModule syntax so it's not possible to use external type 'module'"
+					);
+				}
+				return getSourceForModuleExternal(
+					request,
+					moduleGraph.getExportsInfo(this),
+					runtime,
+					runtimeTemplate,
+					/** @type {ImportDependencyMeta} */ (dependencyMeta)
+				);
 			}
 			case "var":
 			case "promise":
@@ -830,7 +843,13 @@ class ExternalModule extends Module {
 					new RawSource(`module.exports = ${JSON.stringify(request)};`)
 				);
 				const data = new Map();
-				data.set("url", request);
+				data.set("url", { javascript: request });
+				return { sources, runtimeRequirements: RUNTIME_REQUIREMENTS, data };
+			}
+			case "css-url": {
+				const sources = new Map();
+				const data = new Map();
+				data.set("url", { "css-url": request });
 				return { sources, runtimeRequirements: RUNTIME_REQUIREMENTS, data };
 			}
 			case "css-import": {
@@ -939,7 +958,7 @@ class ExternalModule extends Module {
 	updateHash(hash, context) {
 		const { chunkGraph } = context;
 		hash.update(
-			`${this.externalType}${JSON.stringify(this.request)}${this.isOptional(
+			`${this._resolveExternalType(this.externalType)}${JSON.stringify(this.request)}${this.isOptional(
 				chunkGraph.moduleGraph
 			)}`
 		);

package/lib/ExternalModuleFactoryPlugin.js

@@ -9,10 +9,12 @@ const util = require("util");
 const ExternalModule = require("./ExternalModule");
 const ContextElementDependency = require("./dependencies/ContextElementDependency");
 const CssImportDependency = require("./dependencies/CssImportDependency");
+const CssUrlDependency = require("./dependencies/CssUrlDependency");
 const HarmonyImportDependency = require("./dependencies/HarmonyImportDependency");
 const ImportDependency = require("./dependencies/ImportDependency");
 const { resolveByProperty, cachedSetProperty } = require("./util/cleverMerge");
 
+/** @typedef {import("../declarations/WebpackOptions").ExternalItemFunctionData} ExternalItemFunctionData */
 /** @typedef {import("../declarations/WebpackOptions").Externals} Externals */
 /** @typedef {import("./Compilation").DepConstructor} DepConstructor */
 /** @typedef {import("./ExternalModule").DependencyMeta} DependencyMeta */
@@ -24,6 +26,12 @@ const EMPTY_RESOLVE_OPTIONS = {};
 
 // TODO webpack 6 remove this
 const callDeprecatedExternals = util.deprecate(
+	/**
+	 * @param {TODO} 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
+	 */
 	(externalsFunction, context, request, cb) => {
 		// eslint-disable-next-line no-useless-call
 		externalsFunction.call(null, context, request, cb);
@@ -35,15 +43,16 @@ const callDeprecatedExternals = util.deprecate(
 const cache = new WeakMap();
 
 /**
- * @param {object} obj obj
+ * @template {object} T
+ * @param {T} obj obj
  * @param {TODO} layer layer
- * @returns {object} result
+ * @returns {Omit<T, "byLayer">} result
  */
 const resolveLayer = (obj, layer) => {
-	let map = cache.get(obj);
+	let map = cache.get(/** @type {object} */ (obj));
 	if (map === undefined) {
 		map = new Map();
-		cache.set(obj, map);
+		cache.set(/** @type {object} */ (obj), map);
 	} else {
 		const cacheEntry = map.get(layer);
 		if (cacheEntry !== undefined) return cacheEntry;
@@ -53,8 +62,8 @@ const resolveLayer = (obj, layer) => {
 	return result;
 };
 
-/** @typedef {string|string[]|boolean|Record<string, string|string[]>} ExternalValue */
-/** @typedef {string|undefined} ExternalType */
+/** @typedef {string | string[] | boolean | Record<string, string | string[]>} ExternalValue */
+/** @typedef {string | undefined} ExternalType */
 
 class ExternalModuleFactoryPlugin {
 	/**
@@ -117,6 +126,8 @@ class ExternalModuleFactoryPlugin {
 						}
 					}
 
+					const resolvedType = /** @type {string} */ (type || globalType);
+
 					// TODO make it pluggable/add hooks to `ExternalModule` to allow output modules own externals?
 					/** @type {DependencyMeta | undefined} */
 					let dependencyMeta;
@@ -145,12 +156,18 @@ class ExternalModuleFactoryPlugin {
 						};
 					}
 
+					if (
+						resolvedType === "asset" &&
+						dependency instanceof CssUrlDependency
+					) {
+						dependencyMeta = { sourceType: "css-url" };
+					}
+
 					callback(
 						null,
 						new ExternalModule(
 							externalConfig,
-							/** @type {string} */
-							(type || globalType),
+							resolvedType,
 							dependency.request,
 							dependencyMeta
 						)
@@ -204,6 +221,12 @@ class ExternalModuleFactoryPlugin {
 							return handleExternal(dependency.request, undefined, callback);
 						}
 					} else if (typeof externals === "function") {
+						/**
+						 * @param {Error | null | undefined} err err
+						 * @param {ExternalValue=} value value
+						 * @param {ExternalType=} type type
+						 * @returns {void}
+						 */
 						const cb = (err, value, type) => {
 							if (err) return callback(err);
 							if (value !== undefined) {
@@ -250,7 +273,8 @@ class ExternalModuleFactoryPlugin {
 												context,
 												request,
 												resolveContext,
-												callback
+												/** @type {TODO} */
+												(callback)
 											);
 										} else {
 											return new Promise((resolve, reject) => {

package/lib/FileSystemInfo.js

@@ -3631,8 +3631,7 @@ class FileSystemInfo {
 		this._readContext(
 			{
 				path,
-				fromImmutablePath: () =>
-					/** @type {ContextHash} */ (/** @type {unknown} */ ("")),
+				fromImmutablePath: () => /** @type {ContextHash | ""} */ (""),
 				fromManagedItem: info => info || "",
 				fromSymlink: (file, target, callback) => {
 					callback(
@@ -3773,18 +3772,23 @@ class FileSystemInfo {
 			this._readContext(
 				{
 					path,
-					fromImmutablePath: () => null,
+					fromImmutablePath: () =>
+						/** @type {ContextTimestampAndHash | null} */ (null),
 					fromManagedItem: info => ({
 						safeTime: 0,
 						timestampHash: info,
 						hash: info || ""
 					}),
 					fromSymlink: (file, target, callback) => {
-						callback(null, {
-							timestampHash: target,
-							hash: target,
-							symlinks: new Set([target])
-						});
+						callback(
+							null,
+							/** @type {TODO} */
+							({
+								timestampHash: target,
+								hash: target,
+								symlinks: new Set([target])
+							})
+						);
 					},
 					fromFile: (file, stat, callback) => {
 						this._getFileTimestampAndHash(file, callback);

package/lib/Generator.js

@@ -14,6 +14,7 @@
 /** @typedef {import("./DependencyTemplates")} DependencyTemplates */
 /** @typedef {import("./Module").ConcatenationBailoutReasonContext} ConcatenationBailoutReasonContext */
 /** @typedef {import("./Module").RuntimeRequirements} RuntimeRequirements */
+/** @typedef {import("./Module").SourceTypes} SourceTypes */
 /** @typedef {import("./ModuleGraph")} ModuleGraph */
 /** @typedef {import("./NormalModule")} NormalModule */
 /** @typedef {import("./RuntimeTemplate")} RuntimeTemplate */
@@ -55,7 +56,7 @@ class Generator {
 	/**
 	 * @abstract
 	 * @param {NormalModule} module fresh module
-	 * @returns {Set<string>} available types (do not mutate)
+	 * @returns {SourceTypes} available types (do not mutate)
 	 */
 	getTypes(module) {
 		const AbstractMethodError = require("./AbstractMethodError");
@@ -79,7 +80,7 @@ class Generator {
 	 * @abstract
 	 * @param {NormalModule} module module for which the code should be generated
 	 * @param {GenerateContext} generateContext context for generate
-	 * @returns {Source} generated code
+	 * @returns {Source | null} generated code
 	 */
 	generate(
 		module,
@@ -119,7 +120,7 @@ class ByTypeGenerator extends Generator {
 
 	/**
 	 * @param {NormalModule} module fresh module
-	 * @returns {Set<string>} available types (do not mutate)
+	 * @returns {SourceTypes} available types (do not mutate)
 	 */
 	getTypes(module) {
 		return this._types;
@@ -139,7 +140,7 @@ class ByTypeGenerator extends Generator {
 	/**
 	 * @param {NormalModule} module module for which the code should be generated
 	 * @param {GenerateContext} generateContext context for generate
-	 * @returns {Source} generated code
+	 * @returns {Source | null} generated code
 	 */
 	generate(module, generateContext) {
 		const type = generateContext.type;

package/lib/HotModuleReplacementPlugin.js

@@ -44,6 +44,7 @@ const {
 
 /** @typedef {import("estree").CallExpression} CallExpression */
 /** @typedef {import("estree").Expression} Expression */
+/** @typedef {import("estree").SpreadElement} SpreadElement */
 /** @typedef {import("../declarations/WebpackOptions").OutputNormalized} OutputNormalized */
 /** @typedef {import("./Chunk")} Chunk */
 /** @typedef {import("./Chunk").ChunkId} ChunkId */
@@ -60,8 +61,8 @@ const {
 
 /**
  * @typedef {object} HMRJavascriptParserHooks
- * @property {SyncBailHook<[TODO, string[]], void>} hotAcceptCallback
- * @property {SyncBailHook<[TODO, string[]], void>} hotAcceptWithoutCallback
+ * @property {SyncBailHook<[Expression | SpreadElement, string[]], void>} hotAcceptCallback
+ * @property {SyncBailHook<[CallExpression, string[]], void>} hotAcceptWithoutCallback
  */
 
 /** @typedef {{ updatedChunkIds: Set<ChunkId>, removedChunkIds: Set<ChunkId>, removedModules: Set<Module>, filename: string, assetInfo: AssetInfo }} HotUpdateMainContentByRuntimeItem */
@@ -133,10 +134,9 @@ class HotModuleReplacementPlugin {
 				/** @type {BuildInfo} */
 				(module.buildInfo).moduleConcatenationBailout =
 					"Hot Module Replacement";
+
 				if (expr.arguments.length >= 1) {
-					const arg = parser.evaluateExpression(
-						/** @type {Expression} */ (expr.arguments[0])
-					);
+					const arg = parser.evaluateExpression(expr.arguments[0]);
 					/** @type {BasicEvaluatedExpression[]} */
 					let params = [];
 					if (arg.isString()) {
@@ -686,7 +686,9 @@ class HotModuleReplacementPlugin {
 								if (backCompat)
 									ChunkGraph.setChunkGraphForChunk(hotUpdateChunk, chunkGraph);
 								hotUpdateChunk.id = chunkId;
-								hotUpdateChunk.runtime = newRuntime;
+								hotUpdateChunk.runtime = currentChunk
+									? currentChunk.runtime
+									: newRuntime;
 								if (currentChunk) {
 									for (const group of currentChunk.groupsIterable)
 										hotUpdateChunk.addGroup(group);

package/lib/IgnorePlugin.js

@@ -5,6 +5,8 @@
 
 "use strict";
 
+const RawModule = require("./RawModule");
+const EntryDependency = require("./dependencies/EntryDependency");
 const createSchemaValidation = require("./util/create-schema-validation");
 
 /** @typedef {import("../declarations/plugins/IgnorePlugin").IgnorePluginOptions} IgnorePluginOptions */
@@ -73,7 +75,23 @@ class IgnorePlugin {
 	 */
 	apply(compiler) {
 		compiler.hooks.normalModuleFactory.tap("IgnorePlugin", nmf => {
-			nmf.hooks.beforeResolve.tap("IgnorePlugin", this.checkIgnore);
+			nmf.hooks.beforeResolve.tap("IgnorePlugin", resolveData => {
+				const result = this.checkIgnore(resolveData);
+
+				if (
+					result === false &&
+					resolveData.dependencies.length > 0 &&
+					resolveData.dependencies[0] instanceof EntryDependency
+				) {
+					resolveData.ignoredModule = new RawModule(
+						"",
+						"ignored-entry-module",
+						"(ignored-entry-module)"
+					);
+				}
+
+				return result;
+			});
 		});
 		compiler.hooks.contextModuleFactory.tap("IgnorePlugin", cmf => {
 			cmf.hooks.beforeResolve.tap("IgnorePlugin", this.checkIgnore);

package/lib/LoaderOptionsPlugin.js

@@ -69,7 +69,9 @@ class LoaderOptionsPlugin {
 							if (key === "include" || key === "exclude" || key === "test") {
 								continue;
 							}
-							context[key] = options[key];
+
+							/** @type {any} */
+							(context)[key] = options[key];
 						}
 					}
 				}