webpack 5.106.2 → 5.107.1

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,