webpack 5.100.1 → 5.100.2

package/lib/Compilation.js

@@ -292,7 +292,7 @@ const { isSourceEqual } = require("./util/source");
  * @property {boolean=} development true, when asset is only used for development and doesn't count towards user-facing assets
  * @property {boolean=} hotModuleReplacement true, when asset ships data for updating an existing application (HMR)
  * @property {boolean=} javascriptModule true, when asset is javascript and an ESM
- * @property {Record<string, string | string[]>=} related object of pointers to other assets, keyed by type of relation (only points from parent to child)
+ * @property {Record<string, null | string | string[]>=} related object of pointers to other assets, keyed by type of relation (only points from parent to child)
  */
 
 /** @typedef {KnownAssetInfo & Record<string, EXPECTED_ANY>} AssetInfo */

package/lib/ModuleGraph.js

@@ -10,6 +10,7 @@ const ExportsInfo = require("./ExportsInfo");
 const ModuleGraphConnection = require("./ModuleGraphConnection");
 const SortableSet = require("./util/SortableSet");
 const WeakTupleMap = require("./util/WeakTupleMap");
+const { sortWithSourceOrder } = require("./util/comparators");
 
 /** @typedef {import("./Compilation").ModuleMemCaches} ModuleMemCaches */
 /** @typedef {import("./DependenciesBlock")} DependenciesBlock */
@@ -19,6 +20,9 @@ const WeakTupleMap = require("./util/WeakTupleMap");
 /** @typedef {import("./ModuleProfile")} ModuleProfile */
 /** @typedef {import("./RequestShortener")} RequestShortener */
 /** @typedef {import("./util/runtime").RuntimeSpec} RuntimeSpec */
+/** @typedef {import("./dependencies/HarmonyImportSideEffectDependency")} HarmonyImportSideEffectDependency */
+/** @typedef {import("./dependencies/HarmonyImportSpecifierDependency")} HarmonyImportSpecifierDependency */
+/** @typedef {import("./util/comparators").DependencySourceOrder} DependencySourceOrder */
 
 /**
  * @callback OptimizationBailoutFunction
@@ -158,6 +162,12 @@ class ModuleGraph {
 		 * @private
 		 */
 		this._cacheStage = undefined;
