webpack 5.65.0 → 5.69.0

package/README.md

@@ -687,7 +687,7 @@ src="https://static.monei.net/monei-logo.svg" height="30" alt="MONEI"></a>
 
 - [@google](https://github.com/google) for [Google Web Toolkit (GWT)](http://www.gwtproject.org/), which aims to compile Java to JavaScript. It features a similar [Code Splitting](http://www.gwtproject.org/doc/latest/DevGuideCodeSplitting.html) as webpack.
 - [@medikoo](https://github.com/medikoo) for [modules-webmake](https://github.com/medikoo/modules-webmake), which is a similar project. webpack was born because I wanted Code Splitting for modules-webmake. Interestingly the [Code Splitting issue is still open](https://github.com/medikoo/modules-webmake/issues/7) (thanks also to @Phoscur for the discussion).
-- [@substack](https://github.com/substack) for [browserify](http://browserify.org/), which is a similar project and source for many ideas.
+- [@substack](https://github.com/substack) for [browserify](https://browserify.org/), which is a similar project and source for many ideas.
 - [@jrburke](https://github.com/jrburke) for [require.js](https://requirejs.org/), which is a similar project and source for many ideas.
 - [@defunctzombie](https://github.com/defunctzombie) for the [browser-field spec](https://github.com/defunctzombie/package-browser-field-spec), which makes modules available for node.js, browserify and webpack.
 - Every early webpack user, which contributed to webpack by writing issues or PRs. You influenced the direction...

package/lib/APIPlugin.js

@@ -201,6 +201,39 @@ class APIPlugin {
 								)
 								.setRange(expr.range)
 						);
+
+					parser.hooks.expression
+						.for("__webpack_module__.id")
+						.tap("APIPlugin", expr => {
+							parser.state.module.buildInfo.moduleConcatenationBailout =
+								"__webpack_module__.id";
+							const dep = new ConstDependency(
+								parser.state.module.moduleArgument + ".id",
+								expr.range,
+								[RuntimeGlobals.moduleId]
+							);
+							dep.loc = expr.loc;
+							parser.state.module.addPresentationalDependency(dep);
+							return true;
+						});
+
+					parser.hooks.expression
+						.for("__webpack_module__")
+						.tap("APIPlugin", expr => {
+							parser.state.module.buildInfo.moduleConcatenationBailout =
+								"__webpack_module__";
+							const dep = new ConstDependency(
+								parser.state.module.moduleArgument,
+								expr.range,
+								[RuntimeGlobals.module]
+							);
+							dep.loc = expr.loc;
+							parser.state.module.addPresentationalDependency(dep);
+							return true;
+						});
+					parser.hooks.evaluateTypeof
+						.for("__webpack_module__")
+						.tap("APIPlugin", evaluateToString("object"));
 				};
 
 				normalModuleFactory.hooks.parser

package/lib/Cache.js

@@ -21,7 +21,7 @@ const {
 /**
  * @template T
  * @callback CallbackCache
- * @param {WebpackError=} err
+ * @param {(WebpackError | null)=} err
  * @param {T=} result
  * @returns {void}
  */

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");
@@ -18,7 +19,7 @@ const mergeEtags = require("./cache/mergeEtags");
 /**
  * @template T
  * @callback CallbackCache
- * @param {WebpackError=} err
+ * @param {(WebpackError | null)=} err
  * @param {T=} result
  * @returns {void}
  */
@@ -26,7 +27,7 @@ const mergeEtags = require("./cache/mergeEtags");
 /**
  * @template T
  * @callback CallbackNormalErrorCache
- * @param {Error=} err
+ * @param {(Error | null)=} err
  * @param {T=} result
  * @returns {void}
  */
@@ -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/ChunkGraph.js

@@ -46,6 +46,7 @@ const compareModuleIterables = compareIterables(compareModulesByIdentifier);
 
 /** @typedef {(c: Chunk, chunkGraph: ChunkGraph) => boolean} ChunkFilterPredicate */
 /** @typedef {(m: Module) => boolean} ModuleFilterPredicate */
+/** @typedef {[Module, Entrypoint | undefined]} EntryModuleWithChunkGroup */
 
 /**
  * @typedef {Object} ChunkSizeOptions
@@ -1180,8 +1181,6 @@ class ChunkGraph {
 		return cgc.dependentHashModules;
 	}
 
-	/** @typedef {[Module, Entrypoint | undefined]} EntryModuleWithChunkGroup */
-
 	/**
 	 * @param {Chunk} chunk the chunk
 	 * @returns {Iterable<EntryModuleWithChunkGroup>} iterable of modules (do not modify)

package/lib/CleanPlugin.js

@@ -45,7 +45,7 @@ const validate = createSchemaValidation(
  * @param {OutputFileSystem} fs filesystem
  * @param {string} outputPath output path
  * @param {Set<string>} currentAssets filename of the current assets (must not start with .. or ., must only use / as path separator)
- * @param {function(Error=, Set<string>=): void} callback returns the filenames of the assets that shouldn't be there
+ * @param {function((Error | null)=, Set<string>=): void} callback returns the filenames of the assets that shouldn't be there
  * @returns {void}
  */
 const getDiffToFs = (fs, outputPath, currentAssets, callback) => {

package/lib/Compilation.js

@@ -116,34 +116,34 @@ const { isSourceEqual } = require("./util/source");
 
 /**
  * @callback Callback
- * @param {WebpackError=} err
+ * @param {(WebpackError | null)=} err
  * @returns {void}
  */
 
 /**
  * @callback ModuleCallback
- * @param {WebpackError=} err
+ * @param {(WebpackError | null)=} err
  * @param {Module=} result
  * @returns {void}
  */
 
 /**
  * @callback ModuleFactoryResultCallback
- * @param {WebpackError=} err
+ * @param {(WebpackError | null)=} err
  * @param {ModuleFactoryResult=} result
  * @returns {void}
  */
 
 /**
  * @callback ModuleOrFactoryResultCallback
- * @param {WebpackError=} err
+ * @param {(WebpackError | null)=} err
  * @param {Module | ModuleFactoryResult=} result
  * @returns {void}
  */
 
 /**
  * @callback ExecuteModuleCallback
- * @param {WebpackError=} err
+ * @param {(WebpackError | null)=} err
  * @param {ExecuteModuleResult=} result
  * @returns {void}
  */
@@ -182,6 +182,7 @@ const { isSourceEqual } = require("./util/source");
 
 /**
  * @typedef {Object} ChunkHashContext
+ * @property {CodeGenerationResults} codeGenerationResults results of code generation
  * @property {RuntimeTemplate} runtimeTemplate the runtime template
  * @property {ModuleGraph} moduleGraph the module graph
  * @property {ChunkGraph} chunkGraph the chunk graph
@@ -1020,7 +1021,9 @@ BREAKING CHANGE: Asset processing hooks in Compilation has been merged into a si
 		/** @type {Map<DepConstructor, ModuleFactory>} */
 		this.dependencyFactories = new Map();
 		/** @type {DependencyTemplates} */
-		this.dependencyTemplates = new DependencyTemplates();
+		this.dependencyTemplates = new DependencyTemplates(
+			this.outputOptions.hashFunction
+		);
 		this.childrenCounters = {};
 		/** @type {Set<number|string>} */
 		this.usedChunkIds = null;
@@ -3193,47 +3196,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 +3326,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));
@@ -3512,10 +3556,11 @@ Or do you want to use the entrypoints '${name}' and '${runtime}' independently o
 	}
 
 	/**
+	 * If `module` is passed, `loc` and `request` must also be passed.
 	 * @param {string | ChunkGroupOptions} groupOptions options for the chunk group
-	 * @param {Module} module the module the references the chunk group
-	 * @param {DependencyLocation} loc the location from with the chunk group is referenced (inside of module)
-	 * @param {string} request the request from which the the chunk group is referenced
+	 * @param {Module=} module the module the references the chunk group
+	 * @param {DependencyLocation=} loc the location from with the chunk group is referenced (inside of module)
+	 * @param {string=} request the request from which the the chunk group is referenced
 	 * @returns {ChunkGroup} the new or existing chunk group
 	 */
 	addChunkInGroup(groupOptions, module, loc, request) {
@@ -4093,6 +4138,7 @@ This prevents using hashes of each other and should be avoided.`);
 				chunk.updateHash(chunkHash, chunkGraph);
 				this.hooks.chunkHash.call(chunk, chunkHash, {
 					chunkGraph,
+					codeGenerationResults: this.codeGenerationResults,
 					moduleGraph: this.moduleGraph,
 					runtimeTemplate: this.runtimeTemplate
 				});

package/lib/Compiler.js

@@ -58,13 +58,13 @@ const { isSourceEqual } = require("./util/source");
 /**
  * @template T
  * @callback Callback
- * @param {Error=} err
+ * @param {(Error | null)=} err
  * @param {T=} result
  */
 
 /**
  * @callback RunAsChildCallback
- * @param {Error=} err
+ * @param {(Error | null)=} err
  * @param {Chunk[]=} entries
  * @param {Compilation=} compilation
  */
@@ -165,6 +165,11 @@ class Compiler {
 			/** @type {AsyncSeriesHook<[Compilation]>} */
 			afterCompile: new AsyncSeriesHook(["compilation"]),
 
+			/** @type {AsyncSeriesHook<[]>} */
+			readRecords: new AsyncSeriesHook([]),
+			/** @type {AsyncSeriesHook<[]>} */
+			emitRecords: new AsyncSeriesHook([]),
+
 			/** @type {AsyncSeriesHook<[Compiler]>} */
 			watchRun: new AsyncSeriesHook(["compiler"]),
 			/** @type {SyncHook<[Error]>} */
@@ -882,8 +887,32 @@ ${other}`);
 	 * @returns {void}
 	 */
 	emitRecords(callback) {
-		if (!this.recordsOutputPath) return callback();
+		if (this.hooks.emitRecords.isUsed()) {
+			if (this.recordsOutputPath) {
+				asyncLib.parallel(
+					[
+						cb => this.hooks.emitRecords.callAsync(cb),
+						this._emitRecords.bind(this)
+					],
+					err => callback(err)
+				);
+			} else {
+				this.hooks.emitRecords.callAsync(callback);
+			}
+		} else {
+			if (this.recordsOutputPath) {
+				this._emitRecords(callback);
+			} else {
+				callback();
+			}
+		}
+	}
 
+	/**
+	 * @param {Callback<void>} callback signals when the call finishes
+	 * @returns {void}
+	 */
+	_emitRecords(callback) {
 		const writeFile = () => {
 			this.outputFileSystem.writeFile(
 				this.recordsOutputPath,
@@ -926,6 +955,31 @@ ${other}`);
 	 * @returns {void}
 	 */
 	readRecords(callback) {
+		if (this.hooks.readRecords.isUsed()) {
+			if (this.recordsInputPath) {
+				asyncLib.parallel([
+					cb => this.hooks.readRecords.callAsync(cb),
+					this._readRecords.bind(this)
+				]);
+			} else {
+				this.records = {};
+				this.hooks.readRecords.callAsync(callback);
+			}
+		} else {
+			if (this.recordsInputPath) {
+				this._readRecords(callback);
+			} else {
+				this.records = {};
+				callback();
+			}
+		}
+	}
+
+	/**
+	 * @param {Callback<void>} callback signals when the call finishes
+	 * @returns {void}
+	 */
+	_readRecords(callback) {
 		if (!this.recordsInputPath) {
 			this.records = {};
 			return callback();