webpack 5.108.4 → 5.109.1

package/lib/NormalModuleFactory.js

@@ -5,7 +5,6 @@
 
 "use strict";
 
-const { getContext } = require("loader-runner");
 const asyncLib = require("neo-async");
 const {
 	AsyncSeriesBailHook,
@@ -21,6 +20,7 @@ const ModuleGraph = require("./ModuleGraph");
 const { JAVASCRIPT_MODULE_TYPE_AUTO } = require("./ModuleTypeConstants");
 const NormalModule = require("./NormalModule");
 const { ImportPhaseUtils } = require("./dependencies/ImportPhase");
+const { getContext } = require("./loaders/LoaderRunner");
 const BasicEffectRulePlugin = require("./rules/BasicEffectRulePlugin");
 const BasicMatcherRulePlugin = require("./rules/BasicMatcherRulePlugin");
 const ObjectMatcherRulePlugin = require("./rules/ObjectMatcherRulePlugin");
@@ -118,6 +118,19 @@ const {
  * @property {string | undefined} options options
  */
 
+/**
+ * Dependencies captured while resolving a loader.
+ * @typedef {object} ResolveDependencies
+ * @property {LazySet<string>} fileDependencies file dependencies of the resolve
+ * @property {LazySet<string>} contextDependencies context dependencies of the resolve
+ * @property {LazySet<string>} missingDependencies missing dependencies of the resolve
+ */
+
+/**
+ * Memoized result of resolving a loader for a given (context, request).
+ * @typedef {ResolveDependencies & { loader: string, query: string | undefined, type: string | undefined }} LoaderResolveCacheEntry
+ */
+
 /** @typedef {import("./ModuleTypeConstants").JAVASCRIPT_MODULE_TYPE_AUTO} JAVASCRIPT_MODULE_TYPE_AUTO */
 /** @typedef {import("./ModuleTypeConstants").JAVASCRIPT_MODULE_TYPE_DYNAMIC} JAVASCRIPT_MODULE_TYPE_DYNAMIC */
 /** @typedef {import("./ModuleTypeConstants").JAVASCRIPT_MODULE_TYPE_ESM} JAVASCRIPT_MODULE_TYPE_ESM */
@@ -149,6 +162,25 @@ const EMPTY_ELEMENTS = [];
 const MATCH_RESOURCE_REGEX = /^([^!]+)!=!/;
 const LEADING_DOT_EXTENSION_REGEX = /^[^.]/;
 
+/**
+ * Replays the file/context/missing dependencies captured by a loader resolve
+ * into a resolve context, so memoized loaders still record everything needed
+ * for watch invalidation.
+ * @param {ResolveContext} resolveContext resolve context to add dependencies to
+ * @param {ResolveDependencies} source captured resolve dependencies
+ * @returns {void}
+ */
+const replayResolveDependencies = (resolveContext, source) => {
+	// On this path resolveContext always carries the three LazySet dependency
+	// sets built in the `resolve` hook, so they are safe to treat as LazySet.
+	/** @type {LazySet<string>} */
+	(resolveContext.fileDependencies).addAll(source.fileDependencies);
+	/** @type {LazySet<string>} */
+	(resolveContext.contextDependencies).addAll(source.contextDependencies);
+	/** @type {LazySet<string>} */
+	(resolveContext.missingDependencies).addAll(source.missingDependencies);
+};
+
 /**
  * Returns ident.
  * @param {LoaderItem} data data
@@ -457,6 +489,8 @@ class NormalModuleFactory extends ModuleFactory {
 		this.generatorCache = new Map();
 		/** @type {Set<Module>} */
 		this._restoredUnsafeCacheEntries = new Set();
+		/** @type {Map<string, LoaderResolveCacheEntry>} */
+		this._loaderResolveCache = new Map();
 
 		/** @type {(resource: string) => import("./util/identifier").ParsedResource} */
 		const cacheParseResource = parseResource.bindCache(
@@ -1336,14 +1370,44 @@ If changing the source code is not an option there is also a resolve options cal
 			 * Handles the callback logic for this hook.
 			 * @param {LoaderItem} item item
 			 * @param {Callback<LoaderItem>} callback callback
+			 * @returns {void}
 			 */
 			(item, callback) => {
+				// Loaders resolve identically for a given (context, request), so memoize
+				// the result and the resolve's dependencies to skip repeated resolves.
+				const cacheKey = `${context}\n${item.loader}`;
+				const cached = this._loaderResolveCache.get(cacheKey);
+				if (cached !== undefined) {
+					replayResolveDependencies(resolveContext, cached);
+					return callback(null, {
+						loader: cached.loader,
+						type: cached.type,
+						options:
+							item.options === undefined
+								? cached.query
+									? cached.query.slice(1)
+									: undefined
+								: item.options,
+						ident: item.options === undefined ? undefined : item.ident
+					});
+				}
+				// Capture this resolve's dependencies in dedicated sets so a future hit
+				// can replay them; also feed them back into the caller's resolveContext.
+				const captureContext = {
+					...resolveContext,
+					fileDependencies: new LazySet(),
+					contextDependencies: new LazySet(),
+					missingDependencies: new LazySet()
+				};
 				resolver.resolve(
 					contextInfo,
 					context,
 					item.loader,
-					resolveContext,
+					captureContext,
 					(err, result, resolveRequest) => {
+						// Merge the captured dependencies back so a failed or successful
+						// resolve records them for watch invalidation just like before.
+						replayResolveDependencies(resolveContext, captureContext);
 						if (
 							err &&
 							/^[^/]*$/.test(item.loader) &&
@@ -1385,6 +1449,16 @@ If changing the source code is not an option there is also a resolve options cal
 											/** @type {ResolveRequest} */
 											(resolveRequest).descriptionFileData.type
 										);
+
+						this._loaderResolveCache.set(cacheKey, {
+							loader: parsedResult.path,
+							query: parsedResult.query,
+							type,
+							fileDependencies: captureContext.fileDependencies,
+							contextDependencies: captureContext.contextDependencies,
+							missingDependencies: captureContext.missingDependencies
+						});
+
 						/** @type {LoaderItem} */
 						const resolved = {
 							loader: parsedResult.path,

package/lib/ProgressPlugin.js

@@ -29,27 +29,12 @@ const BULLET_ICON = "●";
  */
 /** @typedef {import("../declarations/plugins/ProgressPlugin").ProgressPluginArgument} ProgressPluginArgument */
 /** @typedef {import("../declarations/plugins/ProgressPlugin").ProgressPluginOptions} ProgressPluginOptions */
-/** @typedef {import("./Compilation").FactorizeModuleOptions} FactorizeModuleOptions */
 /** @typedef {import("./Dependency")} Dependency */
 /** @typedef {import("./Entrypoint").EntryOptions} EntryOptions */
 /** @typedef {import("./Module")} Module */
-/** @typedef {import("./ModuleFactory").ModuleFactoryResult} ModuleFactoryResult */
 /** @typedef {import("./logging/Logger").Logger} Logger */
 /** @typedef {import("./cli").Colors} Colors */
 
-/**
- * Defines the async queue type used by this module.
- * @template T, K, R
- * @typedef {import("./util/AsyncQueue")<T, K, R>} AsyncQueue
- */
-
-/**
- * Defines the counts data type used by this module.
- * @typedef {object} CountsData
- * @property {number} modulesCount modules count
- * @property {number} dependenciesCount dependencies count
- */
-
 /**
  * Returns median.
  * @param {number} a a
@@ -125,37 +110,110 @@ const reportProfile = (logger, lastStateInfo, percentage, msg, args) => {
 	}
 };
 
+/**
+ * @param {number} ms milliseconds
+ * @returns {string} human readable duration
+ */
+const formatTime = (ms) => {
+	if (ms < 1000) return `${Math.round(ms)}ms`;
+	const seconds = Math.floor(ms / 1000);
+	if (seconds < 60) return `${seconds}s`;
+	const minutes = Math.floor(seconds / 60);
+	if (minutes < 60) return `${minutes}m ${seconds % 60}s`;
+	const hours = Math.floor(minutes / 60);
+	return `${hours}h ${minutes % 60}m`;
+};
+
 /**
  * @param {string} name progress bar name
  * @param {string} color progress bar color
+ * @param {number} width progress bar width in characters
  * @returns {(percentage: number) => string} bar renderer
  */
-const createReportBar = (name, color) => {
+const createReportBar = (name, color, width) => {
 	const c = getColors();
+	const colorFn = color in c ? c[/** @type {keyof Colors} */ (color)] : c.green;
+	// The bar only changes when the filled width does, so cache it between steps.
+	let lastFilled = -1;
+	let lastBar = "";
 
 	return (percentage) => {
-		const w = Math.round(percentage * BAR_LENGTH);
-		const filled = BLOCK_CHAR.repeat(w);
-		const empty = BLOCK_CHAR.repeat(BAR_LENGTH - w);
-		const colorFn =
-			color in c ? c[/** @type {keyof Colors} */ (color)] : c.green;
-
-		return `${[BULLET_ICON, name, filled].map(colorFn).join(" ")}${c.white(empty)}`;
+		const filled = Math.round(percentage * width);
+		if (filled === lastFilled) return lastBar;
+		lastFilled = filled;
+		const filledStr = BLOCK_CHAR.repeat(filled);
+		const emptyStr = BLOCK_CHAR.repeat(width - filled);
+		lastBar = `${[BULLET_ICON, name, filledStr].map(colorFn).join(" ")}${c.white(
+			emptyStr
+		)}`;
+		return lastBar;
 	};
 };
 
-/** @typedef {Required<Exclude<NonNullable<ProgressPluginOptions["progressBar"]>, boolean>>} ProgressBarOptions */
+/** @typedef {Required<Exclude<NonNullable<ProgressPluginOptions["progressBar"]>, boolean | "auto">>} ProgressBarOptions */
+
+/** @type {ProgressBarOptions} */
+const DEFAULT_PROGRESS_BAR = {
+	name: "Build",
+	color: "green",
+	width: BAR_LENGTH
+};
+
+/** @typedef {{ progressBar?: ProgressBarOptions | false, estimatedTime?: boolean, phaseTimings?: boolean }} DefaultHandlerOptions */
 
 /**
  * Creates a default handler.
  * @param {boolean | null | undefined} profile need profile
  * @param {Logger} logger logger
- * @param {ProgressBarOptions | false=} progressBar render bar
+ * @param {DefaultHandlerOptions=} options display options
  * @returns {HandlerFn} default handler
  */
-const createDefaultHandler = (profile, logger, progressBar) => {
+const createDefaultHandler = (profile, logger, options = {}) => {
+	const {
+		progressBar = false,
+		estimatedTime = false,
+		phaseTimings = false
+	} = options;
+	const trackTime = estimatedTime || phaseTimings;
+
 	/** @type {{ value: string | undefined, time: number }[]} */
 	const lastStateInfo = [];
+	let buildStart = 0;
+	// Exponential moving average of the estimated total build time (0 = unset).
+	let smoothedTotal = 0;
+	/** @type {Map<string, number>} accumulated ms per phase (msg) */
+	const phaseTimes = new Map();
+	/** @type {string | undefined} */
+	let currentPhase;
+	let currentPhaseStart = 0;
+	let summaryReported = false;
+	/** @type {((percentage: number) => string) | undefined} */
+	let reportBar;
+
+	/**
+	 * @param {number} now current timestamp
+	 * @returns {void}
+	 */
+	const reportPhaseSummary = (now) => {
+		if (!phaseTimings || summaryReported || phaseTimes.size === 0) return;
+		summaryReported = true;
+		// Flush the phase still running at completion.
+		if (currentPhase !== undefined) {
+			phaseTimes.set(
+				currentPhase,
+				(phaseTimes.get(currentPhase) || 0) + (now - currentPhaseStart)
+			);
+		}
+		const total = now - buildStart;
+		logger.info(`Build completed in ${formatTime(total)}`);
+		logger.info("Phase breakdown:");
+		for (const [phase, duration] of phaseTimes) {
+			if (duration > 0) {
+				const percent = total > 0 ? Math.round((duration / total) * 100) : 0;
+				logger.info(`  ${phase}: ${formatTime(duration)} (${percent}%)`);
+			}
+		}
+	};
 
 	/** @type {HandlerFn} */
 	const defaultHandler = (percentage, msg, ...args) => {
@@ -163,34 +221,84 @@ const createDefaultHandler = (profile, logger, progressBar) => {
 			reportProfile(logger, lastStateInfo, percentage, msg, args);
 		}
 
+		const now = trackTime ? Date.now() : 0;
+
+		if (trackTime && percentage === 0) {
+			buildStart = now;
+			smoothedTotal = 0;
+			summaryReported = false;
+			phaseTimes.clear();
+			currentPhase = undefined;
+			currentPhaseStart = now;
+		}
+
+		// Accumulate time under the previous phase whenever the top-level message changes.
+		if (phaseTimings && msg && msg !== currentPhase) {
+			if (currentPhase !== undefined) {
+				phaseTimes.set(
+					currentPhase,
+					(phaseTimes.get(currentPhase) || 0) + (now - currentPhaseStart)
+				);
+			}
+			currentPhase = msg;
+			currentPhaseStart = now;
+		}
+
+		/** @type {string | undefined} */
+		let eta;
+		if (estimatedTime && percentage > 0.05 && percentage < 1) {
+			const elapsed = now - buildStart;
+			const rawTotal = elapsed / percentage;
+			smoothedTotal =
+				smoothedTotal > 0 ? smoothedTotal * 0.7 + rawTotal * 0.3 : rawTotal;
+			const remaining = smoothedTotal - elapsed;
+			if (remaining > 0) eta = `ETA: ${formatTime(remaining)}`;
+		}
+
 		if (progressBar) {
-			const reportBar = createReportBar(progressBar.name, progressBar.color);
+			// Build the bar renderer once, then reuse it across every step.
+			if (reportBar === undefined) {
+				reportBar = createReportBar(
+					progressBar.name,
+					progressBar.color,
+					progressBar.width
+				);
+			}
 			const c = getColors();
 			/** @type {string} */
 			const currentBar = reportBar(percentage);
+			const suffix = eta ? ` ${eta}` : "";
 
 			if (percentage === 1) {
 				logger.status();
+				reportPhaseSummary(now);
 			} else if (msg) {
 				logger.status(
-					`${currentBar} (${Math.floor(percentage * 100)}%)`,
+					`${currentBar} (${Math.floor(percentage * 100)}%)${suffix}`,
 					`\n${[msg, ...args].map(c.gray).join(" ")}`
 				);
 			} else {
-				logger.status(`${currentBar} (${Math.floor(percentage * 100)}%)`);
+				logger.status(
+					`${currentBar} (${Math.floor(percentage * 100)}%)${suffix}`
+				);
 			}
 			return;
 		}
 
-		logger.status(`${Math.floor(percentage * 100)}%`, msg, ...args);
-		if (percentage === 1 || (!msg && args.length === 0)) logger.status();
+		if (eta) {
+			logger.status(`${Math.floor(percentage * 100)}%`, msg, ...args, eta);
+		} else {
+			logger.status(`${Math.floor(percentage * 100)}%`, msg, ...args);
+		}
+		if (percentage === 1 || (!msg && args.length === 0)) {
+			if (percentage === 1) reportPhaseSummary(now);
+			logger.status();
+		}
 	};
 
 	return defaultHandler;
 };
 
-const SKIPPED_QUEUE_CONTEXTS = ["import-module", "load-module"];
-
 /**
  * Defines the report progress callback.
  * @callback ReportProgress
@@ -214,7 +322,34 @@ const DEFAULT_OPTIONS = {
 	activeModules: false,
 	entries: true,
 	percentBy: null,
-	progressBar: false
+	progressBar: false,
+	estimatedTime: false,
+	phaseTimings: false
+};
+
+/**
+ * Whether progress can be rendered in place (interactive TTY). The bar is only
+ * useful here; in append-only output every update becomes a new line.
+ * @param {Compiler | MultiCompiler} compiler compiler
+ * @returns {boolean} true when output is an interactive terminal
+ */
+const isInteractive = (compiler) => {
+	const c =
+		compiler instanceof MultiCompiler ? compiler.compilers[0] : compiler;
+	const infrastructureLogging =
+		c && c.options && c.options.infrastructureLogging;
+	if (
+		infrastructureLogging &&
+		typeof infrastructureLogging.appendOnly === "boolean"
+	) {
+		return !infrastructureLogging.appendOnly;
+	}
+	const stream =
+		(infrastructureLogging && infrastructureLogging.stream) || process.stderr;
+	return (
+		Boolean(/** @type {NodeJS.WriteStream} */ (stream).isTTY) &&
+		process.env.TERM !== "dumb"
+	);
 };
 
 class ProgressPlugin {
@@ -260,11 +395,21 @@ class ProgressPlugin {
 		this.showActiveModules = merged.activeModules;
 		this.percentBy = merged.percentBy;
 
-		const progressBar = merged.progressBar === true ? {} : merged.progressBar;
-		/** @type {ProgressBarOptions | false} */
-		this.progressBar = progressBar
-			? { name: "Build", color: "green", ...progressBar }
-			: false;
+		const progressBar = merged.progressBar;
+		/** @type {ProgressBarOptions | false | "auto"} */
+		this.progressBar =
+			progressBar === "auto"
+				? "auto"
+				: progressBar
+					? {
+							...DEFAULT_PROGRESS_BAR,
+							...(progressBar === true ? {} : progressBar)
+						}
+					: false;
+		/** @type {boolean} */
+		this.estimatedTime = merged.estimatedTime;
+		/** @type {boolean} */
+		this.phaseTimings = merged.phaseTimings;
 	}
 
 	/**
@@ -273,12 +418,31 @@ class ProgressPlugin {
 	 * @returns {void}
 	 */
 	apply(compiler) {
+		let progressBar = this.progressBar;
+		// webpack@6 (opt-in today via `experiments.futureDefaults`) turns an unset
+		// progressBar into the auto bar; an explicit `false` is still respected.
+		if (progressBar === false && this.options.progressBar === undefined) {
+			const c =
+				compiler instanceof MultiCompiler ? compiler.compilers[0] : compiler;
+			if (c && c.options && c.options.experiments.futureDefaults) {
+				progressBar = "auto";
+			}
+		}
+		if (progressBar === "auto") {
+			progressBar = isInteractive(compiler)
+				? { ...DEFAULT_PROGRESS_BAR }
+				: false;
+		}
 		const handler =
 			this.handler ||
 			createDefaultHandler(
 				this.profile,
 				compiler.getInfrastructureLogger("webpack.Progress"),
-				this.progressBar
+				{
+					progressBar,
+					estimatedTime: this.estimatedTime,
+					phaseTimings: this.phaseTimings
+				}
 			);
 		if (compiler instanceof MultiCompiler) {
 			this._applyOnMultiCompiler(compiler, handler);
@@ -336,9 +500,7 @@ class ProgressPlugin {
 		let lastDependenciesCount = 0;
 		let lastEntriesCount = 0;
 		let modulesCount = 0;
-		let skippedModulesCount = 0;
 		let dependenciesCount = 0;
-		let skippedDependenciesCount = 0;
 		let entriesCount = 1;
 		let doneModules = 0;
 		let doneDependencies = 0;
@@ -422,16 +584,7 @@ class ProgressPlugin {
 			lastUpdate = Date.now();
 		};
 
-		/**
-		 * Processes the provided factorize queue.
-		 * @template T
-		 * @param {AsyncQueue<FactorizeModuleOptions, string, Module | ModuleFactoryResult>} factorizeQueue async queue
-		 * @param {T} _item item
-		 */
-		const factorizeAdd = (factorizeQueue, _item) => {
-			if (SKIPPED_QUEUE_CONTEXTS.includes(factorizeQueue.getContext())) {
-				skippedDependenciesCount++;
-			}
+		const factorizeAdd = () => {
 			dependenciesCount++;
 			if (dependenciesCount < 50 || dependenciesCount % 100 === 0) {
 				updateThrottled();
@@ -445,16 +598,7 @@ class ProgressPlugin {
 			}
 		};
 
-		/**
-		 * Processes the provided add module queue.
-		 * @template T
-		 * @param {AsyncQueue<Module, string, Module>} addModuleQueue async queue
-		 * @param {T} _item item
-		 */
-		const moduleAdd = (addModuleQueue, _item) => {
-			if (SKIPPED_QUEUE_CONTEXTS.includes(addModuleQueue.getContext())) {
-				skippedModulesCount++;
-			}
+		const moduleAdd = () => {
 			modulesCount++;
 			if (modulesCount < 50 || modulesCount % 100 === 0) updateThrottled();
 		};
@@ -516,72 +660,20 @@ class ProgressPlugin {
 			update();
 		};
 
-		const cache = compiler.getCache(PLUGIN_NAME).getItemCache("counts", null);
-
-		/** @type {Promise<CountsData> | undefined} */
-		let cacheGetPromise;
-
-		compiler.hooks.beforeCompile.tap(PLUGIN_NAME, () => {
-			if (!cacheGetPromise) {
-				cacheGetPromise = cache.getPromise().then(
-					(data) => {
-						if (data) {
-							lastModulesCount = lastModulesCount || data.modulesCount;
-							lastDependenciesCount =
-								lastDependenciesCount || data.dependenciesCount;
-						}
-						return data;
-					},
-					(_err) => {
-						// Ignore error
-					}
-				);
-			}
-		});
-
-		compiler.hooks.afterCompile.tapPromise(PLUGIN_NAME, (compilation) => {
-			if (compilation.compiler.isChild()) return Promise.resolve();
-			return /** @type {Promise<CountsData>} */ (cacheGetPromise).then(
-				async (oldData) => {
-					const realModulesCount = modulesCount - skippedModulesCount;
-					const realDependenciesCount =
-						dependenciesCount - skippedDependenciesCount;
-
-					if (
-						!oldData ||
-						oldData.modulesCount !== realModulesCount ||
-						oldData.dependenciesCount !== realDependenciesCount
-					) {
-						await cache.storePromise({
-							modulesCount: realModulesCount,
-							dependenciesCount: realDependenciesCount
-						});
-					}
-				}
-			);
-		});
-
 		compiler.hooks.compilation.tap(PLUGIN_NAME, (compilation) => {
 			if (compilation.compiler.isChild()) return;
+			// Carry the previous compilation's counts into the next as an estimate
+			// (helps watch rebuilds); not persisted, to avoid cache invalidation.
 			lastModulesCount = modulesCount;
 			lastEntriesCount = entriesCount;
 			lastDependenciesCount = dependenciesCount;
-			modulesCount =
-				skippedModulesCount =
-				dependenciesCount =
-				skippedDependenciesCount =
-				entriesCount =
-					0;
+			modulesCount = dependenciesCount = entriesCount = 0;
 			doneModules = doneDependencies = doneEntries = 0;
 
-			compilation.factorizeQueue.hooks.added.tap(PLUGIN_NAME, (item) =>
-				factorizeAdd(compilation.factorizeQueue, item)
-			);
+			compilation.factorizeQueue.hooks.added.tap(PLUGIN_NAME, factorizeAdd);
 			compilation.factorizeQueue.hooks.result.tap(PLUGIN_NAME, factorizeDone);
 
-			compilation.addModuleQueue.hooks.added.tap(PLUGIN_NAME, (item) =>
-				moduleAdd(compilation.addModuleQueue, item)
-			);
+			compilation.addModuleQueue.hooks.added.tap(PLUGIN_NAME, moduleAdd);
 			compilation.processDependenciesQueue.hooks.result.tap(
 				PLUGIN_NAME,
 				moduleDone

package/lib/ProvidePlugin.js

@@ -85,7 +85,7 @@ class ProvidePlugin {
 								request.slice(1),
 								/** @type {Range} */ (expr.range)
 							);
-							dep.loc = /** @type {DependencyLocation} */ (expr.loc);
+							dep.loc = parser.getLocation(expr);
 							parser.state.module.addDependency(dep);
 							return true;
 						});
@@ -100,7 +100,7 @@ class ProvidePlugin {
 								request.slice(1),
 								/** @type {Range} */ (expr.callee.range)
 							);
-							dep.loc = /** @type {DependencyLocation} */ (expr.callee.loc);
+							dep.loc = parser.getLocation(expr.callee);
 							parser.state.module.addDependency(dep);
 							parser.walkExpressions(expr.arguments);
 							return true;