webpack 5.106.2 → 5.107.0

package/lib/asset/AssetGenerator.js

@@ -17,6 +17,7 @@ const {
 	CSS_TYPE,
 	CSS_URL_TYPE,
 	CSS_URL_TYPES,
+	HTML_TYPE,
 	JAVASCRIPT_AND_CSS_URL_TYPES,
 	JAVASCRIPT_TYPE,
 	JAVASCRIPT_TYPES,
@@ -29,6 +30,7 @@ const createHash = require("../util/createHash");
 const { makePathsRelative } = require("../util/identifier");
 const memoize = require("../util/memoize");
 const nonNumericOnlyHash = require("../util/nonNumericOnlyHash");
+const { updateHashFromSource } = require("../util/source");
 
 const getMimeTypes = memoize(() => require("../util/mimeTypes"));
 
@@ -259,7 +261,7 @@ class AssetGenerator extends Generator {
 		const source = module.originalSource();
 
 		if (source) {
-			hash.update(source.buffer());
+			updateHashFromSource(hash, source);
 		}
 
 		if (module.error) {
@@ -398,7 +400,13 @@ class AssetGenerator extends Generator {
 				compilation.outputOptions.publicPath === "auto"
 					? CssUrlDependency.PUBLIC_PATH_AUTO
 					: compilation.getAssetPath(compilation.outputOptions.publicPath, {
-							hash: compilation.hash
+							hash:
+								compilation.hash ||
+								`${CssUrlDependency.PUBLIC_PATH_FULL_HASH}0__`,
+							hashWithLength: (length) =>
+								compilation.hash
+									? compilation.hash.slice(0, length)
+									: `${CssUrlDependency.PUBLIC_PATH_FULL_HASH}${length}__`
 						});
 
 			assetPath = path + filename;
@@ -567,7 +575,7 @@ class AssetGenerator extends Generator {
 					: encodedSource;
 
 			if (data) {
-				data.set("url", { [type]: content, ...data.get("url") });
+				data.set("url", { ...data.get("url"), [type]: content });
 			}
 		} else {
 			const [fullContentHash, contentHash] = AssetGenerator.getFullContentHash(
@@ -606,7 +614,7 @@ class AssetGenerator extends Generator {
 				);
 
 			if (data && (type === JAVASCRIPT_TYPE || type === CSS_URL_TYPE)) {
-				data.set("url", { [type]: assetPath, ...data.get("url") });
+				data.set("url", { ...data.get("url"), [type]: assetPath });
 			}
 
 			if (data) {
@@ -698,9 +706,12 @@ class AssetGenerator extends Generator {
 
 		if ((module.buildInfo && module.buildInfo.dataUrl) || this.emit === false) {
 			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;
@@ -710,9 +721,12 @@ class AssetGenerator 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 ASSET_AND_JAVASCRIPT_AND_CSS_URL_TYPES;
-			} else if (sourceTypes.has(CSS_TYPE)) {
+			} else if (sourceTypes.has(CSS_TYPE) || sourceTypes.has(HTML_TYPE)) {
 				return ASSET_AND_CSS_URL_TYPES;
 			}
 			return ASSET_AND_JAVASCRIPT_TYPES;

package/lib/asset/AssetModulesPlugin.js

@@ -34,7 +34,9 @@ const memoize = require("../util/memoize");
  * @returns {Schema} definition
  */
 const getSchema = (name) => {
-	const { definitions } = require("../../schemas/WebpackOptions.json");
+	const { definitions } =
+		/** @type {EXPECTED_ANY} */
+		(require("../../schemas/WebpackOptions.json"));
 
 	return {
 		definitions,

package/lib/asset/AssetSourceGenerator.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,
@@ -145,9 +146,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;

package/lib/buildChunkGraph.js

@@ -5,9 +5,8 @@
 
 "use strict";
 
-const AsyncDependencyToInitialChunkError = require("./AsyncDependencyToInitialChunkError");
-const { connectChunkGroupParentAndChild } = require("./GraphHelpers");
 const ModuleGraphConnection = require("./ModuleGraphConnection");
+const AsyncDependencyToInitialChunkError = require("./errors/AsyncDependencyToInitialChunkError");
 const { getEntryRuntime, mergeRuntime } = require("./util/runtime");
 
 /** @typedef {import("./AsyncDependenciesBlock")} AsyncDependenciesBlock */
@@ -1311,10 +1310,9 @@ const connectChunkGroups = (
 			chunkGraph.connectBlockAndChunkGroup(block, chunkGroup);
 
 			// 4. Connect chunk with parent
-			connectChunkGroupParentAndChild(
-				originChunkGroupInfo.chunkGroup,
-				chunkGroup
-			);
+			if (originChunkGroupInfo.chunkGroup.addChild(chunkGroup)) {
+				chunkGroup.addParent(originChunkGroupInfo.chunkGroup);
+			}
 		}
 	}
 };

package/lib/cache/PackFileCacheStrategy.js

@@ -7,9 +7,9 @@
 
 const FileSystemInfo = require("../FileSystemInfo");
 const ProgressPlugin = require("../ProgressPlugin");
-const { formatSize } = require("../SizeFormatHelpers");
 const SerializerMiddleware = require("../serialization/SerializerMiddleware");
 const LazySet = require("../util/LazySet");
+const formatSize = require("../util/formatSize");
 const makeSerializable = require("../util/makeSerializable");
 const memoize = require("../util/memoize");
 const {
@@ -105,7 +105,7 @@ const MIN_CONTENT_SIZE = 1024 * 1024; // 1 MB
 const CONTENT_COUNT_TO_MERGE = 10;
 const MIN_ITEMS_IN_FRESH_PACK = 100;
 const MAX_ITEMS_IN_FRESH_PACK = 50000;
-const MAX_TIME_IN_FRESH_PACK = 1 * 60 * 1000; // 1 min
+const MAX_TIME_IN_FRESH_PACK = 60 * 1000; // 1 min
 
 class PackItemInfo {
 	/**
@@ -799,7 +799,7 @@ class PackContentItems {
 		if (read()) {
 			this.map = read();
 		} else if (profile) {
-			/** @type {Map<EXPECTED_ANY, EXPECTED_ANY>} */
+			/** @type {Content} */
 			const map = new Map();
 			let key = read();
 			while (key !== null) {
@@ -825,7 +825,7 @@ class PackContentItems {
 			}
 			this.map = map;
 		} else {
-			/** @type {Map<EXPECTED_ANY, EXPECTED_ANY>} */
+			/** @type {Content} */
 			const map = new Map();
 			let key = read();
 			while (key !== null) {

package/lib/cli.js

@@ -7,7 +7,9 @@
 
 const path = require("path");
 const tty = require("tty");
-const webpackSchema = require("../schemas/WebpackOptions.json");
+const webpackSchema =
+	/** @type {EXPECTED_ANY} */
+	(require("../schemas/WebpackOptions.json"));
 
 /** @typedef {import("json-schema").JSONSchema4} JSONSchema4 */
 /** @typedef {import("json-schema").JSONSchema6} JSONSchema6 */

package/lib/config/defaults.js

@@ -22,6 +22,7 @@ const {
 	CSS_MODULE_TYPE_AUTO,
 	CSS_MODULE_TYPE_GLOBAL,
 	CSS_MODULE_TYPE_MODULE,
+	HTML_MODULE_TYPE,
 	JAVASCRIPT_MODULE_TYPE_AUTO,
 	JAVASCRIPT_MODULE_TYPE_DYNAMIC,
 	JAVASCRIPT_MODULE_TYPE_ESM,
@@ -431,6 +432,12 @@ const applyWebpackOptionsDefaults = (options, compilerIndex) => {
 		css:
 			/** @type {NonNullable<ExperimentsNormalized["css"]>} */
 			(options.experiments.css),
+		html:
+			/** @type {NonNullable<ExperimentsNormalized["html"]>} */
+			(options.experiments.html),
+		typescript:
+			/** @type {NonNullable<ExperimentsNormalized["typescript"]>} */
+			(options.experiments.typescript),
 		deferImport:
 			/** @type {NonNullable<ExperimentsNormalized["deferImport"]>} */
 			(options.experiments.deferImport),
@@ -444,7 +451,8 @@ const applyWebpackOptionsDefaults = (options, compilerIndex) => {
 		mode: options.mode,
 		outputModule:
 			/** @type {NonNullable<WebpackOptionsNormalized["output"]["module"]>} */
-			(options.output.module)
+			(options.output.module),
+		library: options.output.library
 	});
 
 	applyExternalsPresetsDefaults(options.externalsPresets, {
@@ -516,7 +524,10 @@ const applyWebpackOptionsDefaults = (options, compilerIndex) => {
 			mode: /** @type {Mode} */ (options.mode),
 			css:
 				/** @type {NonNullable<ExperimentsNormalized["css"]>} */
-				(options.experiments.css)
+				(options.experiments.css),
+			typescript:
+				/** @type {NonNullable<ExperimentsNormalized["typescript"]>} */
+				(options.experiments.typescript)
 		}),
 		options.resolve
 	);
@@ -566,6 +577,10 @@ const applyExperimentsDefaults = (
 	D(experiments, "deferImport", false);
 	D(experiments, "sourceImport", false);
 	F(experiments, "css", () => (experiments.futureDefaults ? true : undefined));
+	F(experiments, "html", () => (experiments.futureDefaults ? true : undefined));
+	F(experiments, "typescript", () =>
+		experiments.futureDefaults ? true : undefined
+	);
 
 	if (typeof experiments.buildHttp === "object") {
 		D(experiments.buildHttp, "frozen", production);
@@ -743,11 +758,21 @@ const applySnapshotDefaults = (snapshot, { production, futureDefaults }) => {
  * @param {boolean} options.sourceImport is import source enabled
  * @param {boolean} options.isNode is node target platform
  * @param {boolean} options.outputModule is output.module enabled
+ * @param {WebpackOptionsNormalized["output"]["library"]} options.library library options
+ * @param {boolean} options.typescript is typescript enabled
  * @returns {void}
  */
 const applyJavascriptParserOptionsDefaults = (
 	parserOptions,
-	{ futureDefaults, deferImport, sourceImport, isNode, outputModule }
+	{
+		futureDefaults,
+		deferImport,
+		sourceImport,
+		isNode,
+		outputModule,
+		library,
+		typescript
+	}
 ) => {
 	D(parserOptions, "unknownContextRequest", ".");
 	D(parserOptions, "unknownContextRegExp", false);
@@ -770,7 +795,9 @@ const applyJavascriptParserOptionsDefaults = (
 	D(parserOptions, "dynamicUrl", true);
 	D(parserOptions, "deferImport", deferImport);
 	D(parserOptions, "sourceImport", sourceImport);
+	D(parserOptions, "typescript", typescript);
 	if (futureDefaults) D(parserOptions, "exportsPresence", "error");
+	D(parserOptions, "anonymousDefaultExportName", !library);
 };
 
 /**
@@ -808,7 +835,9 @@ const applyCssGeneratorOptionsDefaults = (
  * @param {boolean} options.cache is caching enabled
  * @param {boolean} options.syncWebAssembly is syncWebAssembly enabled
  * @param {boolean} options.asyncWebAssembly is asyncWebAssembly enabled
+ * @param {boolean} options.typescript is typescript enabled
  * @param {boolean} options.css is css enabled
+ * @param {boolean} options.html is html enabled
  * @param {boolean} options.futureDefaults is future defaults enabled
  * @param {string} options.uniqueName the unique name
  * @param {boolean} options.isNode is node target platform
@@ -819,6 +848,7 @@ const applyCssGeneratorOptionsDefaults = (
  * @param {HashSalt} options.hashSalt hash salt
  * @param {HashFunction} options.hashFunction hash function
  * @param {boolean} options.outputModule is output.module enabled
+ * @param {WebpackOptionsNormalized["output"]["library"]} options.library library options
  * @returns {void}
  */
 const applyModuleDefaults = (
@@ -830,6 +860,8 @@ const applyModuleDefaults = (
 		syncWebAssembly,
 		asyncWebAssembly,
 		css,
+		html,
+		typescript,
 		futureDefaults,
 		isNode,
 		uniqueName,
@@ -837,7 +869,8 @@ const applyModuleDefaults = (
 		mode,
 		deferImport,
 		sourceImport,
-		outputModule
+		outputModule,
+		library
 	}
 ) => {
 	if (cache) {
@@ -899,11 +932,14 @@ const applyModuleDefaults = (
 			deferImport,
 			sourceImport,
 			isNode,
-			outputModule
+			outputModule,
+			library,
+			typescript
 		}
 	);
 
 	F(module.generator, "json", () => ({}));
+
 	applyJsonGeneratorOptionsDefaults(
 		/** @type {NonNullable<GeneratorOptionsByModuleTypeKnown["json"]>} */
 		(module.generator.json)
@@ -1046,6 +1082,16 @@ const applyModuleDefaults = (
 		}
 	}
 
+	if (html) {
+		// `module.generator.html.extract` is intentionally left undefined by
+		// default: HtmlGenerator treats undefined as "extract iff this HTML
+		// module is a compilation entry", which is the HTML-entry-point
+		// behaviour. Setting `extract: true` forces extraction for all HTML
+		// modules (including imported ones); `extract: false` disables it
+		// everywhere.
+		F(module.generator, HTML_MODULE_TYPE, () => ({}));
+	}
+
 	A(module, "defaultRules", () => {
 		const esm = {
 			type: JAVASCRIPT_MODULE_TYPE_ESM,
@@ -1103,6 +1149,7 @@ const applyModuleDefaults = (
 				...esm
 			}
 		];
+
 		if (asyncWebAssembly) {
 			const wasm = {
 				type: WEBASSEMBLY_MODULE_TYPE_ASYNC,
@@ -1148,6 +1195,7 @@ const applyModuleDefaults = (
 				...wasm
 			});
 		}
+
 		if (css) {
 			const resolve = {
 				fullySpecified: true,
@@ -1169,14 +1217,20 @@ const applyModuleDefaults = (
 				resolve
 			});
 			// For CSS modules, i.e. `.class { composes: className from "./style.css" }`
-			// We inherit for such constructions
+			// We inherit for such constructions, but skip files that are already
+			// detected as CSS modules by extension (`.module.<ext>`) — they get
+			// the same modules-mode behavior from the auto rule, and forcing a
+			// different type stamp here would create a duplicate module instance.
+			const moduleExtension = /\.module\.\w+$/i;
 			rules.push({
 				dependency: /css-import-local-module/,
+				exclude: moduleExtension,
 				type: CSS_MODULE_TYPE_MODULE,
 				resolve
 			});
 			rules.push({
 				dependency: /css-import-global-module/,
+				exclude: moduleExtension,
 				type: CSS_MODULE_TYPE_GLOBAL,
 				resolve
 			});
@@ -1198,6 +1252,72 @@ const applyModuleDefaults = (
 				}
 			);
 		}
+		if (html) {
+			const resolve = {
+				fullySpecified: true,
+				preferRelative: true
+			};
+
+			rules.push({
+				test: /\.html$/i,
+				type: HTML_MODULE_TYPE,
+				resolve
+			});
+			rules.push({
+				mimetype: "text/html",
+				type: HTML_MODULE_TYPE,
+				resolve
+			});
+			if (css) {
+				// Inline `<style>` content in an HTML module is fed into the
+				// CSS pipeline as a `data:text/css` virtual module. We force
+				// `exportType: "text"` so the CSS module exposes the
+				// processed CSS text on the `css-text` codegen channel that
+				// `HtmlInlineStyleDependency.Template` reads back into the
+				// `<style>` tag.
+				rules.push({
+					dependency: "html-style",
+					parser: {
+						exportType: "text"
+					},
+					resolve
+				});
+			}
+		}
+
+		if (typescript) {
+			rules.push(
+				{
+					test: /\.mts$/i,
+					...esm
+				},
+				{
+					test: /\.ts$/i,
+					descriptionData: {
+						type: "module"
+					},
+					...esm
+				},
+				{
+					test: /\.cts$/i,
+					...commonjs
+				},
+				{
+					test: /\.ts$/i,
+					descriptionData: {
+						type: "commonjs"
+					},
+					...commonjs
+				},
+				{
+					mimetype: {
+						or: ["text/typescript", "application/typescript"]
+					},
+					...esm
+				}
+			);
+		}
+
 		rules.push(
 			{
 				dependency: "url",
@@ -1462,6 +1582,43 @@ const applyOutputDefaults = (
 		}
 		return "[id].css";
 	});
+	// Derive html filename defaults from `output.filename` / `output.chunkFilename`
+	// (the same shape the CSS pipeline uses), but if the derived template lacks
+	// any per-module differentiator, fall back to `[name].html` so multiple
+	// extracted HTML modules in one compilation don't collide on the same
+	// emitted file. For example: `output.filename: "bundle.js"` would derive
+	// `bundle.html` — two `.html` modules extracted in the same build would
+	// both want that name and conflict at emit time.
+	const HAS_PATH_PLACEHOLDER_REGEXP =
+		/\[(name|id|chunkhash|contenthash|fullhash|hash)/;
+	/**
+	 * @param {string} template html filename template derived from `output.filename`
+	 * @returns {string} same template, or `[name].html` if it has no per-module placeholder
+	 */
+	const ensureUniqueHtmlTemplate = (template) =>
+		HAS_PATH_PLACEHOLDER_REGEXP.test(template) ? template : "[name].html";
+	F(output, "htmlFilename", () => {
+		const filename =
+			/** @type {NonNullable<Output["htmlFilename"]>} */
+			(output.filename);
+		if (typeof filename !== "function") {
+			return ensureUniqueHtmlTemplate(
+				filename.replace(/\.[mc]?js(\?|$)/, ".html$1")
+			);
+		}
+		return "[name].html";
+	});
+	F(output, "htmlChunkFilename", () => {
+		const chunkFilename =
+			/** @type {NonNullable<Output["htmlChunkFilename"]>} */
+			(output.chunkFilename);
+		if (typeof chunkFilename !== "function") {
+			return ensureUniqueHtmlTemplate(
+				chunkFilename.replace(/\.[mc]?js(\?|$)/, ".html$1")
+			);
+		}
+		return "[name].html";
+	});
 	D(output, "assetModuleFilename", "[hash][ext][query][fragment]");
 	D(output, "webassemblyModuleFilename", "[hash].module.wasm");
 	D(output, "compareBeforeEmit", true);
@@ -1968,6 +2125,7 @@ const applyOptimizationDefaults = (
  * @param {TargetProperties | false} options.targetProperties target properties
  * @param {Mode} options.mode mode
  * @param {boolean} options.css is css enabled
+ * @param {boolean} options.typescript is typescript enabled
  * @returns {ResolveOptions} resolve options
  */
 const getResolveDefaults = ({
@@ -1975,7 +2133,8 @@ const getResolveDefaults = ({
 	context,
 	targetProperties,
 	mode,
-	css
+	css,
+	typescript
 }) => {
 	/** @type {string[]} */
 	const conditions = ["webpack"];
@@ -1990,24 +2149,43 @@ const getResolveDefaults = ({
 		if (targetProperties.nwjs) conditions.push("nwjs");
 	}
 
-	const jsExtensions = [".js", ".json", ".wasm"];
+	const jsExtensions = typescript
+		? [".ts", ".js", ".json", ".wasm"]
+		: [".js", ".json", ".wasm"];
 
 	const tp = targetProperties;
 	const browserField =
 		tp && tp.web && (!tp.node || (tp.electron && tp.electronRenderer));
 
+	// When `experiments.typescript` is on, also honor the `typescript`
+	// conditional-exports key so monorepo packages can ship .ts sources via
+	// `package.json#exports` — same convention Node.js's amaro uses.
+	const tsConditionPrefix = typescript ? ["typescript"] : [];
+
 	/** @type {() => ResolveOptions} */
 	const cjsDeps = () => ({
 		aliasFields: browserField ? ["browser"] : [],
 		mainFields: browserField ? ["browser", "module", "..."] : ["module", "..."],
-		conditionNames: ["require", "module", "..."],
+		conditionNames: [
+			...tsConditionPrefix,
+			"require",
+			"module-sync",
+			"module",
+			"..."
+		],
 		extensions: [...jsExtensions]
 	});
 	/** @type {() => ResolveOptions} */
 	const esmDeps = () => ({
 		aliasFields: browserField ? ["browser"] : [],
 		mainFields: browserField ? ["browser", "module", "..."] : ["module", "..."],
-		conditionNames: ["import", "module", "..."],
+		conditionNames: [
+			...tsConditionPrefix,
+			"import",
+			"module-sync",
+			"module",
+			"..."
+		],
 		extensions: [...jsExtensions]
 	});
 
@@ -2088,6 +2266,15 @@ const getResolveDefaults = ({
 			cssResolveOptions;
 	}
 
+	if (typescript) {
+		resolveOptions.tsconfig = true;
+		resolveOptions.extensionAlias = {
+			".js": [".js", ".ts"],
+			".cjs": [".cjs", ".cts"],
+			".mjs": [".mjs", ".mts"]
+		};
+	}
+
 	return resolveOptions;
 };
 

package/lib/config/normalization.js

@@ -22,7 +22,7 @@ const util = require("util");
 /** @typedef {import("../../declarations/WebpackOptions").PluginsNormalized} PluginsNormalized */
 /** @typedef {import("../../declarations/WebpackOptions").WebpackOptions} WebpackOptions */
 /** @typedef {import("../../declarations/WebpackOptions").WebpackOptionsNormalized} WebpackOptionsNormalized */
-/** @typedef {import("../WebpackError")} WebpackError */
+/** @typedef {import("../errors/WebpackError")} WebpackError */
 
 /**
  * Defines the webpack options interception type used by this module.
@@ -368,6 +368,8 @@ const getNormalizedWebpackOptions = (config) => ({
 			hotUpdateChunkFilename: output.hotUpdateChunkFilename,
 			hotUpdateGlobal: output.hotUpdateGlobal,
 			hotUpdateMainFilename: output.hotUpdateMainFilename,
+			htmlChunkFilename: output.htmlChunkFilename,
+			htmlFilename: output.htmlFilename,
 			ignoreBrowserWarnings: output.ignoreBrowserWarnings,
 			iife: output.iife,
 			importFunctionName: output.importFunctionName,