webpack 5.65.0 → 5.66.0

package/lib/CacheFacade.js

@@ -5,6 +5,7 @@
 
 "use strict";
 
+const { forEachBail } = require("enhanced-resolve");
 const asyncLib = require("neo-async");
 const getLazyHashedEtag = require("./cache/getLazyHashedEtag");
 const mergeEtags = require("./cache/mergeEtags");
@@ -46,15 +47,7 @@ class MultiItemCache {
 	 * @returns {void}
 	 */
 	get(callback) {
-		const next = i => {
-			this._items[i].get((err, result) => {
-				if (err) return callback(err);
-				if (result !== undefined) return callback(null, result);
-				if (++i >= this._items.length) return callback();
-				next(i);
-			});
-		};
-		next(0);
+		forEachBail(this._items, (item, callback) => item.get(callback), callback);
 	}
 
 	/**

package/lib/Chunk.js

@@ -80,6 +80,8 @@ class Chunk {
 		this.preventIntegration = false;
 		/** @type {(string | function(PathData, AssetInfo=): string)?} */
 		this.filenameTemplate = undefined;
+		/** @type {(string | function(PathData, AssetInfo=): string)?} */
+		this.cssFilenameTemplate = undefined;
 		/** @private @type {SortableSet<ChunkGroup>} */
 		this._groups = new SortableSet(undefined, compareChunkGroupsByIndex);
 		/** @type {RuntimeSpec} */

package/lib/Compilation.js

@@ -3193,47 +3193,87 @@ Or do you want to use the entrypoints '${name}' and '${runtime}' independently o
 			this;
 		const results = this.codeGenerationResults;
 		const errors = [];
-		asyncLib.eachLimit(
-			jobs,
-			this.options.parallelism,
-			({ module, hash, runtime, runtimes }, callback) => {
-				this._codeGenerationModule(
-					module,
-					runtime,
-					runtimes,
-					hash,
-					dependencyTemplates,
-					chunkGraph,
-					moduleGraph,
-					runtimeTemplate,
-					errors,
-					results,
-					(err, codeGenerated) => {
-						if (codeGenerated) statModulesGenerated++;
-						else statModulesFromCache++;
-						callback(err);
+		/** @type {Set<Module> | undefined} */
+		let notCodeGeneratedModules = undefined;
+		const runIteration = () => {
+			let delayedJobs = [];
+			let delayedModules = new Set();
+			asyncLib.eachLimit(
+				jobs,
+				this.options.parallelism,
+				(job, callback) => {
+					const { module } = job;
+					const { codeGenerationDependencies } = module;
+					if (codeGenerationDependencies !== undefined) {
+						if (
+							notCodeGeneratedModules === undefined ||
+							codeGenerationDependencies.some(dep => {
+								const referencedModule = moduleGraph.getModule(dep);
+								return notCodeGeneratedModules.has(referencedModule);
+							})
+						) {
+							delayedJobs.push(job);
+							delayedModules.add(module);
+							return callback();
+						}
 					}
-				);
-			},
-			err => {
-				if (err) return callback(err);
-				if (errors.length > 0) {
-					errors.sort(
-						compareSelect(err => err.module, compareModulesByIdentifier)
+					const { hash, runtime, runtimes } = job;
+					this._codeGenerationModule(
+						module,
+						runtime,
+						runtimes,
+						hash,
+						dependencyTemplates,
+						chunkGraph,
+						moduleGraph,
+						runtimeTemplate,
+						errors,
+						results,
+						(err, codeGenerated) => {
+							if (codeGenerated) statModulesGenerated++;
+							else statModulesFromCache++;
+							callback(err);
+						}
 					);
-					for (const error of errors) {
-						this.errors.push(error);
+				},
+				err => {
+					if (err) return callback(err);
+					if (delayedJobs.length > 0) {
+						if (delayedJobs.length === jobs.length) {
+							return callback(
+								new Error(
+									`Unable to make progress during code generation because of circular code generation dependency: ${Array.from(
+										delayedModules,
+										m => m.identifier()
+									).join(", ")}`
+								)
+							);
+						}
+						jobs = delayedJobs;
+						delayedJobs = [];
+						notCodeGeneratedModules = delayedModules;
+						delayedModules = new Set();
+						return runIteration();
 					}
+					if (errors.length > 0) {
+						errors.sort(
+							compareSelect(err => err.module, compareModulesByIdentifier)
+						);
+						for (const error of errors) {
+							this.errors.push(error);
+						}
+					}
+					this.logger.log(
+						`${Math.round(
+							(100 * statModulesGenerated) /
+								(statModulesGenerated + statModulesFromCache)
+						)}% code generated (${statModulesGenerated} generated, ${statModulesFromCache} from cache)`
+					);
+					callback();
 				}
-				this.logger.log(
-					`${Math.round(
-						(100 * statModulesGenerated) /
-							(statModulesGenerated + statModulesFromCache)
-					)}% code generated (${statModulesGenerated} generated, ${statModulesFromCache} from cache)`
-				);
-				callback();
-			}
-		);
+			);
+		};
+		runIteration();
 	}
 
 	/**
@@ -3283,7 +3323,8 @@ Or do you want to use the entrypoints '${name}' and '${runtime}' independently o
 						moduleGraph,
 						dependencyTemplates,
 						runtimeTemplate,
-						runtime
+						runtime,
+						codeGenerationResults: results
 					});
 				} catch (err) {
 					errors.push(new CodeGenerationError(module, err));

package/lib/Dependency.js

@@ -172,6 +172,16 @@ class Dependency {
 		this._loc = loc;
 	}
 
+	setLoc(startLine, startColumn, endLine, endColumn) {
+		this._locSL = startLine;
+		this._locSC = startColumn;
+		this._locEL = endLine;
+		this._locEC = endColumn;
+		this._locI = undefined;
+		this._locN = undefined;
+		this._loc = undefined;
+	}
+
 	/**
 	 * @returns {string | null} an identifier to merge equal requests
 	 */

package/lib/DependencyTemplate.js

@@ -7,6 +7,7 @@
 
 /** @typedef {import("webpack-sources").ReplaceSource} ReplaceSource */
 /** @typedef {import("./ChunkGraph")} ChunkGraph */
+/** @typedef {import("./CodeGenerationResults")} CodeGenerationResults */
 /** @typedef {import("./ConcatenationScope")} ConcatenationScope */
 /** @typedef {import("./Dependency")} Dependency */
 /** @typedef {import("./Dependency").RuntimeSpec} RuntimeSpec */
@@ -28,8 +29,16 @@
  * @property {RuntimeSpec} runtime current runtimes, for which code is generated
  * @property {InitFragment<GenerateContext>[]} initFragments mutable array of init fragments for the current module
  * @property {ConcatenationScope=} concatenationScope when in a concatenated module, information about other concatenated modules
+ * @property {CodeGenerationResults} codeGenerationResults the code generation results
  */
 
+/**
+ * @typedef {Object} CssDependencyTemplateContextExtras
+ * @property {Map<string, string>} cssExports the css exports
+ */
+
+/** @typedef {DependencyTemplateContext & CssDependencyTemplateContextExtras} CssDependencyTemplateContext */
+
 class DependencyTemplate {
 	/* istanbul ignore next */
 	/**

package/lib/ExternalModule.js

@@ -53,6 +53,7 @@ const { register } = require("./util/serialization");
  */
 
 const TYPES = new Set(["javascript"]);
+const CSS_TYPES = new Set(["css-import"]);
 const RUNTIME_REQUIREMENTS = new Set([RuntimeGlobals.module]);
 const RUNTIME_REQUIREMENTS_FOR_SCRIPT = new Set([RuntimeGlobals.loadScript]);
 const RUNTIME_REQUIREMENTS_FOR_MODULE = new Set([
@@ -392,7 +393,7 @@ class ExternalModule extends Module {
 	 * @returns {Set<string>} types available (do not mutate)
 	 */
 	getSourceTypes() {
-		return TYPES;
+		return this.externalType === "css-import" ? CSS_TYPES : TYPES;
 	}
 
 	/**
@@ -409,7 +410,9 @@ class ExternalModule extends Module {
 	 * @returns {boolean} true, if the chunk is ok for the module
 	 */
 	chunkCondition(chunk, { chunkGraph }) {
-		return chunkGraph.getNumberOfEntryModules(chunk) > 0;
+		return this.externalType === "css-import"
+			? true
+			: chunkGraph.getNumberOfEntryModules(chunk) > 0;
 	}
 
 	/**
@@ -526,8 +529,14 @@ class ExternalModule extends Module {
 		return { request, externalType };
 	}
 
-	_getSourceData(runtimeTemplate, moduleGraph, chunkGraph, runtime) {
-		const { request, externalType } = this._getRequestAndExternalType();
+	_getSourceData(
+		request,
+		externalType,
+		runtimeTemplate,
+		moduleGraph,
+		chunkGraph,
+		runtime
+	) {
 		switch (externalType) {
 			case "this":
 			case "window":
@@ -541,6 +550,7 @@ class ExternalModule extends Module {
 			case "commonjs":
 			case "commonjs2":
 			case "commonjs-module":
+			case "commonjs-static":
 				return getSourceForCommonJsExternal(request);
 			case "node-commonjs":
 				return this.buildInfo.module
@@ -613,60 +623,90 @@ class ExternalModule extends Module {
 		runtime,
 		concatenationScope
 	}) {
-		const sourceData = this._getSourceData(
-			runtimeTemplate,
-			moduleGraph,
-			chunkGraph,
-			runtime
-		);
+		const { request, externalType } = this._getRequestAndExternalType();
+		switch (externalType) {
+			case "asset": {
+				const sources = new Map();
+				sources.set(
+					"javascript",
+					new RawSource(`module.exports = ${JSON.stringify(request)};`)
+				);
+				const data = new Map();
+				data.set("url", request);
+				return { sources, runtimeRequirements: RUNTIME_REQUIREMENTS, data };
+			}
+			case "css-import": {
+				const sources = new Map();
+				sources.set(
+					"css-import",
+					new RawSource(`@import url(${JSON.stringify(request)});`)
+				);
+				return {
+					sources,
+					runtimeRequirements: EMPTY_RUNTIME_REQUIREMENTS
+				};
+			}
+			default: {
+				const sourceData = this._getSourceData(
+					request,
+					externalType,
+					runtimeTemplate,
+					moduleGraph,
+					chunkGraph,
+					runtime
+				);
 
-		let sourceString = sourceData.expression;
-		if (sourceData.iife)
-			sourceString = `(function() { return ${sourceString}; }())`;
-		if (concatenationScope) {
-			sourceString = `${runtimeTemplate.supportsConst() ? "const" : "var"} ${
-				ConcatenationScope.NAMESPACE_OBJECT_EXPORT
-			} = ${sourceString};`;
-			concatenationScope.registerNamespaceExport(
-				ConcatenationScope.NAMESPACE_OBJECT_EXPORT
-			);
-		} else {
-			sourceString = `module.exports = ${sourceString};`;
-		}
-		if (sourceData.init) sourceString = `${sourceData.init}\n${sourceString}`;
+				let sourceString = sourceData.expression;
+				if (sourceData.iife)
+					sourceString = `(function() { return ${sourceString}; }())`;
+				if (concatenationScope) {
+					sourceString = `${
+						runtimeTemplate.supportsConst() ? "const" : "var"
+					} ${ConcatenationScope.NAMESPACE_OBJECT_EXPORT} = ${sourceString};`;
+					concatenationScope.registerNamespaceExport(
+						ConcatenationScope.NAMESPACE_OBJECT_EXPORT
+					);
+				} else {
+					sourceString = `module.exports = ${sourceString};`;
+				}
+				if (sourceData.init)
+					sourceString = `${sourceData.init}\n${sourceString}`;
 
-		let data = undefined;
-		if (sourceData.chunkInitFragments) {
-			data = new Map();
-			data.set("chunkInitFragments", sourceData.chunkInitFragments);
-		}
+				let data = undefined;
+				if (sourceData.chunkInitFragments) {
+					data = new Map();
+					data.set("chunkInitFragments", sourceData.chunkInitFragments);
+				}
 
-		const sources = new Map();
-		if (this.useSourceMap || this.useSimpleSourceMap) {
-			sources.set(
-				"javascript",
-				new OriginalSource(sourceString, this.identifier())
-			);
-		} else {
-			sources.set("javascript", new RawSource(sourceString));
-		}
+				const sources = new Map();
+				if (this.useSourceMap || this.useSimpleSourceMap) {
+					sources.set(
+						"javascript",
+						new OriginalSource(sourceString, this.identifier())
+					);
+				} else {
+					sources.set("javascript", new RawSource(sourceString));
+				}
+
+				let runtimeRequirements = sourceData.runtimeRequirements;
+				if (!concatenationScope) {
+					if (!runtimeRequirements) {
+						runtimeRequirements = RUNTIME_REQUIREMENTS;
+					} else {
+						const set = new Set(runtimeRequirements);
+						set.add(RuntimeGlobals.module);
+						runtimeRequirements = set;
+					}
+				}
 
-		let runtimeRequirements = sourceData.runtimeRequirements;
-		if (!concatenationScope) {
-			if (!runtimeRequirements) {
-				runtimeRequirements = RUNTIME_REQUIREMENTS;
-			} else {
-				const set = new Set(runtimeRequirements);
-				set.add(RuntimeGlobals.module);
-				runtimeRequirements = set;
+				return {
+					sources,
+					runtimeRequirements:
+						runtimeRequirements || EMPTY_RUNTIME_REQUIREMENTS,
+					data
+				};
 			}
 		}
-
-		return {
-			sources,
-			runtimeRequirements: runtimeRequirements || EMPTY_RUNTIME_REQUIREMENTS,
-			data
-		};
 	}
 
 	/**

package/lib/Generator.js

@@ -7,6 +7,7 @@
 
 /** @typedef {import("webpack-sources").Source} Source */
 /** @typedef {import("./ChunkGraph")} ChunkGraph */
+/** @typedef {import("./CodeGenerationResults")} CodeGenerationResults */
 /** @typedef {import("./Compilation")} Compilation */
 /** @typedef {import("./ConcatenationScope")} ConcatenationScope */
 /** @typedef {import("./DependencyTemplate")} DependencyTemplate */
@@ -27,6 +28,7 @@
  * @property {Set<string>} runtimeRequirements the requirements for runtime
  * @property {RuntimeSpec} runtime the runtime
  * @property {ConcatenationScope=} concatenationScope when in concatenated module, information about other concatenated modules
+ * @property {CodeGenerationResults=} codeGenerationResults code generation results of other modules (need to have a codeGenerationDependency to use that)
  * @property {string} type which kind of code should be generated
  * @property {function(): Map<string, any>=} getData get access to the code generation data
  */

package/lib/Module.js

@@ -19,6 +19,7 @@ const makeSerializable = require("./util/makeSerializable");
 /** @typedef {import("../declarations/WebpackOptions").WebpackOptionsNormalized} WebpackOptions */
 /** @typedef {import("./Chunk")} Chunk */
 /** @typedef {import("./ChunkGroup")} ChunkGroup */
+/** @typedef {import("./CodeGenerationResults")} CodeGenerationResults */
 /** @typedef {import("./Compilation")} Compilation */
 /** @typedef {import("./ConcatenationScope")} ConcatenationScope */
 /** @typedef {import("./Dependency")} Dependency */
@@ -56,6 +57,7 @@ const makeSerializable = require("./util/makeSerializable");
  * @property {ChunkGraph} chunkGraph the chunk graph
  * @property {RuntimeSpec} runtime the runtimes code should be generated for
  * @property {ConcatenationScope=} concatenationScope when in concatenated module, information about other concatenated modules
+ * @property {CodeGenerationResults} codeGenerationResults code generation results of other modules (need to have a codeGenerationDependency to use that)
  */
 
 /**
@@ -165,6 +167,8 @@ class Module extends DependenciesBlock {
 		this.buildInfo = undefined;
 		/** @type {Dependency[] | undefined} */
 		this.presentationalDependencies = undefined;
+		/** @type {Dependency[] | undefined} */
+		this.codeGenerationDependencies = undefined;
 	}
 
 	// TODO remove in webpack 6
@@ -493,6 +497,19 @@ class Module extends DependenciesBlock {
 		this.presentationalDependencies.push(presentationalDependency);
 	}
 
+	/**
+	 * @param {Dependency} codeGenerationDependency dependency being tied to module.
+	 * This is a Dependency where the code generation result of the referenced module is needed during code generation.
+	 * The Dependency should also be added to normal dependencies via addDependency.
+	 * @returns {void}
+	 */
+	addCodeGenerationDependency(codeGenerationDependency) {
+		if (this.codeGenerationDependencies === undefined) {
+			this.codeGenerationDependencies = [];
+		}
+		this.codeGenerationDependencies.push(codeGenerationDependency);
+	}
+
 	/**
 	 * Removes all dependencies and blocks
 	 * @returns {void}
@@ -501,6 +518,9 @@ class Module extends DependenciesBlock {
 		if (this.presentationalDependencies !== undefined) {
 			this.presentationalDependencies.length = 0;
 		}
+		if (this.codeGenerationDependencies !== undefined) {
+			this.codeGenerationDependencies.length = 0;
+		}
 		super.clearDependenciesAndBlocks();
 	}
 
@@ -799,7 +819,8 @@ class Module extends DependenciesBlock {
 			runtimeTemplate,
 			moduleGraph: chunkGraph.moduleGraph,
 			chunkGraph,
-			runtime: undefined
+			runtime: undefined,
+			codeGenerationResults: undefined
 		};
 		const sources = this.codeGeneration(codeGenContext).sources;
 		return type ? sources.get(type) : sources.get(first(this.getSourceTypes()));
@@ -976,6 +997,7 @@ class Module extends DependenciesBlock {
 		write(this.buildMeta);
 		write(this.buildInfo);
 		write(this.presentationalDependencies);
+		write(this.codeGenerationDependencies);
 		super.serialize(context);
 	}
 
@@ -993,6 +1015,7 @@ class Module extends DependenciesBlock {
 		this.buildMeta = read();
 		this.buildInfo = read();
 		this.presentationalDependencies = read();
+		this.codeGenerationDependencies = read();
 		super.deserialize(context);
 	}
 }

package/lib/ModuleFilenameHelpers.js

@@ -5,6 +5,7 @@
 
 "use strict";
 
+const NormalModule = require("./NormalModule");
 const createHash = require("./util/createHash");
 const memoize = require("./util/memoize");
 
@@ -138,7 +139,10 @@ ModuleFilenameHelpers.createFilename = (
 		);
 		identifier = memoize(() => requestShortener.shorten(module.identifier()));
 		moduleId = () => chunkGraph.getModuleId(module);
-		absoluteResourcePath = () => module.identifier().split("!").pop();
+		absoluteResourcePath = () =>
+			module instanceof NormalModule
+				? module.resource
+				: module.identifier().split("!").pop();
 		hash = getHash(identifier, hashFunction);
 	}
 	const resource = memoize(() => shortIdentifier().split("!").pop());

package/lib/NormalModule.js

@@ -1168,7 +1168,8 @@ class NormalModule extends Module {
 		moduleGraph,
 		chunkGraph,
 		runtime,
-		concatenationScope
+		concatenationScope,
+		codeGenerationResults
 	}) {
 		/** @type {Set<string>} */
 		const runtimeRequirements = new Set();
@@ -1200,6 +1201,7 @@ class NormalModule extends Module {
 						runtimeRequirements,
 						runtime,
 						concatenationScope,
+						codeGenerationResults,
 						getData,
 						type
 				  });

package/lib/RuntimeGlobals.js

@@ -164,7 +164,7 @@ exports.scriptNonce = "__webpack_require__.nc";
  * function to load a script tag.
  * Arguments: (url: string, done: (event) => void), key?: string | number, chunkId?: string | number) => void
  * done function is called when loading has finished or timeout occurred.
- * It will attach to existing script tags with data-webpack == key or src == url.
+ * It will attach to existing script tags with data-webpack == uniqueName + ":" + key or src == url.
  */
 exports.loadScript = "__webpack_require__.l";
 
@@ -190,11 +190,21 @@ exports.runtimeId = "__webpack_require__.j";
  */
 exports.getChunkScriptFilename = "__webpack_require__.u";
 
+/**
+ * the filename of the css part of the chunk
+ */
+exports.getChunkCssFilename = "__webpack_require__.k";
+
 /**
  * the filename of the script part of the hot update chunk
  */
 exports.getChunkUpdateScriptFilename = "__webpack_require__.hu";
 
+/**
+ * the filename of the css part of the hot update chunk
+ */
+exports.getChunkUpdateCssFilename = "__webpack_require__.hk";
+
 /**
  * startup signal from runtime
  * This will be called when the runtime chunk has been loaded.

package/lib/RuntimePlugin.js

@@ -261,6 +261,31 @@ class RuntimePlugin {
 					);
 					return true;
 				});
+			compilation.hooks.runtimeRequirementInTree
+				.for(RuntimeGlobals.getChunkCssFilename)
+				.tap("RuntimePlugin", (chunk, set) => {
+					if (
+						typeof compilation.outputOptions.cssChunkFilename === "string" &&
+						/\[(full)?hash(:\d+)?\]/.test(
+							compilation.outputOptions.cssChunkFilename
+						)
+					) {
+						set.add(RuntimeGlobals.getFullHash);
+					}
+					compilation.addRuntimeModule(
+						chunk,
+						new GetChunkFilenameRuntimeModule(
+							"css",
+							"css",
+							RuntimeGlobals.getChunkCssFilename,
+							chunk =>
+								chunk.cssFilenameTemplate ||
+								compilation.outputOptions.cssChunkFilename,
+							false
+						)
+					);
+					return true;
+				});
 			compilation.hooks.runtimeRequirementInTree
 				.for(RuntimeGlobals.getChunkUpdateScriptFilename)
 				.tap("RuntimePlugin", (chunk, set) => {

package/lib/RuntimeTemplate.js

@@ -16,6 +16,7 @@ const { forEachRuntime, subtractRuntime } = require("./util/runtime");
 /** @typedef {import("../declarations/WebpackOptions").OutputNormalized} OutputOptions */
 /** @typedef {import("./AsyncDependenciesBlock")} AsyncDependenciesBlock */
 /** @typedef {import("./ChunkGraph")} ChunkGraph */
+/** @typedef {import("./CodeGenerationResults")} CodeGenerationResults */
 /** @typedef {import("./Compilation")} Compilation */
 /** @typedef {import("./Dependency")} Dependency */
 /** @typedef {import("./Module")} Module */
@@ -1014,6 +1015,26 @@ class RuntimeTemplate {
 		runtimeRequirements.add(RuntimeGlobals.exports);
 		return `${RuntimeGlobals.makeNamespaceObject}(${exportsArgument});\n`;
 	}
+
+	/**
+	 * @param {Object} options options object
+	 * @param {Module} options.module the module
+	 * @param {string} options.publicPath the public path
+	 * @param {RuntimeSpec=} options.runtime runtime
+	 * @param {CodeGenerationResults} options.codeGenerationResults the code generation results
+	 * @returns {string} the url of the asset
+	 */
+	assetUrl({ publicPath, runtime, module, codeGenerationResults }) {
+		if (!module) {
+			return "data:,";
+		}
+		const codeGen = codeGenerationResults.get(module, runtime);
+		const { data } = codeGen;
+		const url = data.get("url");
+		if (url) return url;
+		const filename = data.get("filename");
+		return publicPath + filename;
+	}
 }
 
 module.exports = RuntimeTemplate;

package/lib/Template.js

@@ -370,7 +370,8 @@ class Template {
 					dependencyTemplates: renderContext.dependencyTemplates,
 					moduleGraph: renderContext.moduleGraph,
 					runtimeTemplate: renderContext.runtimeTemplate,
-					runtime: renderContext.chunk.runtime
+					runtime: renderContext.chunk.runtime,
+					codeGenerationResults
 				});
 				if (!codeGenResult) continue;
 				runtimeSource = codeGenResult.sources.get("runtime");

package/lib/Watching.js

@@ -49,7 +49,7 @@ class Watching {
 			this.watchOptions = {};
 		}
 		if (typeof this.watchOptions.aggregateTimeout !== "number") {
-			this.watchOptions.aggregateTimeout = 200;
+			this.watchOptions.aggregateTimeout = 20;
 		}
 		this.compiler = compiler;
 		this.running = false;