+
+		/**
+		 * @type {WeakMap<Dependency, DependencySourceOrder>}
+		 * @private
+		 */
+		this._dependencySourceOrderMap = new WeakMap();
 	}
 
 	/**
@@ -186,6 +196,15 @@ class ModuleGraph {
 		dependency._parentModule = module;
 	}
 
+	/**
+	 * @param {Dependency} dependency the dependency
+	 * @param {number} index the index
+	 * @returns {void}
+	 */
+	setParentDependenciesBlockIndex(dependency, index) {
+		dependency._parentDependenciesBlockIndex = index;
+	}
+
 	/**
 	 * @param {Dependency} dependency the dependency
 	 * @returns {Module | undefined} parent module
@@ -265,6 +284,64 @@ class ModuleGraph {
 		targetMgm.incomingConnections.add(newConnection);
 	}
 
+	/**
+	 * @param {Dependency} dependency the need update dependency
+	 * @param {ModuleGraphConnection=} connection the target connection
+	 * @param {Module=} parentModule the parent module
+	 * @returns {void}
+	 */
+	updateParent(dependency, connection, parentModule) {
+		if (this._dependencySourceOrderMap.has(dependency)) {
+			return;
+		}
+		if (!connection || !parentModule) {
+			return;
+		}
+		const originDependency = connection.dependency;
+
+		// src/index.js
+		// import { c } from "lib/c" -> c = 0
+		// import { a, b } from "lib" -> a and b have the same source order -> a = b = 1
+		// import { d } from "lib/d" -> d = 2
+		const currentSourceOrder =
+			/** @type { HarmonyImportSideEffectDependency | HarmonyImportSpecifierDependency} */ (
+				dependency
+			).sourceOrder;
+
+		// lib/index.js (reexport)
+		// import { a } from "lib/a" -> a = 0
+		// import { b } from "lib/b" -> b = 1
+		const originSourceOrder =
+			/** @type { HarmonyImportSideEffectDependency | HarmonyImportSpecifierDependency} */ (
+				originDependency
+			).sourceOrder;
+		if (
+			typeof currentSourceOrder === "number" &&
+			typeof originSourceOrder === "number"
+		) {
+			// src/index.js
+			// import { c } from "lib/c" -> c = 0
+			// import { a } from "lib/a" -> a = 1.0 = 1(main) + 0.0(sub)
+			// import { b } from "lib/b" -> b = 1.1 = 1(main) + 0.1(sub)
+			// import { d } from "lib/d" -> d = 2
+			this._dependencySourceOrderMap.set(dependency, {
+				main: currentSourceOrder,
+				sub: originSourceOrder
+			});
+
+			// If dependencies like HarmonyImportSideEffectDependency and HarmonyImportSpecifierDependency have a SourceOrder,
+			// we sort based on it; otherwise, we preserve the original order.
+			sortWithSourceOrder(
+				parentModule.dependencies,
+				this._dependencySourceOrderMap
+			);
+
+			for (const [index, dep] of parentModule.dependencies.entries()) {
+				this.setParentDependenciesBlockIndex(dep, index);
+			}
+		}
+	}
+
 	/**
 	 * @param {Dependency} dependency the referencing dependency
 	 * @returns {void}

package/lib/NormalModule.js

@@ -40,7 +40,8 @@ const {
 	compareLocations,
 	compareSelect,
 	concatComparators,
-	keepOriginalOrder
+	keepOriginalOrder,
+	sortWithSourceOrder
 } = require("./util/comparators");
 const createHash = require("./util/createHash");
 const { createFakeHook } = require("./util/deprecation");
@@ -99,6 +100,8 @@ const memoize = require("./util/memoize");
 /** @typedef {import("./util/runtime").RuntimeSpec} RuntimeSpec */
 /** @typedef {import("../declarations/WebpackOptions").HashFunction} HashFunction */
 /** @typedef {import("./util/identifier").AssociatedObjectForCache} AssociatedObjectForCache */
+/** @typedef {import("./dependencies/HarmonyImportSideEffectDependency")} HarmonyImportSideEffectDependency */
+/** @typedef {import("./dependencies/HarmonyImportSpecifierDependency")} HarmonyImportSpecifierDependency */
 /**
  * @template T
  * @typedef {import("./util/deprecation").FakeHook<T>} FakeHook
@@ -1221,6 +1224,7 @@ class NormalModule extends Module {
 						keepOriginalOrder(this.dependencies)
 					)
 				);
+				sortWithSourceOrder(this.dependencies, new WeakMap());
 				this._initBuildHash(compilation);
 				this._lastSuccessfulBuildMeta =
 					/** @type {BuildMeta} */

package/lib/RuntimeTemplate.js

@@ -8,6 +8,9 @@
 const InitFragment = require("./InitFragment");
 const RuntimeGlobals = require("./RuntimeGlobals");
 const Template = require("./Template");
+const {
+	getOutgoingAsyncModules
+} = require("./async-modules/AsyncModuleHelpers");
 const {
 	getMakeDeferredNamespaceModeFromExportsType,
 	getOptimizedDeferredModule
@@ -814,27 +817,12 @@ class RuntimeTemplate {
 			];
 		}
 
-		/** @type {Set<Module>} */
-		const innerAsyncDependencies = new Set();
 		defer = defer && (module.buildMeta ? !module.buildMeta.async : true);
 
