webpack 5.82.0 → 5.82.1

package/lib/Compilation.js

@@ -49,6 +49,7 @@ const ModuleProfile = require("./ModuleProfile");
 const ModuleRestoreError = require("./ModuleRestoreError");
 const ModuleStoreError = require("./ModuleStoreError");
 const ModuleTemplate = require("./ModuleTemplate");
+const { WEBPACK_MODULE_TYPE_RUNTIME } = require("./ModuleTypeConstants");
 const RuntimeGlobals = require("./RuntimeGlobals");
 const RuntimeTemplate = require("./RuntimeTemplate");
 const Stats = require("./Stats");
@@ -5121,7 +5122,7 @@ This prevents using hashes of each other and should be avoided.`);
 		const usedIds = new Set();
 
 		for (const module of this.modules) {
-			if (module.type === "runtime") continue;
+			if (module.type === WEBPACK_MODULE_TYPE_RUNTIME) continue;
 			const moduleId = chunkGraph.getModuleId(module);
 			if (moduleId === null) continue;
 			if (usedIds.has(moduleId)) {

package/lib/DependenciesBlock.js

@@ -18,6 +18,14 @@ const makeSerializable = require("./util/makeSerializable");
 
 /** @typedef {(d: Dependency) => boolean} DependencyFilterFunction */
 
+/**
+ * DependenciesBlock is the base class for all Module classes in webpack. It describes a
+ * "block" of dependencies which are pointers to other DependenciesBlock instances. For example
+ * when a Module has a CommonJs require statement, the DependencyBlock for the CommonJs module
+ * would be added as a dependency to the Module. DependenciesBlock is inherited by two types of classes:
+ * Module subclasses and AsyncDependenciesBlock subclasses. The only difference between the two is that
+ * AsyncDependenciesBlock subclasses are used for code-splitting (async boundary) and Module subclasses are not.
+ */
 class DependenciesBlock {
 	constructor() {
 		/** @type {Dependency[]} */

package/lib/FileSystemInfo.js

@@ -1464,7 +1464,7 @@ class FileSystemInfo {
 						push({
 							type: RBDT_DIRECTORY,
 							context: undefined,
-							path: resultPath,
+							path: /** @type {string} */ (resultPath),
 							expected: undefined,
 							issuer: job
 						});

package/lib/HotModuleReplacementPlugin.js

@@ -38,7 +38,8 @@ const {
 const {
 	JAVASCRIPT_MODULE_TYPE_AUTO,
 	JAVASCRIPT_MODULE_TYPE_DYNAMIC,
-	JAVASCRIPT_MODULE_TYPE_ESM
+	JAVASCRIPT_MODULE_TYPE_ESM,
+	WEBPACK_MODULE_TYPE_RUNTIME
 } = require("./ModuleTypeConstants");
 
 /** @typedef {import("./Chunk")} Chunk */
@@ -564,7 +565,7 @@ class HotModuleReplacementPlugin {
 													newRuntime
 											  );
 										if (hash !== oldHash) {
-											if (module.type === "runtime") {
+											if (module.type === WEBPACK_MODULE_TYPE_RUNTIME) {
 												newRuntimeModules = newRuntimeModules || [];
 												newRuntimeModules.push(
 													/** @type {RuntimeModule} */ (module)

package/lib/Module.js

@@ -28,6 +28,7 @@ const makeSerializable = require("./util/makeSerializable");
 /** @typedef {import("./ExportsInfo").UsageStateType} UsageStateType */
 /** @typedef {import("./FileSystemInfo")} FileSystemInfo */
 /** @typedef {import("./ModuleGraphConnection").ConnectionState} ConnectionState */
+/** @typedef {import("./ModuleTypeConstants").ModuleTypes} ModuleTypes */
 /** @typedef {import("./NormalModuleFactory")} NormalModuleFactory */
 /** @typedef {import("./RequestShortener")} RequestShortener */
 /** @typedef {import("./ResolverFactory").ResolverWithOptions} ResolverWithOptions */
@@ -129,14 +130,14 @@ const deprecatedNeedRebuild = util.deprecate(
 
 class Module extends DependenciesBlock {
 	/**
-	 * @param {string} type the module type
+	 * @param {ModuleTypes | ""} type the module type, when deserializing the type is not known and is an empty string
 	 * @param {string=} context an optional context
 	 * @param {string=} layer an optional layer in which the module is
 	 */
 	constructor(type, context = null, layer = null) {
 		super();
 
-		/** @type {string} */
+		/** @type {ModuleTypes | ""} */
 		this.type = type;
 		/** @type {string | null} */
 		this.context = context;

package/lib/ModuleTypeConstants.js

@@ -60,6 +60,88 @@ const CSS_MODULE_TYPE_GLOBAL = "css/global";
  */
 const CSS_MODULE_TYPE_MODULE = "css/module";
 
+/**
+ * @type {Readonly<"asset">}
+ * This is the module type used for automatically choosing between `asset/inline`, `asset/resource` based on asset size limit (8096).
+ */
+const ASSET_MODULE_TYPE = "asset";
+
+/**
+ * @type {Readonly<"asset/inline">}
+ * This is the module type used for assets that are inlined as a data URI. This is the equivalent of `url-loader`.
+ */
+const ASSET_MODULE_TYPE_INLINE = "asset/inline";
+
+/**
+ * @type {Readonly<"asset/resource">}
+ * This is the module type used for assets that are copied to the output directory. This is the equivalent of `file-loader`.
+ */
+const ASSET_MODULE_TYPE_RESOURCE = "asset/resource";
+
+/**
+ * @type {Readonly<"asset/source">}
+ * This is the module type used for assets that are imported as source code. This is the equivalent of `raw-loader`.
+ */
+const ASSET_MODULE_TYPE_SOURCE = "asset/source";
+
+/**
+ * @type {Readonly<"asset/raw-data-url">}
+ * TODO: Document what this asset type is for. See css-loader tests for its usage.
+ */
+const ASSET_MODULE_TYPE_RAW_DATA_URL = "asset/raw-data-url";
+
+/**
+ * @type {Readonly<"runtime">}
+ * This is the module type used for the webpack runtime abstractions.
+ */
+const WEBPACK_MODULE_TYPE_RUNTIME = "runtime";
+
+/**
+ * @type {Readonly<"fallback-module">}
+ * This is the module type used for the ModuleFederation feature's FallbackModule class.
+ * TODO: Document this better.
+ */
+const WEBPACK_MODULE_TYPE_FALLBACK = "fallback-module";
+
+/**
+ * @type {Readonly<"remote-module">}
+ * This is the module type used for the ModuleFederation feature's RemoteModule class.
+ * TODO: Document this better.
+ */
+const WEBPACK_MODULE_TYPE_REMOTE = "remote-module";
+
+/**
+ * @type {Readonly<"provide-module">}
+ * This is the module type used for the ModuleFederation feature's ProvideModule class.
+ * TODO: Document this better.
+ */
+const WEBPACK_MODULE_TYPE_PROVIDE = "provide-module";
+
+/**
+ * @type {Readonly<"consume-shared-module">}
+ * This is the module type used for the ModuleFederation feature's ConsumeSharedModule class.
+ */
+const WEBPACK_MODULE_TYPE_CONSUME_SHARED_MODULE = "consume-shared-module";
+
+/**
+ * @type {Readonly<"lazy-compilation-proxy">}
+ * Module type used for `experiments.lazyCompilation` feature. See `LazyCompilationPlugin` for more information.
+ */
+const WEBPACK_MODULE_TYPE_LAZY_COMPILATION_PROXY = "lazy-compilation-proxy";
+
+/** @typedef {"javascript/auto" | "javascript/dynamic" | "javascript/esm"} JavaScriptModuleTypes */
+/** @typedef {"json"} JSONModuleType */
+/** @typedef {"webassembly/async" | "webassembly/sync"} WebAssemblyModuleTypes */
+/** @typedef {"css" | "css/global" | "css/module"} CSSModuleTypes */
+/** @typedef {"asset" | "asset/inline" | "asset/resource" | "asset/source" | "asset/raw-data-url"} AssetModuleTypes */
+/** @typedef {"runtime" | "fallback-module" | "remote-module" | "provide-module" | "consume-shared-module" | "lazy-compilation-proxy"} WebpackModuleTypes */
+/** @typedef {JavaScriptModuleTypes | JSONModuleType | WebAssemblyModuleTypes | CSSModuleTypes | AssetModuleTypes | WebpackModuleTypes} ModuleTypes */
+
+exports.ASSET_MODULE_TYPE = ASSET_MODULE_TYPE;
+exports.ASSET_MODULE_TYPE_RAW_DATA_URL = ASSET_MODULE_TYPE_RAW_DATA_URL;
+exports.ASSET_MODULE_TYPE_SOURCE = ASSET_MODULE_TYPE_SOURCE;
+exports.ASSET_MODULE_TYPE_RESOURCE = ASSET_MODULE_TYPE_RESOURCE;
+exports.ASSET_MODULE_TYPE_INLINE = ASSET_MODULE_TYPE_INLINE;
 exports.JAVASCRIPT_MODULE_TYPE_AUTO = JAVASCRIPT_MODULE_TYPE_AUTO;
 exports.JAVASCRIPT_MODULE_TYPE_DYNAMIC = JAVASCRIPT_MODULE_TYPE_DYNAMIC;
 exports.JAVASCRIPT_MODULE_TYPE_ESM = JAVASCRIPT_MODULE_TYPE_ESM;
@@ -69,3 +151,11 @@ exports.WEBASSEMBLY_MODULE_TYPE_SYNC = WEBASSEMBLY_MODULE_TYPE_SYNC;
 exports.CSS_MODULE_TYPE = CSS_MODULE_TYPE;
 exports.CSS_MODULE_TYPE_GLOBAL = CSS_MODULE_TYPE_GLOBAL;
 exports.CSS_MODULE_TYPE_MODULE = CSS_MODULE_TYPE_MODULE;
+exports.WEBPACK_MODULE_TYPE_RUNTIME = WEBPACK_MODULE_TYPE_RUNTIME;
+exports.WEBPACK_MODULE_TYPE_FALLBACK = WEBPACK_MODULE_TYPE_FALLBACK;
+exports.WEBPACK_MODULE_TYPE_REMOTE = WEBPACK_MODULE_TYPE_REMOTE;
+exports.WEBPACK_MODULE_TYPE_PROVIDE = WEBPACK_MODULE_TYPE_PROVIDE;
+exports.WEBPACK_MODULE_TYPE_CONSUME_SHARED_MODULE =
+	WEBPACK_MODULE_TYPE_CONSUME_SHARED_MODULE;
+exports.WEBPACK_MODULE_TYPE_LAZY_COMPILATION_PROXY =
+	WEBPACK_MODULE_TYPE_LAZY_COMPILATION_PROXY;

package/lib/NormalModule.js

@@ -65,6 +65,7 @@ const memoize = require("./util/memoize");
 /** @typedef {import("./Module").NeedBuildContext} NeedBuildContext */
 /** @typedef {import("./ModuleGraph")} ModuleGraph */
 /** @typedef {import("./ModuleGraphConnection").ConnectionState} ConnectionState */
+/** @typedef {import("./ModuleTypeConstants").JavaScriptModuleTypes} JavaScriptModuleTypes */
 /** @typedef {import("./NormalModuleFactory")} NormalModuleFactory */
 /** @typedef {import("./Parser")} Parser */
 /** @typedef {import("./RequestShortener")} RequestShortener */
@@ -201,7 +202,7 @@ makeSerializable(
 /**
  * @typedef {Object} NormalModuleCreateData
  * @property {string=} layer an optional layer in which the module is
- * @property {string} type module type
+ * @property {JavaScriptModuleTypes | ""} type module type. When deserializing, this is set to an empty string "".
  * @property {string} request request string
  * @property {string} userRequest request intended by user (without loaders from config)
  * @property {string} rawRequest request without resolving

package/lib/RuntimeModule.js

@@ -8,6 +8,7 @@
 const { RawSource } = require("webpack-sources");
 const OriginalSource = require("webpack-sources").OriginalSource;
 const Module = require("./Module");
+const { WEBPACK_MODULE_TYPE_RUNTIME } = require("./ModuleTypeConstants");
 
 /** @typedef {import("webpack-sources").Source} Source */
 /** @typedef {import("../declarations/WebpackOptions").WebpackOptionsNormalized} WebpackOptions */
@@ -24,7 +25,7 @@ const Module = require("./Module");
 /** @typedef {import("./util/Hash")} Hash */
 /** @typedef {import("./util/fs").InputFileSystem} InputFileSystem */
 
-const TYPES = new Set(["runtime"]);
+const TYPES = new Set([WEBPACK_MODULE_TYPE_RUNTIME]);
 
 class RuntimeModule extends Module {
 	/**
@@ -32,7 +33,7 @@ class RuntimeModule extends Module {
 	 * @param {number=} stage an optional stage
 	 */
 	constructor(name, stage = 0) {
-		super("runtime");
+		super(WEBPACK_MODULE_TYPE_RUNTIME);
 		this.name = name;
 		this.stage = stage;
 		this.buildMeta = {};
@@ -137,7 +138,7 @@ class RuntimeModule extends Module {
 		const generatedCode = this.getGeneratedCode();
 		if (generatedCode) {
 			sources.set(
-				"runtime",
+				WEBPACK_MODULE_TYPE_RUNTIME,
 				this.useSourceMap || this.useSimpleSourceMap
 					? new OriginalSource(generatedCode, this.identifier())
 					: new RawSource(generatedCode)

package/lib/Template.js

@@ -6,6 +6,7 @@
 "use strict";
 
 const { ConcatSource, PrefixSource } = require("webpack-sources");
+const { WEBPACK_MODULE_TYPE_RUNTIME } = require("./ModuleTypeConstants");
 
 /** @typedef {import("webpack-sources").Source} Source */
 /** @typedef {import("../declarations/WebpackOptions").Output} OutputOptions */
@@ -362,7 +363,7 @@ class Template {
 				runtimeSource = codeGenerationResults.getSource(
 					module,
 					renderContext.chunk.runtime,
-					"runtime"
+					WEBPACK_MODULE_TYPE_RUNTIME
 				);
 			} else {
 				const codeGenResult = module.codeGeneration({

package/lib/asset/AssetGenerator.js

@@ -10,6 +10,7 @@ const path = require("path");
 const { RawSource } = require("webpack-sources");
 const ConcatenationScope = require("../ConcatenationScope");
 const Generator = require("../Generator");
+const { ASSET_MODULE_TYPE } = require("../ModuleTypeConstants");
 const RuntimeGlobals = require("../RuntimeGlobals");
 const createHash = require("../util/createHash");
 const { makePathsRelative } = require("../util/identifier");
@@ -122,7 +123,7 @@ const decodeDataUriContent = (encoding, content) => {
 };
 
 const JS_TYPES = new Set(["javascript"]);
-const JS_AND_ASSET_TYPES = new Set(["javascript", "asset"]);
+const JS_AND_ASSET_TYPES = new Set(["javascript", ASSET_MODULE_TYPE]);
 const DEFAULT_ENCODING = "base64";
 
 class AssetGenerator extends Generator {
@@ -228,7 +229,7 @@ class AssetGenerator extends Generator {
 		}
 	) {
 		switch (type) {
-			case "asset":
+			case ASSET_MODULE_TYPE:
 				return module.originalSource();
 			default: {
 				let content;
@@ -406,7 +407,7 @@ class AssetGenerator extends Generator {
 	 */
 	getSize(module, type) {
 		switch (type) {
-			case "asset": {
+			case ASSET_MODULE_TYPE: {
 				const originalSource = module.originalSource();
 
 				if (!originalSource) {

package/lib/asset/AssetModulesPlugin.js

@@ -5,6 +5,12 @@
 
 "use strict";
 
+const {
+	ASSET_MODULE_TYPE_RESOURCE,
+	ASSET_MODULE_TYPE_INLINE,
+	ASSET_MODULE_TYPE,
+	ASSET_MODULE_TYPE_SOURCE
+} = require("../ModuleTypeConstants");
 const { cleverMerge } = require("../util/cleverMerge");
 const { compareModulesByIdentifier } = require("../util/comparators");
 const createSchemaValidation = require("../util/create-schema-validation");
@@ -61,7 +67,7 @@ const getAssetSourceGenerator = memoize(() =>
 	require("./AssetSourceGenerator")
 );
 
-const type = "asset";
+const type = ASSET_MODULE_TYPE;
 const plugin = "AssetModulesPlugin";
 
 class AssetModulesPlugin {
@@ -75,7 +81,7 @@ class AssetModulesPlugin {
 			plugin,
 			(compilation, { normalModuleFactory }) => {
 				normalModuleFactory.hooks.createParser
-					.for("asset")
+					.for(ASSET_MODULE_TYPE)
 					.tap(plugin, parserOptions => {
 						validateParserOptions(parserOptions);
 						parserOptions = cleverMerge(
@@ -96,35 +102,39 @@ class AssetModulesPlugin {
 						return new AssetParser(dataUrlCondition);
 					});
 				normalModuleFactory.hooks.createParser
-					.for("asset/inline")
+					.for(ASSET_MODULE_TYPE_INLINE)
 					.tap(plugin, parserOptions => {
 						const AssetParser = getAssetParser();
 
 						return new AssetParser(true);
 					});
 				normalModuleFactory.hooks.createParser
-					.for("asset/resource")
+					.for(ASSET_MODULE_TYPE_RESOURCE)
 					.tap(plugin, parserOptions => {
 						const AssetParser = getAssetParser();
 
 						return new AssetParser(false);
 					});
 				normalModuleFactory.hooks.createParser
-					.for("asset/source")
+					.for(ASSET_MODULE_TYPE_SOURCE)
 					.tap(plugin, parserOptions => {
 						const AssetSourceParser = getAssetSourceParser();
 
 						return new AssetSourceParser();
 					});
 
-				for (const type of ["asset", "asset/inline", "asset/resource"]) {
+				for (const type of [
+					ASSET_MODULE_TYPE,
+					ASSET_MODULE_TYPE_INLINE,
+					ASSET_MODULE_TYPE_RESOURCE
+				]) {
 					normalModuleFactory.hooks.createGenerator
 						.for(type)
 						.tap(plugin, generatorOptions => {
 							validateGeneratorOptions[type](generatorOptions);
 
 							let dataUrl = undefined;
-							if (type !== "asset/resource") {
+							if (type !== ASSET_MODULE_TYPE_RESOURCE) {
 								dataUrl = generatorOptions.dataUrl;
 								if (!dataUrl || typeof dataUrl === "object") {
 									dataUrl = {
@@ -138,7 +148,7 @@ class AssetModulesPlugin {
 							let filename = undefined;
 							let publicPath = undefined;
 							let outputPath = undefined;
-							if (type !== "asset/inline") {
+							if (type !== ASSET_MODULE_TYPE_INLINE) {
 								filename = generatorOptions.filename;
 								publicPath = generatorOptions.publicPath;
 								outputPath = generatorOptions.outputPath;
@@ -156,7 +166,7 @@ class AssetModulesPlugin {
 						});
 				}
 				normalModuleFactory.hooks.createGenerator
-					.for("asset/source")
+					.for(ASSET_MODULE_TYPE_SOURCE)
 					.tap(plugin, () => {
 						const AssetSourceGenerator = getAssetSourceGenerator();
 
@@ -169,7 +179,7 @@ class AssetModulesPlugin {
 
 					const modules = chunkGraph.getOrderedChunkModulesIterableBySourceType(
 						chunk,
-						"asset",
+						ASSET_MODULE_TYPE,
 						compareModulesByIdentifier
 					);
 					if (modules) {
@@ -207,7 +217,7 @@ class AssetModulesPlugin {
 					"AssetModulesPlugin",
 					(options, context) => {
 						const { codeGenerationResult } = options;
-						const source = codeGenerationResult.sources.get("asset");
+						const source = codeGenerationResult.sources.get(ASSET_MODULE_TYPE);
 						if (source === undefined) return;
 						context.assets.set(codeGenerationResult.data.get("filename"), {
 							source,

package/lib/asset/RawDataUrlModule.js

@@ -7,6 +7,7 @@
 
 const { RawSource } = require("webpack-sources");
 const Module = require("../Module");
+const { ASSET_MODULE_TYPE_RAW_DATA_URL } = require("../ModuleTypeConstants");
 const RuntimeGlobals = require("../RuntimeGlobals");
 const makeSerializable = require("../util/makeSerializable");
 
@@ -33,7 +34,7 @@ class RawDataUrlModule extends Module {
 	 * @param {string=} readableIdentifier readable identifier
 	 */
 	constructor(url, identifier, readableIdentifier) {
-		super("asset/raw-data-url", null);
+		super(ASSET_MODULE_TYPE_RAW_DATA_URL, null);
 		this.url = url;
 		this.urlBuffer = url ? Buffer.from(url) : undefined;
 		this.identifierStr = identifier || this.url;

package/lib/config/defaults.js

@@ -13,7 +13,8 @@ const {
 	WEBASSEMBLY_MODULE_TYPE_ASYNC,
 	JAVASCRIPT_MODULE_TYPE_ESM,
 	JAVASCRIPT_MODULE_TYPE_DYNAMIC,
-	WEBASSEMBLY_MODULE_TYPE_SYNC
+	WEBASSEMBLY_MODULE_TYPE_SYNC,
+	ASSET_MODULE_TYPE
 } = require("../ModuleTypeConstants");
 const Template = require("../Template");
 const { cleverMerge } = require("../util/cleverMerge");
@@ -511,7 +512,7 @@ const applyModuleDefaults = (
 		D(module, "unsafeCache", false);
 	}
 
-	F(module.parser, "asset", () => ({}));
+	F(module.parser, ASSET_MODULE_TYPE, () => ({}));
 	F(module.parser.asset, "dataUrlCondition", () => ({}));
 	if (typeof module.parser.asset.dataUrlCondition === "object") {
 		D(module.parser.asset.dataUrlCondition, "maxSize", 8096);

package/lib/container/FallbackModule.js

@@ -7,6 +7,7 @@
 
 const { RawSource } = require("webpack-sources");
 const Module = require("../Module");
+const { WEBPACK_MODULE_TYPE_FALLBACK } = require("../ModuleTypeConstants");
 const RuntimeGlobals = require("../RuntimeGlobals");
 const Template = require("../Template");
 const makeSerializable = require("../util/makeSerializable");
@@ -37,7 +38,7 @@ class FallbackModule extends Module {
 	 * @param {string[]} requests list of requests to choose one
 	 */
 	constructor(requests) {
-		super("fallback-module");
+		super(WEBPACK_MODULE_TYPE_FALLBACK);
 		this.requests = requests;
 		this._identifier = `fallback ${this.requests.join(" ")}`;
 	}

package/lib/container/RemoteModule.js

@@ -7,6 +7,7 @@
 
 const { RawSource } = require("webpack-sources");
 const Module = require("../Module");
+const { WEBPACK_MODULE_TYPE_REMOTE } = require("../ModuleTypeConstants");
 const RuntimeGlobals = require("../RuntimeGlobals");
 const makeSerializable = require("../util/makeSerializable");
 const FallbackDependency = require("./FallbackDependency");
@@ -39,7 +40,7 @@ class RemoteModule extends Module {
 	 * @param {string} shareScope the used share scope name
 	 */
 	constructor(request, externalRequests, internalRequest, shareScope) {
-		super("remote-module");
+		super(WEBPACK_MODULE_TYPE_REMOTE);
 		this.request = request;
 		this.externalRequests = externalRequests;
 		this.internalRequest = internalRequest;

package/lib/css/CssModulesPlugin.js

@@ -157,7 +157,6 @@ class CssModulesPlugin {
 									return new CssParser();
 								case CSS_MODULE_TYPE_GLOBAL:
 									return new CssParser({
-										allowPseudoBlocks: false,
 										allowModeSwitch: false
 									});
 								case CSS_MODULE_TYPE_MODULE:
@@ -302,12 +301,20 @@ class CssModulesPlugin {
 					}
 					return result;
 				});
-				const enabledChunks = new WeakSet();
+				const globalChunkLoading = compilation.outputOptions.chunkLoading;
+				const isEnabledForChunk = chunk => {
+					const options = chunk.getEntryOptions();
+					const chunkLoading =
+						options && options.chunkLoading !== undefined
+							? options.chunkLoading
+							: globalChunkLoading;
+					return chunkLoading === "jsonp";
+				};
+				const onceForChunkSet = new WeakSet();
 				const handler = (chunk, set) => {
-					if (enabledChunks.has(chunk)) {
-						return;
-					}
-					enabledChunks.add(chunk);
+					if (onceForChunkSet.has(chunk)) return;
+					onceForChunkSet.add(chunk);
+					if (!isEnabledForChunk(chunk)) return;
 
 					set.add(RuntimeGlobals.publicPath);
 					set.add(RuntimeGlobals.getChunkCssFilename);