webpack 5.106.2 → 5.107.0

package/README.md

@@ -302,12 +302,12 @@ For information about the governance of the webpack project, see [GOVERNANCE.md]
 
 - [alexander-akait](https://github.com/alexander-akait) -
   **Alexander Akait** <<sheo13666q@gmail.com>> (he/him)
+- [avivkeller](https://github.com/avivkeller) -
+  **Aviv Keller** <<me@aviv.sh>> (he/him)
 - [evenstensberg](https://github.com/evenstensberg) -
   **Even Stensberg** <<evenstensberg@gmail.com>> (he/him)
 - [ovflowd](https://github.com/ovflowd) -
   **Claudio Wunder** <<cwunder@gnome.org>> (he/they)
-- [snitin315](https://github.com/snitin315) -
-  **Nitin Kumar** <<snitin315@gmail.com>> (he/him)
 - [thelarkinn](https://github.com/thelarkinn) -
   **Sean Larkin** <<selarkin@microsoft.com>> (he/him)
 

package/lib/APIPlugin.js

@@ -14,10 +14,10 @@ const {
 	JAVASCRIPT_MODULE_TYPE_ESM
 } = require("./ModuleTypeConstants");
 const RuntimeGlobals = require("./RuntimeGlobals");
-const WebpackError = require("./WebpackError");
 const ConstDependency = require("./dependencies/ConstDependency");
 const ModuleInitFragmentDependency = require("./dependencies/ModuleInitFragmentDependency");
 const RuntimeRequirementsDependency = require("./dependencies/RuntimeRequirementsDependency");
+const WebpackError = require("./errors/WebpackError");
 const BasicEvaluatedExpression = require("./javascript/BasicEvaluatedExpression");
 const JavascriptModulesPlugin = require("./javascript/JavascriptModulesPlugin");
 const {

package/lib/Cache.js

@@ -9,9 +9,7 @@ const { AsyncParallelHook, AsyncSeriesBailHook, SyncHook } = require("tapable");
 const {
 	makeWebpackError,
 	makeWebpackErrorCallback
-} = require("./HookWebpackError");
-
-/** @typedef {import("./WebpackError")} WebpackError */
+} = require("./errors/HookWebpackError");
 
 /**
  * Cache validation token whose string representation identifies the build
@@ -21,11 +19,10 @@ const {
  */
 
 /**
- * Completion callback used by cache operations that either fail with a
- * `WebpackError` or resolve with a typed result.
+ * Completion callback used by cache operations that either fail with a `Error` or resolve with a typed result.
  * @template T
  * @callback CallbackCache
- * @param {WebpackError | null} err
+ * @param {Error | null} err
  * @param {T=} result
  * @returns {void}
  */

package/lib/CompatibilityPlugin.js

@@ -186,13 +186,14 @@ class CompatibilityPlugin {
 							(declarator.id.name === RuntimeGlobals.exports ||
 								declarator.id.name === RuntimeGlobals.require)
 						) {
-							const { name, declaration } =
-								/** @type {CompatibilitySettings} */ (
-									parser.getTagData(
-										declarator.id.name,
-										nestedWebpackIdentifierTag
-									)
-								);
+							const tagData = /** @type {CompatibilitySettings | undefined} */ (
+								parser.getTagData(
+									declarator.id.name,
+									nestedWebpackIdentifierTag
+								)
+							);
+							if (!tagData) return;
+							const { name, declaration } = tagData;
 							if (!declaration.updated) {
 								const dep = new ConstDependency(name, declaration.range);
 								dep.loc = declaration.loc;

package/lib/Compilation.js

@@ -21,42 +21,37 @@ const { MultiItemCache } = require("./CacheFacade");
 const Chunk = require("./Chunk");
 const ChunkGraph = require("./ChunkGraph");
 const ChunkGroup = require("./ChunkGroup");
-const ChunkRenderError = require("./ChunkRenderError");
 const ChunkTemplate = require("./ChunkTemplate");
-const CodeGenerationError = require("./CodeGenerationError");
 const CodeGenerationResults = require("./CodeGenerationResults");
 const Dependency = require("./Dependency");
 const DependencyTemplates = require("./DependencyTemplates");
 const Entrypoint = require("./Entrypoint");
 const ErrorHelpers = require("./ErrorHelpers");
 const FileSystemInfo = require("./FileSystemInfo");
-const {
-	connectChunkGroupAndChunk,
-	connectChunkGroupParentAndChild,
-	connectEntrypointAndDependOn
-} = require("./GraphHelpers");
-const {
-	makeWebpackError,
-	tryRunOrWebpackError
-} = require("./HookWebpackError");
 const MainTemplate = require("./MainTemplate");
 const Module = require("./Module");
-const ModuleDependencyError = require("./ModuleDependencyError");
-const ModuleDependencyWarning = require("./ModuleDependencyWarning");
 const ModuleGraph = require("./ModuleGraph");
-const ModuleHashingError = require("./ModuleHashingError");
-const ModuleNotFoundError = require("./ModuleNotFoundError");
 const ModuleProfile = require("./ModuleProfile");
-const ModuleRestoreError = require("./ModuleRestoreError");
-const ModuleStoreError = require("./ModuleStoreError");
 const ModuleTemplate = require("./ModuleTemplate");
 const { WEBPACK_MODULE_TYPE_RUNTIME } = require("./ModuleTypeConstants");
 const RuntimeGlobals = require("./RuntimeGlobals");
 const RuntimeTemplate = require("./RuntimeTemplate");
 const Stats = require("./Stats");
-const WebpackError = require("./WebpackError");
 const buildChunkGraph = require("./buildChunkGraph");
 const BuildCycleError = require("./errors/BuildCycleError");
+const ChunkRenderError = require("./errors/ChunkRenderError");
+const CodeGenerationError = require("./errors/CodeGenerationError");
+const {
+	makeWebpackError,
+	tryRunOrWebpackError
+} = require("./errors/HookWebpackError");
+const ModuleDependencyError = require("./errors/ModuleDependencyError");
+const ModuleDependencyWarning = require("./errors/ModuleDependencyWarning");
+const ModuleHashingError = require("./errors/ModuleHashingError");
+const ModuleNotFoundError = require("./errors/ModuleNotFoundError");
+const ModuleRestoreError = require("./errors/ModuleRestoreError");
+const ModuleStoreError = require("./errors/ModuleStoreError");
+const WebpackError = require("./errors/WebpackError");
 const { LogType, Logger } = require("./logging/Logger");
 const StatsFactory = require("./stats/StatsFactory");
 const StatsPrinter = require("./stats/StatsPrinter");
@@ -3214,7 +3209,7 @@ BREAKING CHANGE: Asset processing hooks in Compilation has been merged into a si
 				let hasProblems = this.reportDependencyErrorsAndWarnings(module, [
 					module
 				]);
-				const errors = module.getErrors();
+				const errors = /** @type {WebpackError[]} */ (module.getErrors());
 				if (errors !== undefined) {
 					for (const error of errors) {
 						if (!error.module) {
@@ -3224,7 +3219,7 @@ BREAKING CHANGE: Asset processing hooks in Compilation has been merged into a si
 						hasProblems = true;
 					}
 				}
-				const warnings = module.getWarnings();
+				const warnings = /** @type {WebpackError[]} */ (module.getWarnings());
 				if (warnings !== undefined) {
 					for (const warning of warnings) {
 						if (!warning.module) {
@@ -3312,7 +3307,10 @@ BREAKING CHANGE: Asset processing hooks in Compilation has been merged into a si
 			this.namedChunkGroups.set(name, entrypoint);
 			this.entrypoints.set(name, entrypoint);
 			this.chunkGroups.push(entrypoint);
-			connectChunkGroupAndChunk(entrypoint, chunk);
+
+			if (entrypoint.pushChunk(chunk)) {
+				chunk.addGroup(entrypoint);
+			}
 
 			/** @type {Set<Module>} */
 			const entryModules = new Set();
@@ -3403,8 +3401,12 @@ Remove the 'runtime' option from the entrypoint.`);
 						entry.setRuntimeChunk(entryChunk);
 						continue outer;
 					}
-					connectEntrypointAndDependOn(entry, dependency);
-					connectChunkGroupParentAndChild(dependency, entry);
+
+					entry.addDependOn(dependency);
+
+					if (dependency.addChild(entry)) {
+						entry.addParent(dependency);
+					}
 				}
 			} else if (runtime) {
 				const entry = /** @type {Entrypoint} */ (this.entrypoints.get(name));
@@ -4156,7 +4158,9 @@ Or do you want to use the entrypoints '${name}' and '${runtime}' independently o
 		}
 		const chunk = this.addChunk(name);
 
-		connectChunkGroupAndChunk(chunkGroup, chunk);
+		if (chunkGroup.pushChunk(chunk)) {
+			chunk.addGroup(chunkGroup);
+		}
 
 		this.chunkGroups.push(chunkGroup);
 		if (name) {
@@ -4200,7 +4204,9 @@ Or do you want to use the entrypoints '${name}' and '${runtime}' independently o
 		}
 		this.chunkGroups.push(entrypoint);
 		this.asyncEntrypoints.push(entrypoint);
-		connectChunkGroupAndChunk(entrypoint, chunk);
+		if (entrypoint.pushChunk(chunk)) {
+			chunk.addGroup(entrypoint);
+		}
 		if (module) {
 			entrypoint.addOrigin(module, loc, request);
 		}
@@ -5493,7 +5499,9 @@ This prevents using hashes of each other and should be avoided.`);
 					...options.entryOptions
 				});
 				chunkGraph.connectChunkAndEntryModule(chunk, module, entrypoint);
-				connectChunkGroupAndChunk(entrypoint, chunk);
+				if (entrypoint.pushChunk(chunk)) {
+					chunk.addGroup(entrypoint);
+				}
 				entrypoint.setRuntimeChunk(chunk);
 				entrypoint.setEntrypointChunk(chunk);
 

package/lib/Compiler.js

@@ -17,7 +17,6 @@ const Cache = require("./Cache");
 const CacheFacade = require("./CacheFacade");
 const ChunkGraph = require("./ChunkGraph");
 const Compilation = require("./Compilation");
-const ConcurrentCompilationError = require("./ConcurrentCompilationError");
 const ContextModuleFactory = require("./ContextModuleFactory");
 const ModuleGraph = require("./ModuleGraph");
 const NormalModuleFactory = require("./NormalModuleFactory");
@@ -25,7 +24,8 @@ const RequestShortener = require("./RequestShortener");
 const ResolverFactory = require("./ResolverFactory");
 const Stats = require("./Stats");
 const Watching = require("./Watching");
-const WebpackError = require("./WebpackError");
+const ConcurrentCompilationError = require("./errors/ConcurrentCompilationError");
+const WebpackError = require("./errors/WebpackError");
 const { Logger } = require("./logging/Logger");
 const { dirname, join, mkdirp } = require("./util/fs");
 const { makePathsRelative } = require("./util/identifier");
@@ -1477,12 +1477,7 @@ ${other}`);
 		// // If we have precompiled schema let's use it
 		if (check) {
 			if (!check(value)) {
-				getValidate()(
-					getSchema(),
-					/** @type {EXPECTED_OBJECT | EXPECTED_OBJECT[]} */
-					(value),
-					options
-				);
+				getValidate()(getSchema(), value, options);
 				require("util").deprecate(
 					() => {},
 					"webpack bug: Pre-compiled schema reports error while real schema is happy. This has performance drawbacks.",
@@ -1493,11 +1488,7 @@ ${other}`);
 		}
 
 		// Otherwise let's standard validation
-		getValidate()(
-			getSchema(),
-			/** @type {EXPECTED_OBJECT | EXPECTED_OBJECT[]} */ (value),
-			options
-		);
+		getValidate()(getSchema(), value, options);
 	}
 }
 

package/lib/ContextModule.js

@@ -7,7 +7,6 @@
 
 const { OriginalSource, RawSource } = require("webpack-sources");
 const AsyncDependenciesBlock = require("./AsyncDependenciesBlock");
-const { makeWebpackError } = require("./HookWebpackError");
 const Module = require("./Module");
 const {
 	JAVASCRIPT_TYPE,
@@ -16,11 +15,12 @@ const {
 const { JAVASCRIPT_MODULE_TYPE_DYNAMIC } = require("./ModuleTypeConstants");
 const RuntimeGlobals = require("./RuntimeGlobals");
 const Template = require("./Template");
-const WebpackError = require("./WebpackError");
 const {
 	getOutgoingAsyncModules
 } = require("./async-modules/AsyncModuleHelpers");
 const { ImportPhase, ImportPhaseUtils } = require("./dependencies/ImportPhase");
+const { makeWebpackError } = require("./errors/HookWebpackError");
+const WebpackError = require("./errors/WebpackError");
 const {
 	compareLocations,
 	compareModulesById,

package/lib/DefinePlugin.js

@@ -12,8 +12,8 @@ const {
 	JAVASCRIPT_MODULE_TYPE_ESM
 } = require("./ModuleTypeConstants");
 const RuntimeGlobals = require("./RuntimeGlobals");
-const WebpackError = require("./WebpackError");
 const ConstDependency = require("./dependencies/ConstDependency");
+const WebpackError = require("./errors/WebpackError");
 const BasicEvaluatedExpression = require("./javascript/BasicEvaluatedExpression");
 const { VariableInfo } = require("./javascript/JavascriptParser");
 const {
@@ -319,7 +319,7 @@ const toCacheVersion = (code) => {
 		const items = Object.keys(code).map((key) => ({
 			key,
 			value: toCacheVersion(
-				/** @type {Record<string, EXPECTED_ANY>} */
+				/** @type {Record<string, CodeValue>} */
 				(code)[key]
 			)
 		}));

package/lib/Dependency.js

@@ -14,7 +14,7 @@ const memoize = require("./util/memoize");
 /** @typedef {import("./ModuleGraphConnection")} ModuleGraphConnection */
 /** @typedef {import("./ModuleGraphConnection").ConnectionState} ConnectionState */
 /** @typedef {import("./RuntimeTemplate")} RuntimeTemplate */
-/** @typedef {import("./WebpackError")} WebpackError */
+/** @typedef {import("./errors/WebpackError")} WebpackError */
 /** @typedef {import("./serialization/ObjectMiddleware").ObjectDeserializerContext} ObjectDeserializerContext */
 /** @typedef {import("./serialization/ObjectMiddleware").ObjectSerializerContext} ObjectSerializerContext */
 /** @typedef {import("./util/Hash")} Hash */
@@ -325,6 +325,14 @@ class Dependency {
 		return getIgnoredModule();
 	}
 
+	/**
+	 * Returns true if this dependency can be concatenated
+	 * @returns {boolean} true if this dependency can be concatenated
+	 */
+	canConcatenate() {
+		return false;
+	}
+
 	/**
 	 * Serializes this instance into the provided serializer context.
 	 * @param {ObjectSerializerContext} context context
@@ -394,6 +402,19 @@ Object.defineProperty(Dependency.prototype, "module", {
 Dependency.isLowPriorityDependency = (dependency) =>
 	/** @type {ModuleDependency} */ (dependency).sourceOrder === Infinity;
 
+// TODO in webpack 6, call canConcatenate() directly on the dependency instance instead of using this static method.
+/**
+ * Returns true if the dependency can be concatenated (scope hoisting).
+ * @param {Dependency} dependency dep
+ * @returns {boolean} true if this dependency supports concatenation
+ */
+Dependency.canConcatenate = (dependency) => {
+	if (typeof dependency.canConcatenate === "function") {
+		return dependency.canConcatenate();
+	}
+	return false;
+};
+
 // TODO remove in webpack 6
 Object.defineProperty(Dependency.prototype, "disconnect", {
 	/**

package/lib/DependencyTemplate.js

@@ -52,6 +52,7 @@
  * @typedef {object} CssData
  * @property {boolean} esModule whether export __esModule
  * @property {Map<string, string>} exports the css exports
+ * @property {Map<string, { line: number, column: number }>=} exportLocs source position (line is 1-based, column is 0-based) of each export's defining identifier in the original CSS, used to emit fine-grained JS-to-CSS source mappings
  */
 
 /** @typedef {DependencyTemplateContext & CssDependencyTemplateContextExtras} CssDependencyTemplateContext */
@@ -67,7 +68,7 @@ class DependencyTemplate {
 	 * @returns {void}
 	 */
 	apply(dependency, source, templateContext) {
-		const AbstractMethodError = require("./AbstractMethodError");
+		const AbstractMethodError = require("./errors/AbstractMethodError");
 
 		throw new AbstractMethodError();
 	}

package/lib/EnvironmentPlugin.js

@@ -6,7 +6,7 @@
 "use strict";
 
 const DefinePlugin = require("./DefinePlugin");
-const WebpackError = require("./WebpackError");
+const WebpackError = require("./errors/WebpackError");
 
 /** @typedef {import("./Compiler")} Compiler */
 /** @typedef {import("./DefinePlugin").CodeValue} CodeValue */

package/lib/EvalSourceMapDevToolPlugin.js

@@ -103,17 +103,12 @@ class EvalSourceMapDevToolPlugin {
 					};
 
 					if (m instanceof NormalModule) {
-						const module = /** @type {NormalModule} */ (m);
-						if (!matchModule(module.resource)) {
+						if (!matchModule(m.resource)) {
 							return result(source);
 						}
 					} else if (m instanceof ConcatenatedModule) {
-						const concatModule = /** @type {ConcatenatedModule} */ (m);
-						if (concatModule.rootModule instanceof NormalModule) {
-							const module = /** @type {NormalModule} */ (
-								concatModule.rootModule
-							);
-							if (!matchModule(module.resource)) {
+						if (m.rootModule instanceof NormalModule) {
+							if (!matchModule(m.rootModule.resource)) {
 								return result(source);
 							}
 						} else {
@@ -146,9 +141,13 @@ class EvalSourceMapDevToolPlugin {
 					sourceMap = { ...sourceMap };
 					const context = compiler.context;
 					const root = compiler.root;
+					const cachedAbsolutify = makePathsAbsolute.bindContextCache(
+						context,
+						root
+					);
 					const modules = sourceMap.sources.map((source) => {
 						if (!source.startsWith("webpack://")) return source;
-						source = makePathsAbsolute(context, source.slice(10), root);
+						source = cachedAbsolutify(source.slice(10));
 						const module = compilation.findModule(source);
 						return module || source;
 					});

package/lib/ExternalModule.js

@@ -8,7 +8,6 @@
 const { SyncBailHook } = require("tapable");
 const { OriginalSource, RawSource } = require("webpack-sources");
 const ConcatenationScope = require("./ConcatenationScope");
-const EnvironmentNotSupportAsyncWarning = require("./EnvironmentNotSupportAsyncWarning");
 const { UsageState } = require("./ExportsInfo");
 const InitFragment = require("./InitFragment");
 const Module = require("./Module");
@@ -22,7 +21,9 @@ const { JAVASCRIPT_MODULE_TYPE_DYNAMIC } = require("./ModuleTypeConstants");
 const RuntimeGlobals = require("./RuntimeGlobals");
 const Template = require("./Template");
 const { DEFAULTS } = require("./config/defaults");
+const { ImportPhaseUtils } = require("./dependencies/ImportPhase");
 const StaticExportsDependency = require("./dependencies/StaticExportsDependency");
+const EnvironmentNotSupportAsyncWarning = require("./errors/EnvironmentNotSupportAsyncWarning");
 const createHash = require("./util/createHash");
 const extractUrlAndGlobal = require("./util/extractUrlAndGlobal");
 const makeSerializable = require("./util/makeSerializable");
@@ -62,13 +63,14 @@ const { register } = require("./util/serialization");
 /** @typedef {import("./RuntimeTemplate")} RuntimeTemplate */
 /** @typedef {import("./javascript/JavascriptModulesPlugin").ChunkRenderContext} ChunkRenderContext */
 /** @typedef {import("./javascript/JavascriptParser").ImportAttributes} ImportAttributes */
+/** @typedef {import("./dependencies/ImportPhase").ImportPhaseType} ImportPhaseType */
 /** @typedef {import("./serialization/ObjectMiddleware").ObjectDeserializerContext} ObjectDeserializerContext */
 /** @typedef {import("./serialization/ObjectMiddleware").ObjectSerializerContext} ObjectSerializerContext */
 /** @typedef {import("./util/Hash")} Hash */
 /** @typedef {import("./util/fs").InputFileSystem} InputFileSystem */
 /** @typedef {import("./util/runtime").RuntimeSpec} RuntimeSpec */
 
-/** @typedef {{ attributes?: ImportAttributes, externalType: "import" | "module" | undefined }} ImportDependencyMeta */
+/** @typedef {{ attributes?: ImportAttributes, phase?: ImportPhaseType, externalType: "import" | "module" | undefined }} ImportDependencyMeta */
 /** @typedef {{ layer?: string, supports?: string, media?: string }} CssImportDependencyMeta */
 /** @typedef {{ sourceType: "css-url" }} AssetDependencyMeta */
 
@@ -202,15 +204,25 @@ const getSourceForImportExternal = (
 	runtimeTemplate,
 	dependencyMeta
 ) => {
-	const importName = runtimeTemplate.outputOptions.importFunctionName;
+	const baseImportName = runtimeTemplate.outputOptions.importFunctionName;
 	if (
 		!runtimeTemplate.supportsDynamicImport() &&
-		(importName === "import" || importName === "module-import")
+		(baseImportName === "import" || baseImportName === "module-import")
 	) {
 		throw new Error(
 			"The target environment doesn't support 'import()' so it's not possible to use external type 'import'"
 		);
 	}
+	const phase = dependencyMeta && dependencyMeta.phase;
+	// `import.defer(…)` and `import.source(…)` are only valid forms of the
+	// native `import(…)` function, so we only emit the phase suffix when the
+	// importFunctionName is the default `"import"`.
+	const importName =
+		baseImportName === "import" && ImportPhaseUtils.isDefer(phase)
+			? "import.defer"
+			: baseImportName === "import" && ImportPhaseUtils.isSource(phase)
+				? "import.source"
+				: baseImportName;
 	const attributes =
 		dependencyMeta && dependencyMeta.attributes
 			? dependencyMeta.attributes._isLegacyAssert
@@ -293,7 +305,9 @@ class ModuleExternalInitFragment extends InitFragment {
 			"",
 			InitFragment.STAGE_HARMONY_IMPORTS,
 			0,
-			`external module import ${ident} ${imported === true ? imported : imported.join(" ")}`
+			`external module import ${ident} ${
+				imported === true ? imported : imported.join(" ")
+			}`
 		);
 		this._ident = ident;
 		this._request = request;
@@ -332,23 +346,34 @@ class ModuleExternalInitFragment extends InitFragment {
 		} = this;
 		const attributes =
 			dependencyMeta && dependencyMeta.attributes
-				? dependencyMeta.attributes._isLegacyAssert &&
-					dependencyMeta.attributes._isLegacyAssert
+				? dependencyMeta.attributes._isLegacyAssert
 					? ` assert ${JSON.stringify(
 							dependencyMeta.attributes,
 							importAssertionReplacer
 						)}`
 					: ` with ${JSON.stringify(dependencyMeta.attributes)}`
 				: "";
+		const phase = dependencyMeta && dependencyMeta.phase;
 		let content = "";
 		if (imported === true) {
 			// namespace
-			content = `import * as ${identifier} from ${JSON.stringify(request)}${
-				attributes
-			};\n`;
+			const phaseKeyword = ImportPhaseUtils.isDefer(phase) ? "defer " : "";
+			content = `import ${phaseKeyword}* as ${identifier} from ${JSON.stringify(
+				request
+			)}${attributes};\n`;
 		} else if (imported.length === 0) {
 			// just import, no use
 			content = `import ${JSON.stringify(request)}${attributes};\n`;
+		} else if (
+			ImportPhaseUtils.isSource(phase) &&
+			imported.length === 1 &&
+			imported[0][0] === "default"
+		) {
+			// `import source x from "…"` — the source-phase form binds the source
+			// object directly to a single identifier (no namespace, no destructuring).
+			content = `import source ${imported[0][1]} from ${JSON.stringify(
+				request
+			)}${attributes};\n`;
 		} else {
 			content = `import { ${imported
 				.map(([name, finalName]) => {
@@ -469,6 +494,7 @@ const getSourceForModuleExternal = (
 	dependencyMeta,
 	concatenationScope
 ) => {
+	const phase = dependencyMeta && dependencyMeta.phase;
 	/** @type {Imported} */
 	let imported = true;
 	if (concatenationScope) {
@@ -497,6 +523,14 @@ const getSourceForModuleExternal = (
 		imported = true;
 	}
 
+	// `import defer …` is only valid as `import defer * as ns from "…"`, so
+	// keep the namespace form even if usage analysis would otherwise narrow
+	// the import down to specific names. Defer + concatenation is semantically
+	// at odds (lazy vs. eager), so we preserve the user-written shape here.
+	if (ImportPhaseUtils.isDefer(phase)) {
+		imported = true;
+	}
+
 	const initFragment = new ModuleExternalInitFragment(
 		moduleAndSpecifiers[0],
 		imported,
@@ -751,7 +785,21 @@ class ExternalModule extends Module {
 	 * @returns {string} a unique identifier of the module
 	 */
 	identifier() {
-		return `external ${this._resolveExternalType(this.externalType)} ${JSON.stringify(this.request)}`;
+		let id = `external ${this._resolveExternalType(
+			this.externalType
+		)} ${JSON.stringify(this.request)}`;
+		const meta = /** @type {ImportDependencyMeta | undefined} */ (
+			this.dependencyMeta
+		);
+		if (meta) {
+			if (meta.phase) {
+				id += `|phase=${ImportPhaseUtils.stringify(meta.phase)}`;
+			}
+			if (meta.attributes) {
+				id += `|attributes=${JSON.stringify(meta.attributes)}`;
+			}
+		}
+		return id;
 	}
 
 	/**
@@ -1126,7 +1174,9 @@ class ExternalModule extends Module {
 						scope.registerRawExport(specifier, finalName);
 					}
 				} else if (concatenationScope) {
-					sourceString = `${runtimeTemplate.renderConst()} ${ConcatenationScope.NAMESPACE_OBJECT_EXPORT} = ${sourceString};`;
+					sourceString = `${runtimeTemplate.renderConst()} ${
+						ConcatenationScope.NAMESPACE_OBJECT_EXPORT
+					} = ${sourceString};`;
 					concatenationScope.registerNamespaceExport(
 						ConcatenationScope.NAMESPACE_OBJECT_EXPORT
 					);
@@ -1194,10 +1244,21 @@ class ExternalModule extends Module {
 	updateHash(hash, context) {
 		const { chunkGraph } = context;
 		hash.update(
-			`${this._resolveExternalType(this.externalType)}${JSON.stringify(this.request)}${this.isOptional(
-				chunkGraph.moduleGraph
-			)}`
+			`${this._resolveExternalType(this.externalType)}${JSON.stringify(
+				this.request
+			)}${this.isOptional(chunkGraph.moduleGraph)}`
+		);
+		const meta = /** @type {ImportDependencyMeta | undefined} */ (
+			this.dependencyMeta
 		);
+		if (meta) {
+			if (meta.phase) {
+				hash.update(`|phase=${ImportPhaseUtils.stringify(meta.phase)}`);
+			}
+			if (meta.attributes) {
+				hash.update(`|attributes=${JSON.stringify(meta.attributes)}`);
+			}
+		}
 		super.updateHash(hash, context);
 	}
 

package/lib/ExternalModuleFactoryPlugin.js

@@ -193,6 +193,11 @@ class ExternalModuleFactoryPlugin {
 
 						dependencyMeta = {
 							attributes: dependency.attributes,
+							phase:
+								dependency instanceof HarmonyImportDependency ||
+								dependency instanceof ImportDependency
+									? dependency.phase
+									: undefined,
 							externalType
 						};
 					} else if (dependency instanceof CssImportDependency) {