-		if (this.compilation.options.experiments.deferImport && defer) {
-			const seen = new Set();
-			(function gatherInnerAsyncDependencies(mod) {
-				if (!moduleGraph.isAsync(mod) || seen.has(mod)) return;
-				seen.add(mod);
-				if (mod.buildMeta && mod.buildMeta.async) {
-					innerAsyncDependencies.add(mod);
-				} else {
-					for (const dep of mod.dependencies) {
-						const module = moduleGraph.getModule(dep);
-						if (module) {
-							gatherInnerAsyncDependencies(module);
-						}
-					}
-				}
-			})(module);
-		}
+		/** @type {Set<Module>} */
+		const outgoingAsyncModules = defer
+			? getOutgoingAsyncModules(moduleGraph, module)
+			: new Set();
 
 		if (chunkGraph.getModuleId(module) === null) {
 			if (weak) {
@@ -877,13 +865,14 @@ class RuntimeTemplate {
 				this,
 				exportsType,
 				moduleId,
-				Array.from(innerAsyncDependencies, mod => chunkGraph.getModuleId(mod))
+				Array.from(outgoingAsyncModules, mod => chunkGraph.getModuleId(mod))
 			)};\n`;
-		} else {
-			importContent = `/* harmony import */ ${optDeclaration}${importVar} = ${RuntimeGlobals.require}(${moduleId});\n`;
+
+			return [importContent, ""];
 		}
+		importContent = `/* harmony import */ ${optDeclaration}${importVar} = ${RuntimeGlobals.require}(${moduleId});\n`;
 
-		if (exportsType === "dynamic" && !defer) {
+		if (exportsType === "dynamic") {
 			runtimeRequirements.add(RuntimeGlobals.compatGetDefaultExport);
 			return [
 				importContent,

package/lib/WebpackOptionsApply.js

@@ -438,6 +438,13 @@ class WebpackOptionsApply extends OptionsApply {
 			new HttpUriPlugin(httpOptions).apply(compiler);
 		}
 
+		if (options.experiments.deferImport) {
+			const JavascriptParser = require("./javascript/JavascriptParser");
+			const importPhases = require("acorn-import-phases");
+
+			JavascriptParser.extend(importPhases({ source: false }));
+		}
+
 		new EntryOptionPlugin().apply(compiler);
 		compiler.hooks.entryOption.call(
 			/** @type {string} */

package/lib/asset/AssetGenerator.js

@@ -57,8 +57,8 @@ const nonNumericOnlyHash = require("../util/nonNumericOnlyHash");
 /**
  * @template T
  * @template U
- * @param {string | Array<T> | Set<T> | undefined} a a
- * @param {string | Array<U> | Set<U> | undefined} b b
+ * @param {null | string | Array<T> | Set<T> | undefined} a a
+ * @param {null | string | Array<U> | Set<U> | undefined} b b
  * @returns {Array<T> & Array<U>} array
  */
 const mergeMaybeArrays = (a, b) => {

package/lib/async-modules/AsyncModuleHelpers.js

@@ -0,0 +1,50 @@
+/*
+	MIT License http://www.opensource.org/licenses/mit-license.php
+	Author Haijie Xie @hai-x
+*/
+
+"use strict";
+
+const HarmonyImportDependency = require("../dependencies/HarmonyImportDependency");
+
+/** @typedef {import("../ModuleGraph")} ModuleGraph */
+/** @typedef {import("../Module")} Module */
+
+/**
+ * @param {ModuleGraph} moduleGraph module graph
+ * @param {Module} module module
+ * @returns {Set<Module>} set of modules
+ */
+const getOutgoingAsyncModules = (moduleGraph, module) => {
+	/** @type {Set<Module>} */
+	const set = new Set();
+	/** @type {Set<Module>} */
+	const seen = new Set();
+	(function g(/** @type {Module} */ module) {
+		if (!moduleGraph.isAsync(module) || seen.has(module)) return;
+		seen.add(module);
+		if (module.buildMeta && module.buildMeta.async) {
+			set.add(module);
+		} else {
+			const outgoingConnectionMap =
+				moduleGraph.getOutgoingConnectionsByModule(module);
+			if (outgoingConnectionMap) {
+				for (const [module, connections] of outgoingConnectionMap) {
+					if (
+						connections.some(
+							c =>
+								c.dependency instanceof HarmonyImportDependency &&
+								c.isTargetActive(undefined)
+						) &&
+						module
+					) {
+						g(module);
+					}
+				}
+			}
+		}
+	})(module);
+	return set;
+};
+
+module.exports.getOutgoingAsyncModules = getOutgoingAsyncModules;

package/lib/dependencies/HarmonyExportDependencyParserPlugin.js

@@ -77,12 +77,7 @@ module.exports = class HarmonyExportDependencyParserPlugin {
 			clearDep.loc = /** @type {DependencyLocation} */ (statement.loc);
 			clearDep.loc.index = -1;
 			parser.state.module.addPresentationalDependency(clearDep);
-			const { defer } = getImportMode(
-				parser,
-				statement,
-				this.deferImport,
-				true
-			);
+			const { defer } = getImportMode(parser, statement);
 			if (defer) {
 				const error = new WebpackError(
 					"Deferred re-export (`export defer * as namespace from '...'`) is not a part of the Import Defer proposal.\nUse the following code instead:\n    import defer * as namespace from '...';\n    export { namespace };"
@@ -207,12 +202,7 @@ module.exports = class HarmonyExportDependencyParserPlugin {
 						parser.state.harmonyStarExports || new HarmonyStarExportsList();
 				}
 				const attributes = getImportAttributes(statement);
-				const { defer } = getImportMode(
-					parser,
-					statement,
-					this.deferImport,
-					false
-				);
+				const { defer } = getImportMode(parser, statement);
 				const dep = new HarmonyExportImportedSpecifierDependency(
 					/** @type {string} */
 					(source),

package/lib/dependencies/HarmonyImportDependencyParserPlugin.js

@@ -7,7 +7,6 @@
 
 const CommentCompilationWarning = require("../CommentCompilationWarning");
 const HotModuleReplacementPlugin = require("../HotModuleReplacementPlugin");
-const UnsupportedFeatureWarning = require("../UnsupportedFeatureWarning");
 const WebpackError = require("../WebpackError");
 const { getImportAttributes } = require("../javascript/JavascriptParser");
 const InnerGraph = require("../optimize/InnerGraph");
@@ -125,12 +124,7 @@ module.exports = class HarmonyImportDependencyParserPlugin {
 			parser.state.module.addPresentationalDependency(clearDep);
 			parser.unsetAsiPosition(/** @type {Range} */ (statement.range)[1]);
 			const attributes = getImportAttributes(statement);
-			const { defer } = getImportMode(
-				parser,
-				statement,
-				this.deferImport,
-				true
-			);
+			const { defer } = getImportMode(parser, statement);
 			if (
 				defer &&
 				(statement.specifiers.length !== 1 ||
@@ -156,12 +150,7 @@ module.exports = class HarmonyImportDependencyParserPlugin {
 			PLUGIN_NAME,
 			(statement, source, id, name) => {
 				const ids = id === null ? [] : [id];
-				const { defer } = getImportMode(
-					parser,
-					statement,
-					this.deferImport,
-					false
-				);
+				const { defer } = getImportMode(parser, statement);
 				parser.tagVariable(name, harmonySpecifierTag, {
 					name,
 					source,
@@ -398,23 +387,10 @@ module.exports = class HarmonyImportDependencyParserPlugin {
 /**
  * @param {JavascriptParser} parser parser
  * @param {ExportNamedDeclaration | ExportAllDeclaration | ImportDeclaration} node node
- * @param {boolean | undefined} deferImportEnabled defer import enabled
- * @param {boolean} reportSyntaxError report syntax error
  * @returns {{defer: boolean}} import attributes
  */
-function getImportMode(parser, node, deferImportEnabled, reportSyntaxError) {
-	const result = { defer: false };
-	if ("phase" in node && node.phase === "defer") {
-		if (deferImportEnabled) {
-			result.defer = true;
-		} else if (reportSyntaxError) {
-			const error = new WebpackError(
-				"Deferred import syntax (`import defer * as namespace from '...'`) cannot be used unless experimental.deferImport is true."
-			);
-			error.loc = node.loc || undefined;
-			parser.state.current.addError(error);
-		}
-	}
+function getImportMode(parser, node) {
+	const result = { defer: "phase" in node && node.phase === "defer" };
 	if (!node.range) {
 		return result;
 	}
@@ -437,7 +413,7 @@ function getImportMode(parser, node, deferImportEnabled, reportSyntaxError) {
 			result.defer = options.webpackDefer;
 		} else if (node.loc) {
 			parser.state.module.addWarning(
-				new UnsupportedFeatureWarning(
+				new CommentCompilationWarning(
 					"webpackDefer magic comment expected a boolean value.",
 					node.loc
 				)

package/lib/javascript/JavascriptParser.js

@@ -7,7 +7,6 @@
 
 const vm = require("vm");
 const { Parser: AcornParser, tokTypes } = require("acorn");
-const acornImportPhases = require("acorn-import-phases");
 const { HookMap, SyncBailHook } = require("tapable");
 const Parser = require("../Parser");
 const StackedMap = require("../util/StackedMap");
@@ -182,10 +181,7 @@ const importAssertions = Parser =>
 	};
 
 // Syntax: https://developer.mozilla.org/en/SpiderMonkey/Parser_API
-const parser = AcornParser.extend(
-	importAssertions,
-	acornImportPhases({ source: false })
-);
+let parser = AcornParser.extend(importAssertions);
 
 /** @typedef {Record<string, string> & { _isLegacyAssert?: boolean }} ImportAttributes */
 
@@ -5135,6 +5131,15 @@ class JavascriptParser extends Parser {
 
 		return /** @type {Program} */ (ast);
 	}
+
+	/**
+	 * @param {((BaseParser: typeof AcornParser) => typeof AcornParser)[]} plugins parser plugin
+	 * @returns {typeof JavascriptParser} parser
+	 */
+	static extend(...plugins) {
+		parser = parser.extend(...plugins);
+		return JavascriptParser;
+	}
 }
 
 module.exports = JavascriptParser;

package/lib/optimize/SideEffectsFlagPlugin.js

@@ -320,8 +320,17 @@ class SideEffectsFlagPlugin {
 												({ module }) =>
 													module.getSideEffectsConnectionState(moduleGraph) ===
 													false,
-												({ module: newModule, export: exportName }) => {
+												({
+													module: newModule,
+													export: exportName,
+													connection: targetConnection
+												}) => {
 													moduleGraph.updateModule(dep, newModule);
+													moduleGraph.updateParent(
+														dep,
+														targetConnection,
+														/** @type {Module} */ (connection.originModule)
+													);
 													moduleGraph.addExplanation(
 														dep,
 														"(skipped side-effect-free modules)"
@@ -353,6 +362,13 @@ class SideEffectsFlagPlugin {
 											if (!target) continue;
 
 											moduleGraph.updateModule(dep, target.module);
+											moduleGraph.updateParent(
+												dep,
+												/** @type {ModuleGraphConnection} */ (
+													target.connection
+												),
+												/** @type {Module} */ (connection.originModule)
+											);
 											moduleGraph.addExplanation(
 												dep,
 												"(skipped side-effect-free modules)"

package/lib/stats/DefaultStatsFactoryPlugin.js

@@ -796,6 +796,7 @@ const SIMPLE_EXTRACTORS = {
 						? relatedEntry
 						: [relatedEntry];
 					for (const dep of deps) {
+						if (!dep) continue;
 						const depItem = assetMap.get(dep);
 						if (!depItem) continue;
 						assets.delete(depItem);

package/lib/util/comparators.js

@@ -13,9 +13,18 @@ const { compareRuntime } = require("./runtime");
 /** @typedef {import("../ChunkGraph").ModuleId} ModuleId */
 /** @typedef {import("../ChunkGroup")} ChunkGroup */
 /** @typedef {import("../Dependency").DependencyLocation} DependencyLocation */
+/** @typedef {import("../Dependency")} Dependency */
+/** @typedef {import("../dependencies/HarmonyImportSideEffectDependency")} HarmonyImportSideEffectDependency */
+/** @typedef {import("../dependencies/HarmonyImportSpecifierDependency")} HarmonyImportSpecifierDependency */
 /** @typedef {import("../Module")} Module */
 /** @typedef {import("../ModuleGraph")} ModuleGraph */
 
+/**
+ * @typedef {object} DependencySourceOrder
+ * @property {number} main the main source order
+ * @property {number} sub the sub source order
+ */
+
 /**
  * @template T
  * @typedef {(a: T, b: T) => -1 | 0 | 1} Comparator
@@ -497,6 +506,95 @@ const compareChunksNatural = chunkGraph => {
 	);
 };
 
+/**
+ * For HarmonyImportSideEffectDependency and HarmonyImportSpecifierDependency, we should prioritize import order to match the behavior of running modules directly in a JS engine without a bundler.
+ * For other types like ConstDependency, we can instead prioritize usage order.
+ * https://github.com/webpack/webpack/pull/19686
+ * @param {Dependency[]} dependencies dependencies
+ * @param {WeakMap<Dependency, DependencySourceOrder>} dependencySourceOrderMap dependency source order map
+ * @returns {void}
+ */
+const sortWithSourceOrder = (dependencies, dependencySourceOrderMap) => {
+	/**
+	 * @param {Dependency} dep dependency
+	 * @returns {number} source order
+	 */
+	const getSourceOrder = dep => {
+		if (dependencySourceOrderMap.has(dep)) {
+			const { main } = /** @type {DependencySourceOrder} */ (
+				dependencySourceOrderMap.get(dep)
+			);
+			return main;
+		}
+		return /** @type { HarmonyImportSideEffectDependency | HarmonyImportSpecifierDependency} */ (
+			dep
+		).sourceOrder;
+	};
+
+	/**
+	 * If the sourceOrder is a number, it means the dependency needs to be sorted.
+	 * @param {number | undefined} sourceOrder sourceOrder
+	 * @returns {boolean} needReSort
+	 */
+	const needReSort = sourceOrder => {
+		if (typeof sourceOrder === "number") {
+			return true;
+		}
+		return false;
+	};
+
+	// Extract dependencies with sourceOrder and sort them
+	const withSourceOrder = [];
+
+	// First pass: collect dependencies with sourceOrder
+	for (let i = 0; i < dependencies.length; i++) {
+		const dep = dependencies[i];
+		const sourceOrder = getSourceOrder(dep);
+
+		if (needReSort(sourceOrder)) {
+			withSourceOrder.push({ dep, sourceOrder, originalIndex: i });
+		}
+	}
+
+	if (withSourceOrder.length <= 1) {
+		return;
+	}
+
+	// Sort dependencies with sourceOrder
+	withSourceOrder.sort((a, b) => {
+		// Handle both dependencies in map case
+		if (
+			dependencySourceOrderMap.has(a.dep) &&
+			dependencySourceOrderMap.has(b.dep)
+		) {
+			const { main: mainA, sub: subA } = /** @type {DependencySourceOrder} */ (
+				dependencySourceOrderMap.get(a.dep)
+			);
+			const { main: mainB, sub: subB } = /** @type {DependencySourceOrder} */ (
+				dependencySourceOrderMap.get(b.dep)
+			);
+			if (mainA === mainB) {
+				return compareNumbers(subA, subB);
+			}
+			return compareNumbers(mainA, mainB);
+		}
+
+		return compareNumbers(a.sourceOrder, b.sourceOrder);
+	});
+
+	// Second pass: build result array
+	let sortedIndex = 0;
+	for (let i = 0; i < dependencies.length; i++) {
+		const dep = dependencies[i];
+		const sourceOrder = getSourceOrder(dep);
+
+		if (needReSort(sourceOrder)) {
+			dependencies[i] = withSourceOrder[sortedIndex].dep;
+			sortedIndex++;
+		}
+	}
+};
+
 module.exports.compareChunkGroupsByIndex = compareChunkGroupsByIndex;
 /** @type {ParameterizedComparator<ChunkGraph, Chunk>} */
 module.exports.compareChunks =
@@ -548,3 +646,4 @@ module.exports.compareStringsNumeric = compareStringsNumeric;
 module.exports.concatComparators = concatComparators;
 
 module.exports.keepOriginalOrder = keepOriginalOrder;
+module.exports.sortWithSourceOrder = sortWithSourceOrder;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webpack",
-  "version": "5.100.1",
+  "version": "5.100.2",
   "description": "Packs ECMAScript/CommonJs/AMD modules for the browser. Allows you to split your codebase into multiple bundles, which can be loaded on demand. Supports loaders to preprocess files, i.e. json, jsx, es7, css, less, ... and your custom stuff.",
   "homepage": "https://github.com/webpack/webpack",
   "bugs": "https://github.com/webpack/webpack/issues",
@@ -112,7 +112,7 @@
     "@babel/preset-react": "^7.27.1",
     "@codspeed/tinybench-plugin": "^4.0.1",
     "@eslint/js": "^9.29.0",
-    "@eslint/markdown": "^6.6.0",
+    "@eslint/markdown": "^7.0.0",
     "@stylistic/eslint-plugin": "^5.0.0",
     "@types/glob-to-regexp": "^0.4.4",
     "@types/graceful-fs": "^4.1.9",

package/types.d.ts

@@ -4,6 +4,7 @@
  * Run `yarn fix:special` to update
  */
 
+import { Parser as ParserImport } from "acorn";
 import { Buffer } from "buffer";
 import { Scope } from "eslint-scope";
 import {
@@ -3719,6 +3720,17 @@ declare interface DependencyConstructor {
 	new (...args: any[]): Dependency;
 }
 type DependencyLocation = SyntheticDependencyLocation | RealDependencyLocation;
+declare interface DependencySourceOrder {
+	/**
+	 * the main source order
+	 */
+	main: number;
+
+	/**
+	 * the sub source order
+	 */
+	sub: number;
+}
 declare class DependencyTemplate {
 	constructor();
 	apply(
@@ -6431,7 +6443,7 @@ declare class JavascriptModulesPlugin {
 	): TemplatePath;
 	static chunkHasJs: (chunk: Chunk, chunkGraph: ChunkGraph) => boolean;
 }
-declare class JavascriptParser extends Parser {
+declare class JavascriptParser extends ParserClass {
 	constructor(sourceType?: "module" | "auto" | "script");
 	hooks: Readonly<{
 		evaluateTypeof: HookMap<
@@ -7759,6 +7771,9 @@ declare class JavascriptParser extends Parser {
 				rootInfo: ExportedVariableInfo;
 				getMembers: () => string[];
 		  };
+	static extend(
+		...plugins: ((BaseParser: typeof ParserImport) => typeof ParserImport)[]
+	): typeof JavascriptParser;
 	static ALLOWED_MEMBER_TYPES_ALL: 3;
 	static ALLOWED_MEMBER_TYPES_CALL_EXPRESSION: 1;
 	static ALLOWED_MEMBER_TYPES_EXPRESSION: 2;
@@ -8145,7 +8160,7 @@ declare interface KnownAssetInfo {
 	/**
 	 * object of pointers to other assets, keyed by type of relation (only points from parent to child)
 	 */
-	related?: Record<string, string | string[]>;
+	related?: Record<string, null | string | string[]>;
 }
 declare interface KnownBuildInfo {
 	cacheable?: boolean;
@@ -9874,6 +9889,7 @@ declare class ModuleGraph {
 		module: Module,
 		indexInBlock?: number
 	): void;
+	setParentDependenciesBlockIndex(dependency: Dependency, index: number): void;
 	getParentModule(dependency: Dependency): undefined | Module;
 	getParentBlock(dependency: Dependency): undefined | DependenciesBlock;
 	getParentBlockIndex(dependency: Dependency): number;
@@ -9883,6 +9899,11 @@ declare class ModuleGraph {
 		module: Module
 	): void;
 	updateModule(dependency: Dependency, module: Module): void;
+	updateParent(
+		dependency: Dependency,
+		connection?: ModuleGraphConnection,
+		parentModule?: Module
+	): void;
 	removeConnection(dependency: Dependency): void;
 	addExplanation(dependency: Dependency, explanation: string): void;
 	cloneModuleAttributes(sourceModule: Module, targetModule: Module): void;
@@ -10549,7 +10570,7 @@ declare class NormalModule extends Module {
 	userRequest: string;
 	rawRequest: string;
 	binary: boolean;
-	parser?: Parser;
+	parser?: ParserClass;
 	parserOptions?: ParserOptions;
 	generator?: Generator;
 	generatorOptions?: GeneratorOptions;
@@ -10680,7 +10701,7 @@ declare interface NormalModuleCreateData {
 	/**
 	 * the parser used
 	 */
-	parser: Parser;
+	parser: ParserClass;
 
 	/**
 	 * the options of the parser used
@@ -10728,7 +10749,7 @@ declare abstract class NormalModuleFactory extends ModuleFactory {
 				ResolveData
 			]
 		>;
-		createParser: HookMap<SyncBailHook<[ParserOptions], void | Parser>>;
+		createParser: HookMap<SyncBailHook<[ParserOptions], void | ParserClass>>;
 		parser: HookMap<SyncBailHook<[any, ParserOptions], void>>;
 		createGenerator: HookMap<
 			SyncBailHook<[GeneratorOptions], void | Generator>
@@ -10748,7 +10769,7 @@ declare abstract class NormalModuleFactory extends ModuleFactory {
 	ruleSet: RuleSet;
 	context: string;
 	fs: InputFileSystem;
-	parserCache: Map<string, WeakMap<ParserOptions, Parser>>;
+	parserCache: Map<string, WeakMap<ParserOptions, ParserClass>>;
 	generatorCache: Map<string, WeakMap<GeneratorOptions, Generator>>;
 	cleanupForCache(): void;
 	resolveResource(
@@ -10771,8 +10792,8 @@ declare abstract class NormalModuleFactory extends ModuleFactory {
 		resolveContext: ResolveContext,
 		callback: CallbackNormalModuleFactory<LoaderItem[]>
 	): void;
-	getParser(type: string, parserOptions?: ParserOptions): Parser;
-	createParser(type: string, parserOptions?: ParserOptions): Parser;
+	getParser(type: string, parserOptions?: ParserOptions): ParserClass;
+	createParser(type: string, parserOptions?: ParserOptions): ParserClass;
 	getGenerator(type: string, generatorOptions?: GeneratorOptions): Generator;
 	createGenerator(type: string, generatorOptions?: GeneratorOptions): Generator;
 	getResolver(
@@ -12238,7 +12259,7 @@ declare interface ParsedIdentifier {
 	 */
 	internal: boolean;
 }
-declare class Parser {
+declare class ParserClass {
 	constructor();
 	parse(
 		source: string | Buffer | PreparsedAst,
@@ -17791,6 +17812,10 @@ declare namespace exports {
 				...cRest: Comparator<T>[]
 			) => Comparator<T>;
 			export let keepOriginalOrder: <T>(iterable: Iterable<T>) => Comparator<T>;
+			export let sortWithSourceOrder: (
+				dependencies: Dependency[],
+				dependencySourceOrderMap: WeakMap<Dependency, DependencySourceOrder>
+			) => void;
 		}
 		export namespace runtime {
 			export let compareRuntime: (a: RuntimeSpec, b: RuntimeSpec) => 0 | 1 | -1;
@@ -18025,7 +18050,7 @@ declare namespace exports {
 		NormalModule,
 		NormalModuleReplacementPlugin,
 		MultiCompiler,
-		Parser,
+		ParserClass as Parser,
 		PlatformPlugin,
 		PrefetchPlugin,
 		ProgressPlugin,