webpack 5.106.2 → 5.107.0

package/lib/ProgressPlugin.js

@@ -9,6 +9,17 @@ const Compiler = require("./Compiler");
 const MultiCompiler = require("./MultiCompiler");
 const NormalModule = require("./NormalModule");
 const { contextify } = require("./util/identifier");
+const memoize = require("./util/memoize");
+
+const getColors = memoize(() => {
+	const cli = require("./cli");
+
+	return cli.createColors({ useColor: cli.isColorSupported() });
+});
+
+const BAR_LENGTH = 25;
+const BLOCK_CHAR = "━";
+const BULLET_ICON = "●";
 
 /** @typedef {import("tapable").Tap} Tap */
 /**
@@ -24,6 +35,7 @@ const { contextify } = require("./util/identifier");
 /** @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.
@@ -49,74 +61,127 @@ const median3 = (a, b, c) => a + b + c - Math.max(a, b, c) - Math.min(a, b, c);
 
 /** @typedef {(percentage: number, msg: string, ...args: string[]) => void} HandlerFn */
 
+/**
+ * @param {Logger} logger logger
+ * @param {{ value: string | undefined, time: number }[]} lastStateInfo mutable state
+ * @param {number} percentage percentage
+ * @param {string} msg msg
+ * @param {string[]} args args
+ */
+const reportProfile = (logger, lastStateInfo, percentage, msg, args) => {
+	if (percentage === 0) {
+		lastStateInfo.length = 0;
+	}
+	const fullState = [msg, ...args];
+	const state = fullState.map((s) => s.replace(/\d+\/\d+ /g, ""));
+	const now = Date.now();
+	const len = Math.max(state.length, lastStateInfo.length);
+	for (let i = len; i >= 0; i--) {
+		const stateItem = i < state.length ? state[i] : undefined;
+		const lastStateItem =
+			i < lastStateInfo.length ? lastStateInfo[i] : undefined;
+		if (lastStateItem) {
+			if (stateItem !== lastStateItem.value) {
+				const diff = now - lastStateItem.time;
+				if (lastStateItem.value) {
+					let reportState = lastStateItem.value;
+					if (i > 0) {
+						reportState = `${lastStateInfo[i - 1].value} > ${reportState}`;
+					}
+					const stateMsg = `${" | ".repeat(i)}${diff} ms ${reportState}`;
+					const d = diff;
+					// This depends on timing so we ignore it for coverage
+					/* eslint-disable no-lone-blocks */
+					/* istanbul ignore next */
+					{
+						if (d > 10000) {
+							logger.error(stateMsg);
+						} else if (d > 1000) {
+							logger.warn(stateMsg);
+						} else if (d > 10) {
+							logger.info(stateMsg);
+						} else if (d > 5) {
+							logger.log(stateMsg);
+						} else {
+							logger.debug(stateMsg);
+						}
+					}
+					/* eslint-enable no-lone-blocks */
+				}
+				if (stateItem === undefined) {
+					lastStateInfo.length = i;
+				} else {
+					lastStateItem.value = stateItem;
+					lastStateItem.time = now;
+					lastStateInfo.length = i + 1;
+				}
+			}
+		} else {
+			lastStateInfo[i] = {
+				value: stateItem,
+				time: now
+			};
+		}
+	}
+};
+
+/**
+ * @param {string} name progress bar name
+ * @param {string} color progress bar color
+ * @returns {(percentage: number) => string} bar renderer
+ */
+const createReportBar = (name, color) => {
+	const c = getColors();
+
+	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)}`;
+	};
+};
+
+/** @typedef {Required<Exclude<NonNullable<ProgressPluginOptions["progressBar"]>, boolean>>} ProgressBarOptions */
+
 /**
  * Creates a default handler.
  * @param {boolean | null | undefined} profile need profile
  * @param {Logger} logger logger
+ * @param {ProgressBarOptions | false} progressBar render bar
  * @returns {HandlerFn} default handler
  */
-const createDefaultHandler = (profile, logger) => {
+const createDefaultHandler = (profile, logger, progressBar) => {
 	/** @type {{ value: string | undefined, time: number }[]} */
 	const lastStateInfo = [];
 
 	/** @type {HandlerFn} */
 	const defaultHandler = (percentage, msg, ...args) => {
 		if (profile) {
-			if (percentage === 0) {
-				lastStateInfo.length = 0;
-			}
-			const fullState = [msg, ...args];
-			const state = fullState.map((s) => s.replace(/\d+\/\d+ /g, ""));
-			const now = Date.now();
-			const len = Math.max(state.length, lastStateInfo.length);
-			for (let i = len; i >= 0; i--) {
-				const stateItem = i < state.length ? state[i] : undefined;
-				const lastStateItem =
-					i < lastStateInfo.length ? lastStateInfo[i] : undefined;
-				if (lastStateItem) {
-					if (stateItem !== lastStateItem.value) {
-						const diff = now - lastStateItem.time;
-						if (lastStateItem.value) {
-							let reportState = lastStateItem.value;
-							if (i > 0) {
-								reportState = `${lastStateInfo[i - 1].value} > ${reportState}`;
-							}
-							const stateMsg = `${" | ".repeat(i)}${diff} ms ${reportState}`;
-							const d = diff;
-							// This depends on timing so we ignore it for coverage
-							/* eslint-disable no-lone-blocks */
-							/* istanbul ignore next */
-							{
-								if (d > 10000) {
-									logger.error(stateMsg);
-								} else if (d > 1000) {
-									logger.warn(stateMsg);
-								} else if (d > 10) {
-									logger.info(stateMsg);
-								} else if (d > 5) {
-									logger.log(stateMsg);
-								} else {
-									logger.debug(stateMsg);
-								}
-							}
-							/* eslint-enable no-lone-blocks */
-						}
-						if (stateItem === undefined) {
-							lastStateInfo.length = i;
-						} else {
-							lastStateItem.value = stateItem;
-							lastStateItem.time = now;
-							lastStateInfo.length = i + 1;
-						}
-					}
-				} else {
-					lastStateInfo[i] = {
-						value: stateItem,
-						time: now
-					};
-				}
+			reportProfile(logger, lastStateInfo, percentage, msg, args);
+		}
+
+		if (progressBar) {
+			const reportBar = createReportBar(progressBar.name, progressBar.color);
+			const c = getColors();
+			/** @type {string} */
+			const currentBar = reportBar(percentage);
+
+			if (percentage === 1) {
+				logger.status();
+			} else if (msg) {
+				logger.status(
+					`${currentBar} (${Math.floor(percentage * 100)}%)`,
+					`\n${[msg, ...args].map(c.gray).join(" ")}`
+				);
+			} else {
+				logger.status(`${currentBar} (${Math.floor(percentage * 100)}%)`);
 			}
+			return;
 		}
+
 		logger.status(`${Math.floor(percentage * 100)}%`, msg, ...args);
 		if (percentage === 1 || (!msg && args.length === 0)) logger.status();
 	};
@@ -148,7 +213,8 @@ const DEFAULT_OPTIONS = {
 	dependencies: true,
 	activeModules: false,
 	entries: true,
-	percentBy: null
+	percentBy: null,
+	progressBar: false
 };
 
 class ProgressPlugin {
@@ -185,6 +251,12 @@ class ProgressPlugin {
 		this.showDependencies = merged.dependencies;
 		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;
 	}
 
 	/**
@@ -197,7 +269,8 @@ class ProgressPlugin {
 			this.handler ||
 			createDefaultHandler(
 				this.profile,
-				compiler.getInfrastructureLogger("webpack.Progress")
+				compiler.getInfrastructureLogger("webpack.Progress"),
+				this.progressBar
 			);
 		if (compiler instanceof MultiCompiler) {
 			this._applyOnMultiCompiler(compiler, handler);

package/lib/RuntimeGlobals.js

@@ -83,12 +83,7 @@ module.exports.createScript = "__webpack_require__.ts";
  */
 module.exports.createScriptUrl = "__webpack_require__.tu";
 
-/**
- * merge multiple CSS stylesheets (CSSStyleSheet or string) into one CSS text string
- * Arguments: (sheets: Array<CSSStyleSheet | string> | CSSStyleSheet | string) => string
- */
 module.exports.cssInjectStyle = "__webpack_require__.is";
-module.exports.cssMergeStyleSheets = "__webpack_require__.mcs";
 
 /**
  * The current scope when getting a module from a remote
@@ -391,6 +386,11 @@ module.exports.runtimeId = "__webpack_require__.j";
  */
 module.exports.scriptNonce = "__webpack_require__.nc";
 
+/**
+ * set .name to "default" for anonymous default exports per ES spec
+ */
+module.exports.setAnonymousDefaultName = "__webpack_require__.dn";
+
 /**
  * an object with all share scopes
  */

package/lib/RuntimeModule.js

@@ -129,12 +129,14 @@ class RuntimeModule extends Module {
 		hash.update(this.name);
 		hash.update(`${this.stage}`);
 		try {
-			if (this.fullHash || this.dependentHash) {
-				// Do not use getGeneratedCode here, because i. e. compilation hash might be not
-				// ready at this point. We will cache it later instead.
-				hash.update(/** @type {string} */ (this.generate()));
-			} else {
-				hash.update(/** @type {string} */ (this.getGeneratedCode()));
+			const code =
+				this.fullHash || this.dependentHash
+					? // Do not use getGeneratedCode here, because i. e. compilation hash might be not
+						// ready at this point. We will cache it later instead.
+						this.generate()
+					: this.getGeneratedCode();
+			if (code !== null && code !== undefined) {
+				hash.update(code);
 			}
 		} catch (err) {
 			hash.update(/** @type {Error} */ (err).message);
@@ -207,7 +209,7 @@ class RuntimeModule extends Module {
 	 * @returns {string | null} runtime code
 	 */
 	generate() {
-		const AbstractMethodError = require("./AbstractMethodError");
+		const AbstractMethodError = require("./errors/AbstractMethodError");
 
 		throw new AbstractMethodError();
 	}

package/lib/RuntimePlugin.js

@@ -34,6 +34,7 @@ const OnChunksLoadedRuntimeModule = require("./runtime/OnChunksLoadedRuntimeModu
 const PublicPathRuntimeModule = require("./runtime/PublicPathRuntimeModule");
 const RelativeUrlRuntimeModule = require("./runtime/RelativeUrlRuntimeModule");
 const RuntimeIdRuntimeModule = require("./runtime/RuntimeIdRuntimeModule");
+const SetAnonymousDefaultNameRuntimeModule = require("./runtime/SetAnonymousDefaultNameRuntimeModule");
 const SystemContextRuntimeModule = require("./runtime/SystemContextRuntimeModule");
 const ToBinaryRuntimeModule = require("./runtime/ToBinaryRuntimeModule");
 const ShareRuntimeModule = require("./sharing/ShareRuntimeModule");
@@ -79,6 +80,7 @@ const GLOBALS_ON_REQUIRE = [
 	RuntimeGlobals.shareScopeMap,
 	RuntimeGlobals.initializeSharing,
 	RuntimeGlobals.loadScript,
+	RuntimeGlobals.setAnonymousDefaultName,
 	RuntimeGlobals.systemContext,
 	RuntimeGlobals.onChunksLoaded,
 	RuntimeGlobals.makeOptimizedDeferredNamespaceObject,
@@ -238,6 +240,15 @@ class RuntimePlugin {
 					);
 					return true;
 				});
+			compilation.hooks.runtimeRequirementInTree
+				.for(RuntimeGlobals.setAnonymousDefaultName)
+				.tap(PLUGIN_NAME, (chunk) => {
+					compilation.addRuntimeModule(
+						chunk,
+						new SetAnonymousDefaultNameRuntimeModule()
+					);
+					return true;
+				});
 			compilation.hooks.runtimeRequirementInTree
 				.for(RuntimeGlobals.runtimeId)
 				.tap(PLUGIN_NAME, (chunk) => {

package/lib/WarnCaseSensitiveModulesPlugin.js

@@ -5,12 +5,80 @@
 
 "use strict";
 
-const CaseSensitiveModulesWarning = require("./CaseSensitiveModulesWarning");
-
 /** @typedef {import("./Compiler")} Compiler */
 /** @typedef {import("./Module")} Module */
+/** @typedef {import("./ModuleGraph")} ModuleGraph */
 /** @typedef {import("./NormalModule")} NormalModule */
 
+const WebpackError = require("./errors/WebpackError");
+
+/**
+ * Sorts the conflicting modules by identifier to keep warning output stable.
+ * @param {Module[]} modules the modules to be sorted
+ * @returns {Module[]} sorted version of original modules
+ */
+const sortModules = (modules) =>
+	modules.sort((a, b) => {
+		const aIdent = a.identifier();
+		const bIdent = b.identifier();
+		/* istanbul ignore next */
+		if (aIdent < bIdent) return -1;
+		/* istanbul ignore next */
+		if (aIdent > bIdent) return 1;
+		/* istanbul ignore next */
+		return 0;
+	});
+
+/**
+ * Formats the conflicting modules and one representative incoming reason for
+ * each module into the warning body.
+ * @param {Module[]} modules each module from throw
+ * @param {ModuleGraph} moduleGraph the module graph
+ * @returns {string} each message from provided modules
+ */
+const createModulesListMessage = (modules, moduleGraph) =>
+	modules
+		.map((m) => {
+			let message = `* ${m.identifier()}`;
+			const validReasons = [
+				...moduleGraph.getIncomingConnectionsByOriginModule(m).keys()
+			].filter(Boolean);
+
+			if (validReasons.length > 0) {
+				message += `\n    Used by ${validReasons.length} module(s), i. e.`;
+				message += `\n    ${
+					/** @type {Module[]} */ (validReasons)[0].identifier()
+				}`;
+			}
+			return message;
+		})
+		.join("\n");
+
+/**
+ * Warning emitted when webpack finds modules whose identifiers differ only by
+ * letter casing, which can behave inconsistently across filesystems.
+ */
+class CaseSensitiveModulesWarning extends WebpackError {
+	/**
+	 * Builds a warning message that lists the case-conflicting modules and
+	 * representative importers that caused them to be included.
+	 * @param {Iterable<Module>} modules modules that were detected
+	 * @param {ModuleGraph} moduleGraph the module graph
+	 */
+	constructor(modules, moduleGraph) {
+		const sortedModules = sortModules([...modules]);
+		const modulesList = createModulesListMessage(sortedModules, moduleGraph);
+		super(`There are multiple modules with names that only differ in casing.
+This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
+Use equal casing. Compare these module identifiers:
+${modulesList}`);
+
+		/** @type {string} */
+		this.name = "CaseSensitiveModulesWarning";
+		this.module = sortedModules[0];
+	}
+}
+
 const PLUGIN_NAME = "WarnCaseSensitiveModulesPlugin";
 
 class WarnCaseSensitiveModulesPlugin {

package/lib/WarnDeprecatedOptionPlugin.js

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

package/lib/WarnNoModeSetPlugin.js

@@ -5,7 +5,22 @@
 
 "use strict";
 
-const NoModeWarning = require("./NoModeWarning");
+const WebpackError = require("./errors/WebpackError");
+
+class NoModeWarning extends WebpackError {
+	constructor() {
+		super();
+
+		/** @type {string} */
+		this.name = "NoModeWarning";
+		this.message =
+			"configuration\n" +
+			"The 'mode' option has not been set, webpack will fallback to 'production' for this value.\n" +
+			"Set 'mode' option to 'development' or 'production' to enable defaults for each environment.\n" +
+			"You can also set it to 'none' to disable any default behavior. " +
+			"Learn more: https://webpack.js.org/configuration/mode/";
+	}
+}
 
 /** @typedef {import("./Compiler")} Compiler */
 

package/lib/Watching.js

@@ -11,7 +11,6 @@ const Stats = require("./Stats");
 /** @typedef {import("./Compilation")} Compilation */
 /** @typedef {import("./Compiler")} Compiler */
 /** @typedef {import("./Compiler").ErrorCallback} ErrorCallback */
-/** @typedef {import("./WebpackError")} WebpackError */
 /** @typedef {import("./logging/Logger").Logger} Logger */
 /** @typedef {import("./util/fs").TimeInfoEntries} TimeInfoEntries */
 /** @typedef {import("./util/fs").WatchFileSystem} WatchFileSystem */
@@ -480,7 +479,7 @@ class Watching {
 		}
 		/**
 		 * Processes the provided err.
-		 * @param {WebpackError | null} err error if any
+		 * @param {Error | null} err error if any
 		 * @param {Compilation=} compilation compilation if any
 		 */
 		const finalCallback = (err, compilation) => {
@@ -495,7 +494,7 @@ class Watching {
 			this.compiler.fsStartTime = undefined;
 			/**
 			 * Processes the provided err.
-			 * @param {WebpackError | null} err error if any
+			 * @param {Error | null} err error if any
 			 */
 			const shutdown = (err) => {
 				this.compiler.hooks.watchClose.call();

package/lib/WebpackError.js

@@ -5,80 +5,6 @@
 
 "use strict";
 
-const inspect = require("util").inspect.custom;
-const makeSerializable = require("./util/makeSerializable");
-
-/** @typedef {import("./Chunk")} Chunk */
-/** @typedef {import("./Dependency").DependencyLocation} DependencyLocation */
-/** @typedef {import("./Module")} Module */
-/** @typedef {import("./serialization/ObjectMiddleware").ObjectDeserializerContext} ObjectDeserializerContext */
-/** @typedef {import("./serialization/ObjectMiddleware").ObjectSerializerContext} ObjectSerializerContext */
-
-class WebpackError extends Error {
-	/**
-	 * Creates an instance of WebpackError.
-	 * @param {string=} message error message
-	 * @param {{ cause?: unknown }} options error options
-	 */
-	constructor(message, options = {}) {
-		super(message, options);
-
-		/** @type {string=} */
-		this.details = undefined;
-		/** @type {(Module | null)=} */
-		this.module = undefined;
-		/** @type {DependencyLocation=} */
-		this.loc = undefined;
-		/** @type {boolean=} */
-		this.hideStack = undefined;
-		/** @type {Chunk=} */
-		this.chunk = undefined;
-		/** @type {string=} */
-		this.file = undefined;
-	}
-
-	/**
-	 * Returns inspect message.
-	 * @returns {string} inspect message
-	 */
-	[inspect]() {
-		return (
-			this.stack +
-			(this.details ? `\n${this.details}` : "") +
-			(this.cause ? `\n${this.cause}` : "")
-		);
-	}
-
-	/**
-	 * Serializes this instance into the provided serializer context.
-	 * @param {ObjectSerializerContext} context context
-	 */
-	serialize({ write }) {
-		write(this.name);
-		write(this.message);
-		write(this.stack);
-		write(this.cause);
-		write(this.details);
-		write(this.loc);
-		write(this.hideStack);
-	}
-
-	/**
-	 * Restores this instance from the provided deserializer context.
-	 * @param {ObjectDeserializerContext} context context
-	 */
-	deserialize({ read }) {
-		this.name = read();
-		this.message = read();
-		this.stack = read();
-		this.cause = read();
-		this.details = read();
-		this.loc = read();
-		this.hideStack = read();
-	}
-}
-
-makeSerializable(WebpackError, "webpack/lib/WebpackError");
-
-/** @type {typeof WebpackError} */
-module.exports = WebpackError;
+// TODO remove in webpack 6
+// Some old plugins use `require("webpack/lib/WebpackError")`, in webpack@6 developer should migrate to `compiler.webpack.WebpackError`
+module.exports = require("./errors/WebpackError");

package/lib/WebpackIsIncludedPlugin.js

@@ -5,13 +5,13 @@
 
 "use strict";
 
-const IgnoreErrorModuleFactory = require("./IgnoreErrorModuleFactory");
 const {
 	JAVASCRIPT_MODULE_TYPE_AUTO,
 	JAVASCRIPT_MODULE_TYPE_DYNAMIC,
 	JAVASCRIPT_MODULE_TYPE_ESM
 } = require("./ModuleTypeConstants");
 const WebpackIsIncludedDependency = require("./dependencies/WebpackIsIncludedDependency");
+const IgnoreErrorModuleFactory = require("./errors/IgnoreErrorModuleFactory");
 const {
 	toConstantDependency
 } = require("./javascript/JavascriptParserHelpers");

package/lib/WebpackOptionsApply.js

@@ -425,6 +425,18 @@ class WebpackOptionsApply extends OptionsApply {
 			new CssModulesPlugin().apply(compiler);
 		}
 
+		if (options.experiments.html) {
+			const HtmlModulesPlugin = require("./html/HtmlModulesPlugin");
+
+			new HtmlModulesPlugin().apply(compiler);
+		}
+
+		if (options.experiments.typescript) {
+			const TypeScriptPlugin = require("./typescript/TypeScriptPlugin");
+
+			new TypeScriptPlugin().apply(compiler);
+		}
+
 		if (options.experiments.lazyCompilation) {
 			const LazyCompilationPlugin = require("./hmr/LazyCompilationPlugin");
 
@@ -517,7 +529,7 @@ class WebpackOptionsApply extends OptionsApply {
 		}).apply(compiler);
 		if (options.amd !== false) {
 			const AMDPlugin = require("./dependencies/AMDPlugin");
-			const RequireJsStuffPlugin = require("./RequireJsStuffPlugin");
+			const RequireJsStuffPlugin = require("./dependencies/RequireJsStuffPlugin");
 
 			new AMDPlugin(options.amd || {}).apply(compiler);
 			new RequireJsStuffPlugin().apply(compiler);

package/lib/asset/AssetBytesGenerator.js

@@ -12,6 +12,7 @@ const {
 	CSS_TYPE,
 	CSS_URL_TYPE,
 	CSS_URL_TYPES,
+	HTML_TYPE,
 	JAVASCRIPT_AND_CSS_URL_TYPES,
 	JAVASCRIPT_TYPE,
 	JAVASCRIPT_TYPES,
@@ -146,9 +147,12 @@ class AssetSourceGenerator extends Generator {
 		}
 
 		if (sourceTypes.size > 0) {
-			if (sourceTypes.has(JAVASCRIPT_TYPE) && sourceTypes.has(CSS_TYPE)) {
+			if (
+				sourceTypes.has(JAVASCRIPT_TYPE) &&
+				(sourceTypes.has(CSS_TYPE) || sourceTypes.has(HTML_TYPE))
+			) {
 				return JAVASCRIPT_AND_CSS_URL_TYPES;
-			} else if (sourceTypes.has(CSS_TYPE)) {
+			} else if (sourceTypes.has(CSS_TYPE) || sourceTypes.has(HTML_TYPE)) {
 				return CSS_URL_TYPES;
 			}
 			return JAVASCRIPT_TYPES;