webpack 5.59.0 → 5.71.0

package/lib/asset/AssetGenerator.js

@@ -12,9 +12,11 @@ const Generator = require("../Generator");
 const RuntimeGlobals = require("../RuntimeGlobals");
 const createHash = require("../util/createHash");
 const { makePathsRelative } = require("../util/identifier");
+const nonNumericOnlyHash = require("../util/nonNumericOnlyHash");
 
 /** @typedef {import("webpack-sources").Source} Source */
 /** @typedef {import("../../declarations/WebpackOptions").AssetGeneratorOptions} AssetGeneratorOptions */
+/** @typedef {import("../../declarations/WebpackOptions").AssetModuleOutputPath} AssetModuleOutputPath */
 /** @typedef {import("../../declarations/WebpackOptions").RawPublicPath} RawPublicPath */
 /** @typedef {import("../Compilation")} Compilation */
 /** @typedef {import("../Compiler")} Compiler */
@@ -49,7 +51,7 @@ const mergeAssetInfo = (a, b) => {
 				case "immutable":
 				case "development":
 				case "hotModuleReplacement":
-				case "javascriptModule	":
+				case "javascriptModule":
 					result[key] = a[key] || b[key];
 					break;
 				case "related":
@@ -74,24 +76,121 @@ const mergeRelatedInfo = (a, b) => {
 	return result;
 };
 
+const encodeDataUri = (encoding, source) => {
+	let encodedContent;
+
+	switch (encoding) {
+		case "base64": {
+			encodedContent = source.buffer().toString("base64");
+			break;
+		}
+		case false: {
+			const content = source.source();
+
+			if (typeof content !== "string") {
+				encodedContent = content.toString("utf-8");
+			}
+
+			encodedContent = encodeURIComponent(encodedContent).replace(
+				/[!'()*]/g,
+				character => "%" + character.codePointAt(0).toString(16)
+			);
+			break;
+		}
+		default:
+			throw new Error(`Unsupported encoding '${encoding}'`);
+	}
+
+	return encodedContent;
+};
+
+const decodeDataUriContent = (encoding, content) => {
+	const isBase64 = encoding === "base64";
+	return isBase64
+		? Buffer.from(content, "base64")
+		: Buffer.from(decodeURIComponent(content), "ascii");
+};
+
 const JS_TYPES = new Set(["javascript"]);
 const JS_AND_ASSET_TYPES = new Set(["javascript", "asset"]);
+const DEFAULT_ENCODING = "base64";
 
 class AssetGenerator extends Generator {
 	/**
 	 * @param {AssetGeneratorOptions["dataUrl"]=} dataUrlOptions the options for the data url
 	 * @param {string=} filename override for output.assetModuleFilename
 	 * @param {RawPublicPath=} publicPath override for output.assetModulePublicPath
+	 * @param {AssetModuleOutputPath=} outputPath the output path for the emitted file which is not included in the runtime import
 	 * @param {boolean=} emit generate output asset
 	 */
-	constructor(dataUrlOptions, filename, publicPath, emit) {
+	constructor(dataUrlOptions, filename, publicPath, outputPath, emit) {
 		super();
 		this.dataUrlOptions = dataUrlOptions;
 		this.filename = filename;
 		this.publicPath = publicPath;
+		this.outputPath = outputPath;
 		this.emit = emit;
 	}
 
+	/**
+	 * @param {NormalModule} module module
+	 * @param {RuntimeTemplate} runtimeTemplate runtime template
+	 * @returns {string} source file name
+	 */
+	getSourceFileName(module, runtimeTemplate) {
+		return makePathsRelative(
+			runtimeTemplate.compilation.compiler.context,
+			module.matchResource || module.resource,
+			runtimeTemplate.compilation.compiler.root
+		).replace(/^\.\//, "");
+	}
+
+	/**
+	 * @param {NormalModule} module module
+	 * @returns {string} mime type
+	 */
+	getMimeType(module) {
+		if (typeof this.dataUrlOptions === "function") {
+			throw new Error(
+				"This method must not be called when dataUrlOptions is a function"
+			);
+		}
+
+		let mimeType = this.dataUrlOptions.mimetype;
+		if (mimeType === undefined) {
+			const ext = path.extname(module.nameForCondition());
+			if (
+				module.resourceResolveData &&
+				module.resourceResolveData.mimetype !== undefined
+			) {
+				mimeType =
+					module.resourceResolveData.mimetype +
+					module.resourceResolveData.parameters;
+			} else if (ext) {
+				mimeType = mimeTypes.lookup(ext);
+
+				if (typeof mimeType !== "string") {
+					throw new Error(
+						"DataUrl can't be generated automatically, " +
+							`because there is no mimetype for "${ext}" in mimetype database. ` +
+							'Either pass a mimetype via "generator.mimetype" or ' +
+							'use type: "asset/resource" to create a resource file instead of a DataUrl'
+					);
+				}
+			}
+		}
+
+		if (typeof mimeType !== "string") {
+			throw new Error(
+				"DataUrl can't be generated automatically. " +
+					'Either pass a mimetype via "generator.mimetype" or ' +
+					'use type: "asset/resource" to create a resource file instead of a DataUrl'
+			);
+		}
+
+		return mimeType;
+	}
+
 	/**
 	 * @param {NormalModule} module module for which the code should be generated
 	 * @param {GenerateContext} generateContext context for generate
@@ -131,66 +230,31 @@ class AssetGenerator extends Generator {
 							}
 						}
 						if (encoding === undefined) {
-							encoding = "base64";
-						}
-						let ext;
-						let mimeType = this.dataUrlOptions.mimetype;
-						if (mimeType === undefined) {
-							ext = path.extname(module.nameForCondition());
-							if (
-								module.resourceResolveData &&
-								module.resourceResolveData.mimetype !== undefined
-							) {
-								mimeType =
-									module.resourceResolveData.mimetype +
-									module.resourceResolveData.parameters;
-							} else if (ext) {
-								mimeType = mimeTypes.lookup(ext);
-							}
-						}
-						if (typeof mimeType !== "string") {
-							throw new Error(
-								"DataUrl can't be generated automatically, " +
-									`because there is no mimetype for "${ext}" in mimetype database. ` +
-									'Either pass a mimetype via "generator.mimetype" or ' +
-									'use type: "asset/resource" to create a resource file instead of a DataUrl'
-							);
+							encoding = DEFAULT_ENCODING;
 						}
+						const mimeType = this.getMimeType(module);
 
 						let encodedContent;
+
 						if (
 							module.resourceResolveData &&
-							module.resourceResolveData.encoding === encoding
+							module.resourceResolveData.encoding === encoding &&
+							decodeDataUriContent(
+								module.resourceResolveData.encoding,
+								module.resourceResolveData.encodedContent
+							).equals(originalSource.buffer())
 						) {
 							encodedContent = module.resourceResolveData.encodedContent;
 						} else {
-							switch (encoding) {
-								case "base64": {
-									encodedContent = originalSource.buffer().toString("base64");
-									break;
-								}
-								case false: {
-									const content = originalSource.source();
-
-									if (typeof content !== "string") {
-										encodedContent = content.toString("utf-8");
-									}
-
-									encodedContent = encodeURIComponent(encodedContent).replace(
-										/[!'()*]/g,
-										character => "%" + character.codePointAt(0).toString(16)
-									);
-									break;
-								}
-								default:
-									throw new Error(`Unsupported encoding '${encoding}'`);
-							}
+							encodedContent = encodeDataUri(encoding, originalSource);
 						}
 
 						encodedSource = `data:${mimeType}${
 							encoding ? `;${encoding}` : ""
 						},${encodedContent}`;
 					}
+					const data = getData();
+					data.set("url", Buffer.from(encodedSource));
 					return new RawSource(
 						`${RuntimeGlobals.module}.exports = ${JSON.stringify(
 							encodedSource
@@ -207,16 +271,15 @@ class AssetGenerator extends Generator {
 					const fullHash = /** @type {string} */ (
 						hash.digest(runtimeTemplate.outputOptions.hashDigest)
 					);
-					const contentHash = fullHash.slice(
-						0,
+					const contentHash = nonNumericOnlyHash(
+						fullHash,
 						runtimeTemplate.outputOptions.hashDigestLength
 					);
 					module.buildInfo.fullContentHash = fullHash;
-					const sourceFilename = makePathsRelative(
-						runtimeTemplate.compilation.compiler.context,
-						module.matchResource || module.resource,
-						runtimeTemplate.compilation.compiler.root
-					).replace(/^\.\//, "");
+					const sourceFilename = this.getSourceFileName(
+						module,
+						runtimeTemplate
+					);
 					let { path: filename, info: assetInfo } =
 						runtimeTemplate.compilation.getAssetPathWithInfo(
 							assetModuleFilename,
@@ -228,7 +291,7 @@ class AssetGenerator extends Generator {
 								contentHash
 							}
 						);
-					let publicPath;
+					let assetPath;
 					if (this.publicPath !== undefined) {
 						const { path, info } =
 							runtimeTemplate.compilation.getAssetPathWithInfo(
@@ -241,16 +304,34 @@ class AssetGenerator extends Generator {
 									contentHash
 								}
 							);
-						publicPath = JSON.stringify(path);
 						assetInfo = mergeAssetInfo(assetInfo, info);
+						assetPath = JSON.stringify(path + filename);
 					} else {
-						publicPath = RuntimeGlobals.publicPath;
 						runtimeRequirements.add(RuntimeGlobals.publicPath); // add __webpack_require__.p
+						assetPath = runtimeTemplate.concatenation(
+							{ expr: RuntimeGlobals.publicPath },
+							filename
+						);
 					}
 					assetInfo = {
 						sourceFilename,
 						...assetInfo
 					};
+					if (this.outputPath) {
+						const { path: outputPath, info } =
+							runtimeTemplate.compilation.getAssetPathWithInfo(
+								this.outputPath,
+								{
+									module,
+									runtime,
+									filename: sourceFilename,
+									chunkGraph,
+									contentHash
+								}
+							);
+						assetInfo = mergeAssetInfo(assetInfo, info);
+						filename = path.posix.join(outputPath, filename);
+					}
 					module.buildInfo.filename = filename;
 					module.buildInfo.assetInfo = assetInfo;
 					if (getData) {
@@ -264,9 +345,7 @@ class AssetGenerator extends Generator {
 					}
 
 					return new RawSource(
-						`${
-							RuntimeGlobals.module
-						}.exports = ${publicPath} + ${JSON.stringify(filename)};`
+						`${RuntimeGlobals.module}.exports = ${assetPath};`
 					);
 				}
 			}
@@ -326,8 +405,59 @@ class AssetGenerator extends Generator {
 	 * @param {Hash} hash hash that will be modified
 	 * @param {UpdateHashContext} updateHashContext context for updating hash
 	 */
-	updateHash(hash, { module }) {
-		hash.update(module.buildInfo.dataUrl ? "data-url" : "resource");
+	updateHash(hash, { module, runtime, runtimeTemplate, chunkGraph }) {
+		if (module.buildInfo.dataUrl) {
+			hash.update("data-url");
+			// this.dataUrlOptions as function should be pure and only depend on input source and filename
+			// therefore it doesn't need to be hashed
+			if (typeof this.dataUrlOptions === "function") {
+				const ident = /** @type {{ ident?: string }} */ (this.dataUrlOptions)
+					.ident;
+				if (ident) hash.update(ident);
+			} else {
+				if (
+					this.dataUrlOptions.encoding &&
+					this.dataUrlOptions.encoding !== DEFAULT_ENCODING
+				) {
+					hash.update(this.dataUrlOptions.encoding);
+				}
+				if (this.dataUrlOptions.mimetype)
+					hash.update(this.dataUrlOptions.mimetype);
+				// computed mimetype depends only on module filename which is already part of the hash
+			}
+		} else {
+			hash.update("resource");
+
+			const pathData = {
+				module,
+				runtime,
+				filename: this.getSourceFileName(module, runtimeTemplate),
+				chunkGraph,
+				contentHash: runtimeTemplate.contentHashReplacement
+			};
+
+			if (typeof this.publicPath === "function") {
+				hash.update("path");
+				const assetInfo = {};
+				hash.update(this.publicPath(pathData, assetInfo));
+				hash.update(JSON.stringify(assetInfo));
+			} else if (this.publicPath) {
+				hash.update("path");
+				hash.update(this.publicPath);
+			} else {
+				hash.update("no-path");
+			}
+
+			const assetModuleFilename =
+				this.filename || runtimeTemplate.outputOptions.assetModuleFilename;
+			const { path: filename, info } =
+				runtimeTemplate.compilation.getAssetPathWithInfo(
+					assetModuleFilename,
+					pathData
+				);
+			hash.update(filename);
+			hash.update(JSON.stringify(info));
+		}
 	}
 }
 

package/lib/asset/AssetModulesPlugin.js

@@ -137,9 +137,11 @@ class AssetModulesPlugin {
 
 							let filename = undefined;
 							let publicPath = undefined;
+							let outputPath = undefined;
 							if (type !== "asset/inline") {
 								filename = generatorOptions.filename;
 								publicPath = generatorOptions.publicPath;
+								outputPath = generatorOptions.outputPath;
 							}
 
 							const AssetGenerator = getAssetGenerator();
@@ -148,6 +150,7 @@ class AssetModulesPlugin {
 								dataUrl,
 								filename,
 								publicPath,
+								outputPath,
 								generatorOptions.emit !== false
 							);
 						});

package/lib/asset/RawDataUrlModule.js

@@ -0,0 +1,148 @@
+/*
+	MIT License http://www.opensource.org/licenses/mit-license.php
+	Author Tobias Koppers @sokra
+*/
+
+"use strict";
+
+const { RawSource } = require("webpack-sources");
+const Module = require("../Module");
+const RuntimeGlobals = require("../RuntimeGlobals");
+const makeSerializable = require("../util/makeSerializable");
+
+/** @typedef {import("../../declarations/WebpackOptions").WebpackOptionsNormalized} WebpackOptions */
+/** @typedef {import("../Compilation")} Compilation */
+/** @typedef {import("../Dependency").UpdateHashContext} UpdateHashContext */
+/** @typedef {import("../Module").CodeGenerationContext} CodeGenerationContext */
+/** @typedef {import("../Module").CodeGenerationResult} CodeGenerationResult */
+/** @typedef {import("../Module").NeedBuildContext} NeedBuildContext */
+/** @typedef {import("../RequestShortener")} RequestShortener */
+/** @typedef {import("../ResolverFactory").ResolverWithOptions} ResolverWithOptions */
+/** @typedef {import("../WebpackError")} WebpackError */
+/** @typedef {import("../util/Hash")} Hash */
+/** @typedef {import("../util/fs").InputFileSystem} InputFileSystem */
+
+const TYPES = new Set(["javascript"]);
+
+class RawDataUrlModule extends Module {
+	/**
+	 * @param {string} url raw url
+	 * @param {string} identifier unique identifier
+	 * @param {string=} readableIdentifier readable identifier
+	 */
+	constructor(url, identifier, readableIdentifier) {
+		super("asset/raw-data-url", null);
+		this.url = url;
+		this.urlBuffer = url ? Buffer.from(url) : undefined;
+		this.identifierStr = identifier || this.url;
+		this.readableIdentifierStr = readableIdentifier || this.identifierStr;
+	}
+
+	/**
+	 * @returns {Set<string>} types available (do not mutate)
+	 */
+	getSourceTypes() {
+		return TYPES;
+	}
+
+	/**
+	 * @returns {string} a unique identifier of the module
+	 */
+	identifier() {
+		return this.identifierStr;
+	}
+
+	/**
+	 * @param {string=} type the source type for which the size should be estimated
+	 * @returns {number} the estimated size of the module (must be non-zero)
+	 */
+	size(type) {
+		if (this.url === undefined) this.url = this.urlBuffer.toString();
+		return Math.max(1, this.url.length);
+	}
+
+	/**
+	 * @param {RequestShortener} requestShortener the request shortener
+	 * @returns {string} a user readable identifier of the module
+	 */
+	readableIdentifier(requestShortener) {
+		return requestShortener.shorten(this.readableIdentifierStr);
+	}
+
+	/**
+	 * @param {NeedBuildContext} context context info
+	 * @param {function((WebpackError | null)=, boolean=): void} callback callback function, returns true, if the module needs a rebuild
+	 * @returns {void}
+	 */
+	needBuild(context, callback) {
+		return callback(null, !this.buildMeta);
+	}
+
+	/**
+	 * @param {WebpackOptions} options webpack options
+	 * @param {Compilation} compilation the compilation
+	 * @param {ResolverWithOptions} resolver the resolver
+	 * @param {InputFileSystem} fs the file system
+	 * @param {function(WebpackError=): void} callback callback function
+	 * @returns {void}
+	 */
+	build(options, compilation, resolver, fs, callback) {
+		this.buildMeta = {};
+		this.buildInfo = {
+			cacheable: true
+		};
+		callback();
+	}
+
+	/**
+	 * @param {CodeGenerationContext} context context for code generation
+	 * @returns {CodeGenerationResult} result
+	 */
+	codeGeneration(context) {
+		if (this.url === undefined) this.url = this.urlBuffer.toString();
+		const sources = new Map();
+		sources.set(
+			"javascript",
+			new RawSource(`module.exports = ${JSON.stringify(this.url)};`)
+		);
+		const data = new Map();
+		data.set("url", this.urlBuffer);
+		const runtimeRequirements = new Set();
+		runtimeRequirements.add(RuntimeGlobals.module);
+		return { sources, runtimeRequirements, data };
+	}
+
+	/**
+	 * @param {Hash} hash the hash used to track dependencies
+	 * @param {UpdateHashContext} context context
+	 * @returns {void}
+	 */
+	updateHash(hash, context) {
+		hash.update(this.urlBuffer);
+		super.updateHash(hash, context);
+	}
+
+	serialize(context) {
+		const { write } = context;
+
+		write(this.urlBuffer);
+		write(this.identifierStr);
+		write(this.readableIdentifierStr);
+
+		super.serialize(context);
+	}
+
+	deserialize(context) {
+		const { read } = context;
+
+		this.urlBuffer = read();
+		this.identifierStr = read();
+		this.readableIdentifierStr = read();
+
+		super.deserialize(context);
+	}
+}
+
+makeSerializable(RawDataUrlModule, "webpack/lib/asset/RawDataUrlModule");
+
+module.exports = RawDataUrlModule;

package/lib/async-modules/AwaitDependenciesInitFragment.js

@@ -30,8 +30,8 @@ class AwaitDependenciesInitFragment extends InitFragment {
 	}
 
 	merge(other) {
-		const promises = new Set(this.promises);
-		for (const p of other.promises) {
+		const promises = new Set(other.promises);
+		for (const p of this.promises) {
 			promises.add(p);
 		}
 		return new AwaitDependenciesInitFragment(promises);
@@ -51,7 +51,7 @@ class AwaitDependenciesInitFragment extends InitFragment {
 			for (const p of promises) {
 				return Template.asString([
 					`var __webpack_async_dependencies__ = __webpack_handle_async_dependencies__([${p}]);`,
-					`${p} = (__webpack_async_dependencies__.then ? await __webpack_async_dependencies__ : __webpack_async_dependencies__)[0];`,
+					`${p} = (__webpack_async_dependencies__.then ? (await __webpack_async_dependencies__)() : __webpack_async_dependencies__)[0];`,
 					""
 				]);
 			}
@@ -60,7 +60,7 @@ class AwaitDependenciesInitFragment extends InitFragment {
 		// TODO check if destructuring is supported
 		return Template.asString([
 			`var __webpack_async_dependencies__ = __webpack_handle_async_dependencies__([${sepPromises}]);`,
-			`([${sepPromises}] = __webpack_async_dependencies__.then ? await __webpack_async_dependencies__ : __webpack_async_dependencies__);`,
+			`([${sepPromises}] = __webpack_async_dependencies__.then ? (await __webpack_async_dependencies__)() : __webpack_async_dependencies__);`,
 			""
 		]);
 	}

package/lib/buildChunkGraph.js

@@ -50,6 +50,8 @@ const { getEntryRuntime, mergeRuntime } = require("./util/runtime");
  * @property {Set<ChunkGroupInfo>} availableChildren set of chunk groups which depend on the this chunk group as availableSource
  * @property {number} preOrderIndex next pre order index
  * @property {number} postOrderIndex next post order index
+ * @property {boolean} chunkLoading has a chunk loading mechanism
+ * @property {boolean} asyncChunks create async chunks
  */
 
 /**
@@ -304,7 +306,15 @@ const visitModules = (
 			availableSources: undefined,
 			availableChildren: undefined,
 			preOrderIndex: 0,
-			postOrderIndex: 0
+			postOrderIndex: 0,
+			chunkLoading:
+				chunkGroup.options.chunkLoading !== undefined
+					? chunkGroup.options.chunkLoading !== false
+					: compilation.outputOptions.chunkLoading !== false,
+			asyncChunks:
+				chunkGroup.options.asyncChunks !== undefined
+					? chunkGroup.options.asyncChunks
+					: compilation.outputOptions.asyncChunks !== false
 		};
 		chunkGroup.index = nextChunkGroupIndex++;
 		if (chunkGroup.getNumberOfParents() > 0) {
@@ -418,7 +428,15 @@ const visitModules = (
 						availableSources: undefined,
 						availableChildren: undefined,
 						preOrderIndex: 0,
-						postOrderIndex: 0
+						postOrderIndex: 0,
+						chunkLoading:
+							entryOptions.chunkLoading !== undefined
+								? entryOptions.chunkLoading !== false
+								: chunkGroupInfo.chunkLoading,
+						asyncChunks:
+							entryOptions.asyncChunks !== undefined
+								? entryOptions.asyncChunks
+								: chunkGroupInfo.asyncChunks
 					};
 					chunkGroupInfoMap.set(entrypoint, cgi);
 
@@ -442,8 +460,18 @@ const visitModules = (
 					chunkGroup: entrypoint,
 					chunkGroupInfo: cgi
 				});
+			} else if (!chunkGroupInfo.asyncChunks || !chunkGroupInfo.chunkLoading) {
+				// Just queue the block into the current chunk group
+				queue.push({
+					action: PROCESS_BLOCK,
+					block: b,
+					module: module,
+					chunk,
+					chunkGroup,
+					chunkGroupInfo
+				});
 			} else {
-				cgi = namedChunkGroups.get(chunkName);
+				cgi = chunkName && namedChunkGroups.get(chunkName);
 				if (!cgi) {
 					c = compilation.addChunkInGroup(
 						b.groupOptions || b.chunkName,
@@ -464,7 +492,9 @@ const visitModules = (
 						availableSources: undefined,
 						availableChildren: undefined,
 						preOrderIndex: 0,
-						postOrderIndex: 0
+						postOrderIndex: 0,
+						chunkLoading: chunkGroupInfo.chunkLoading,
+						asyncChunks: chunkGroupInfo.asyncChunks
 					};
 					allCreatedChunkGroups.add(c);
 					chunkGroupInfoMap.set(c, cgi);
@@ -518,7 +548,7 @@ const visitModules = (
 				chunkGroup: c,
 				chunkGroupInfo: cgi
 			});
-		} else {
+		} else if (entrypoint !== undefined) {
 			chunkGroupInfo.chunkGroup.addAsyncEntrypoint(entrypoint);
 		}
 	};
@@ -875,7 +905,7 @@ const visitModules = (
 										const module = it.value;
 										if (
 											availableModules.has(module) ||
-											availableModules.plus.has(m)
+											availableModules.plus.has(module)
 										) {
 											cachedMinAvailableModules.add(module);
 										}

package/lib/cache/PackFileCacheStrategy.js

@@ -782,7 +782,7 @@ class PackContent {
 			this.logger.time(timeMessage);
 		}
 		const value = this.lazy();
-		if (value instanceof Promise) {
+		if ("then" in value) {
 			return value.then(data => {
 				const map = data.map;
 				if (timeMessage) {
@@ -830,7 +830,7 @@ class PackContent {
 				this.logger.time(timeMessage);
 			}
 			const value = this.lazy();
-			if (value instanceof Promise) {
+			if ("then" in value) {
 				return value.then(data => {
 					if (timeMessage) {
 						this.logger.timeEnd(timeMessage);
@@ -918,7 +918,7 @@ class PackContent {
 		}
 		const value = this.lazy();
 		this.outdated = false;
-		if (value instanceof Promise) {
+		if ("then" in value) {
 			// Move to state B1
 			this.lazy = write(() =>
 				value.then(data => {
@@ -991,7 +991,10 @@ class PackFileCacheStrategy {
 		allowCollectingMemory,
 		compression
 	}) {
-		this.fileSerializer = createFileSerializer(fs);
+		this.fileSerializer = createFileSerializer(
+			fs,
+			compiler.options.output.hashFunction
+		);
 		this.fileSystemInfo = new FileSystemInfo(fs, {
 			managedPaths: snapshot.managedPaths,
 			immutablePaths: snapshot.immutablePaths,