webpack 5.96.1 → 5.97.0

package/lib/dependencies/CssLocalIdentifierDependency.js

@@ -9,6 +9,7 @@ const { cssExportConvention } = require("../util/conventions");
 const createHash = require("../util/createHash");
 const { makePathsRelative } = require("../util/identifier");
 const makeSerializable = require("../util/makeSerializable");
+const memoize = require("../util/memoize");
 const NullDependency = require("./NullDependency");
 
 /** @typedef {import("webpack-sources").ReplaceSource} ReplaceSource */
@@ -23,7 +24,6 @@ const NullDependency = require("./NullDependency");
 /** @typedef {import("../ModuleGraph")} ModuleGraph */
 /** @typedef {import("../NormalModuleFactory").ResourceDataWithData} ResourceDataWithData */
 /** @typedef {import("../RuntimeTemplate")} RuntimeTemplate */
-/** @typedef {import("../css/CssExportsGenerator")} CssExportsGenerator */
 /** @typedef {import("../css/CssGenerator")} CssGenerator */
 /** @typedef {import("../css/CssParser").Range} Range */
 /** @typedef {import("../serialization/ObjectMiddleware").ObjectDeserializerContext} ObjectDeserializerContext */
@@ -31,6 +31,8 @@ const NullDependency = require("./NullDependency");
 /** @typedef {import("../util/Hash")} Hash */
 /** @typedef {import("../util/createHash").Algorithm} Algorithm */
 
+const getCssParser = memoize(() => require("../css/CssParser"));
+
 /**
  * @param {string} local css local
  * @param {CssModule} module module
@@ -40,34 +42,32 @@ const NullDependency = require("./NullDependency");
  */
 const getLocalIdent = (local, module, chunkGraph, runtimeTemplate) => {
 	const localIdentName =
-		/** @type {CssGenerator | CssExportsGenerator} */
+		/** @type {CssGenerator} */
 		(module.generator).localIdentName;
 	const relativeResourcePath = makePathsRelative(
 		/** @type {string} */
 		(module.context),
-		/** @type {string} */ (
-			/** @type {ResourceDataWithData} */
-			(module.resourceResolveData).path
-		)
+		module.matchResource || module.resource,
+		runtimeTemplate.compilation.compiler.root
 	);
 	const { hashFunction, hashDigest, hashDigestLength, hashSalt, uniqueName } =
 		runtimeTemplate.outputOptions;
 	const hash = createHash(/** @type {Algorithm} */ (hashFunction));
+
 	if (hashSalt) {
 		hash.update(hashSalt);
 	}
+
 	hash.update(relativeResourcePath);
+
 	if (!/\[local\]/.test(localIdentName)) {
 		hash.update(local);
 	}
-	const localIdentHash = /** @type {string} */ (hash.digest(hashDigest))
-		// Remove all leading digits
-		.replace(/^\d+/, "")
-		// Replace all slashes with underscores (same as in base64url)
-		.replace(/\//g, "_")
-		// Remove everything that is not an alphanumeric or underscore
-		.replace(/[^A-Za-z0-9_]+/g, "_")
-		.slice(0, hashDigestLength);
+
+	const localIdentHash =
+		/** @type {string} */
+		(hash.digest(hashDigest)).slice(0, hashDigestLength);
+
 	return runtimeTemplate.compilation
 		.getPath(localIdentName, {
 			filename: relativeResourcePath,
@@ -77,7 +77,8 @@ const getLocalIdent = (local, module, chunkGraph, runtimeTemplate) => {
 			module
 		})
 		.replace(/\[local\]/g, local)
-		.replace(/\[uniqueName\]/g, /** @type {string} */ (uniqueName));
+		.replace(/\[uniqueName\]/g, /** @type {string} */ (uniqueName))
+		.replace(/^((-?[0-9])|--)/, "_$1");
 };
 
 class CssLocalIdentifierDependency extends NullDependency {
@@ -91,6 +92,8 @@ class CssLocalIdentifierDependency extends NullDependency {
 		this.name = name;
 		this.range = range;
 		this.prefix = prefix;
+		this._conventionNames = undefined;
+		this._hashUpdate = undefined;
 	}
 
 	get type() {
@@ -117,9 +120,9 @@ class CssLocalIdentifierDependency extends NullDependency {
 	 */
 	getExports(moduleGraph) {
 		const module = /** @type {CssModule} */ (moduleGraph.getParentModule(this));
-		const convention = /** @type {CssGenerator | CssExportsGenerator} */ (
-			module.generator
-		).convention;
+		const convention =
+			/** @type {CssGenerator} */
+			(module.generator).convention;
 		const names = this.getExportsConventionNames(this.name, convention);
 		return {
 			exports: names.map(name => ({
@@ -137,20 +140,20 @@ class CssLocalIdentifierDependency extends NullDependency {
 	 * @returns {void}
 	 */
 	updateHash(hash, { chunkGraph }) {
-		const module = /** @type {CssModule} */ (
-			chunkGraph.moduleGraph.getParentModule(this)
-		);
-		const generator = /** @type {CssGenerator | CssExportsGenerator} */ (
-			module.generator
-		);
-		const names = this.getExportsConventionNames(
-			this.name,
-			generator.convention
-		);
-		hash.update("exportsConvention");
-		hash.update(JSON.stringify(names));
-		hash.update("localIdentName");
-		hash.update(generator.localIdentName);
+		if (this._hashUpdate === undefined) {
+			const module =
+				/** @type {CssModule} */
+				(chunkGraph.moduleGraph.getParentModule(this));
+			const generator =
+				/** @type {CssGenerator} */
+				(module.generator);
+			const names = this.getExportsConventionNames(
+				this.name,
+				generator.convention
+			);
+			this._hashUpdate = `exportsConvention|${JSON.stringify(names)}|localIdentName|${JSON.stringify(generator.localIdentName)}`;
+		}
+		hash.update(this._hashUpdate);
 	}
 
 	/**
@@ -176,47 +179,43 @@ class CssLocalIdentifierDependency extends NullDependency {
 	}
 }
 
-/**
- * @param {string} str string
- * @param {string | boolean} omitUnderscore true if you need to omit underscore
- * @returns {string} escaped css identifier
- */
-const escapeCssIdentifier = (str, omitUnderscore) => {
-	const escaped = `${str}`.replace(
-		// cspell:word uffff
-		/[^a-zA-Z0-9_\u0081-\uFFFF-]/g,
-		s => `\\${s}`
-	);
-	return !omitUnderscore && /^(?!--)[0-9-]/.test(escaped)
-		? `_${escaped}`
-		: escaped;
-};
-
 CssLocalIdentifierDependency.Template = class CssLocalIdentifierDependencyTemplate extends (
 	NullDependency.Template
 ) {
 	/**
 	 * @param {Dependency} dependency the dependency for which the template should be applied
-	 * @param {ReplaceSource} source the current replace source which can be modified
+	 * @param {string} local local name
 	 * @param {DependencyTemplateContext} templateContext the context object
-	 * @returns {void}
+	 * @returns {string} identifier
 	 */
-	apply(
+	static getIdentifier(
 		dependency,
-		source,
-		{
-			module: m,
-			moduleGraph,
-			chunkGraph,
-			runtime,
-			runtimeTemplate,
-			cssExportsData
-		}
+		local,
+		{ module: m, chunkGraph, runtimeTemplate }
 	) {
 		const dep = /** @type {CssLocalIdentifierDependency} */ (dependency);
 		const module = /** @type {CssModule} */ (m);
+
+		return (
+			dep.prefix +
+			getCssParser().escapeIdentifier(
+				getLocalIdent(local, module, chunkGraph, runtimeTemplate)
+			)
+		);
+	}
+
+	/**
+	 * @param {Dependency} dependency the dependency for which the template should be applied
+	 * @param {ReplaceSource} source the current replace source which can be modified
+	 * @param {DependencyTemplateContext} templateContext the context object
+	 * @returns {void}
+	 */
+	apply(dependency, source, templateContext) {
+		const { module: m, moduleGraph, runtime, cssData } = templateContext;
+		const dep = /** @type {CssLocalIdentifierDependency} */ (dependency);
+		const module = /** @type {CssModule} */ (m);
 		const convention =
-			/** @type {CssGenerator | CssExportsGenerator} */
+			/** @type {CssGenerator} */
 			(module.generator).convention;
 		const names = dep.getExportsConventionNames(dep.name, convention);
 		const usedNames =
@@ -228,20 +227,17 @@ CssLocalIdentifierDependency.Template = class CssLocalIdentifierDependencyTempla
 					)
 					.filter(Boolean)
 			);
-		const used = usedNames.length === 0 ? names[0] : usedNames[0];
-
-		// use the first usedName to generate localIdent, it's shorter when mangle exports enabled
-		const localIdent =
-			dep.prefix + getLocalIdent(used, module, chunkGraph, runtimeTemplate);
-
-		source.replace(
-			dep.range[0],
-			dep.range[1] - 1,
-			escapeCssIdentifier(localIdent, dep.prefix)
+		const local = usedNames.length === 0 ? names[0] : usedNames[0];
+		const identifier = CssLocalIdentifierDependencyTemplate.getIdentifier(
+			dep,
+			local,
+			templateContext
 		);
 
-		for (const used of usedNames) {
-			cssExportsData.exports.set(used, localIdent);
+		source.replace(dep.range[0], dep.range[1] - 1, identifier);
+
+		for (const used of usedNames.concat(names)) {
+			cssData.exports.set(used, identifier);
 		}
 	}
 };

package/lib/dependencies/CssUrlDependency.js

@@ -181,6 +181,7 @@ CssUrlDependency.Template = class CssUrlDependencyTemplate extends (
 		const data =
 			/** @type {NonNullable<CodeGenerationResult["data"]>} */
 			(codeGen.data);
+		if (!data) return "data:,";
 		const url = data.get("url");
 		if (!url || !url["css-url"]) return "data:,";
 		return url["css-url"];

package/lib/esm/ModuleChunkFormatPlugin.js

@@ -56,15 +56,19 @@ class ModuleChunkFormatPlugin {
 								"HMR is not implemented for module chunk format yet"
 							);
 						} else {
-							source.add(`export const id = ${JSON.stringify(chunk.id)};\n`);
-							source.add(`export const ids = ${JSON.stringify(chunk.ids)};\n`);
-							source.add("export const modules = ");
+							source.add(
+								`export const __webpack_id__ = ${JSON.stringify(chunk.id)};\n`
+							);
+							source.add(
+								`export const __webpack_ids__ = ${JSON.stringify(chunk.ids)};\n`
+							);
+							source.add("export const __webpack_modules__ = ");
 							source.add(modules);
 							source.add(";\n");
 							const runtimeModules =
 								chunkGraph.getChunkRuntimeModulesInOrder(chunk);
 							if (runtimeModules.length > 0) {
-								source.add("export const runtime =\n");
+								source.add("export const __webpack_runtime__ =\n");
 								source.add(
 									Template.renderChunkRuntimeModules(
 										runtimeModules,

package/lib/esm/ModuleChunkLoadingRuntimeModule.js

@@ -111,12 +111,13 @@ class ModuleChunkLoadingRuntimeModule extends RuntimeModule {
 		);
 		const { linkPreload, linkPrefetch } =
 			ModuleChunkLoadingRuntimeModule.getCompilationHooks(compilation);
+		const isNeutralPlatform = runtimeTemplate.isNeutralPlatform();
 		const withPrefetch =
-			environment.document &&
+			(environment.document || isNeutralPlatform) &&
 			this._runtimeRequirements.has(RuntimeGlobals.prefetchChunkHandlers) &&
 			chunk.hasChildByOrder(chunkGraph, "prefetch", true, chunkHasJs);
 		const withPreload =
-			environment.document &&
+			(environment.document || isNeutralPlatform) &&
 			this._runtimeRequirements.has(RuntimeGlobals.preloadChunkHandlers) &&
 			chunk.hasChildByOrder(chunkGraph, "preload", true, chunkHasJs);
 		const conditionMap = chunkGraph.getChunkConditionMap(chunk, chunkHasJs);
@@ -161,29 +162,29 @@ class ModuleChunkLoadingRuntimeModule extends RuntimeModule {
 			withLoading || withExternalInstallChunk
 				? `var installChunk = ${runtimeTemplate.basicFunction("data", [
 						runtimeTemplate.destructureObject(
-							["ids", "modules", "runtime"],
+							["__webpack_ids__", "__webpack_modules__", "__webpack_runtime__"],
 							"data"
 						),
 						'// add "modules" to the modules object,',
 						'// then flag all "ids" as loaded and fire callback',
 						"var moduleId, chunkId, i = 0;",
-						"for(moduleId in modules) {",
+						"for(moduleId in __webpack_modules__) {",
 						Template.indent([
-							`if(${RuntimeGlobals.hasOwnProperty}(modules, moduleId)) {`,
+							`if(${RuntimeGlobals.hasOwnProperty}(__webpack_modules__, moduleId)) {`,
 							Template.indent(
-								`${RuntimeGlobals.moduleFactories}[moduleId] = modules[moduleId];`
+								`${RuntimeGlobals.moduleFactories}[moduleId] = __webpack_modules__[moduleId];`
 							),
 							"}"
 						]),
 						"}",
-						`if(runtime) runtime(${RuntimeGlobals.require});`,
-						"for(;i < ids.length; i++) {",
+						`if(__webpack_runtime__) __webpack_runtime__(${RuntimeGlobals.require});`,
+						"for(;i < __webpack_ids__.length; i++) {",
 						Template.indent([
-							"chunkId = ids[i];",
+							"chunkId = __webpack_ids__[i];",
 							`if(${RuntimeGlobals.hasOwnProperty}(installedChunks, chunkId) && installedChunks[chunkId]) {`,
 							Template.indent("installedChunks[chunkId][0]();"),
 							"}",
-							"installedChunks[ids[i]] = 0;"
+							"installedChunks[__webpack_ids__[i]] = 0;"
 						]),
 						"}",
 						withOnChunkLoad ? `${RuntimeGlobals.onChunksLoaded}();` : ""
@@ -254,6 +255,9 @@ class ModuleChunkLoadingRuntimeModule extends RuntimeModule {
 						}) {`,
 						Template.indent([
 							"installedChunks[chunkId] = null;",
+							isNeutralPlatform
+								? "if (typeof document === 'undefined') return;"
+								: "",
 							linkPrefetch.call(
 								Template.asString([
 									"var link = document.createElement('link');",
@@ -290,6 +294,9 @@ class ModuleChunkLoadingRuntimeModule extends RuntimeModule {
 						}) {`,
 						Template.indent([
 							"installedChunks[chunkId] = null;",
+							isNeutralPlatform
+								? "if (typeof document === 'undefined') return;"
+								: "",
 							linkPreload.call(
 								Template.asString([
 									"var link = document.createElement('link');",

package/lib/index.js

@@ -443,6 +443,9 @@ module.exports = mergeExports(fn, {
 		get LimitChunkCountPlugin() {
 			return require("./optimize/LimitChunkCountPlugin");
 		},
+		get MergeDuplicateChunksPlugin() {
+			return require("./optimize/MergeDuplicateChunksPlugin.js");
+		},
 		get MinChunkSizePlugin() {
 			return require("./optimize/MinChunkSizePlugin");
 		},
@@ -479,12 +482,12 @@ module.exports = mergeExports(fn, {
 	},
 
 	web: {
-		get FetchCompileAsyncWasmPlugin() {
-			return require("./web/FetchCompileAsyncWasmPlugin");
-		},
 		get FetchCompileWasmPlugin() {
 			return require("./web/FetchCompileWasmPlugin");
 		},
+		get FetchCompileAsyncWasmPlugin() {
+			return require("./web/FetchCompileAsyncWasmPlugin");
+		},
 		get JsonpChunkLoadingRuntimeModule() {
 			return require("./web/JsonpChunkLoadingRuntimeModule");
 		},
@@ -523,6 +526,9 @@ module.exports = mergeExports(fn, {
 		},
 		get ReadFileCompileWasmPlugin() {
 			return require("./node/ReadFileCompileWasmPlugin");
+		},
+		get ReadFileCompileAsyncWasmPlugin() {
+			return require("./node/ReadFileCompileAsyncWasmPlugin");
 		}
 	},
 

package/lib/javascript/EnableChunkLoadingPlugin.js

@@ -101,14 +101,12 @@ class EnableChunkLoadingPlugin {
 					}).apply(compiler);
 					break;
 				}
-				case "import": {
+				case "import":
+				case "universal": {
 					const ModuleChunkLoadingPlugin = require("../esm/ModuleChunkLoadingPlugin");
 					new ModuleChunkLoadingPlugin().apply(compiler);
 					break;
 				}
-				case "universal":
-					// TODO implement universal chunk loading
-					throw new Error("Universal Chunk Loading is not implemented yet");
 				default:
 					throw new Error(`Unsupported chunk loading type ${type}.
 Plugins which provide custom chunk loading types must call EnableChunkLoadingPlugin.setEnabled(compiler, type) to disable this error.`);

package/lib/library/AssignLibraryPlugin.js

@@ -330,7 +330,7 @@ class AssignLibraryPlugin extends AbstractLibraryPlugin {
 				exports = "__webpack_exports_export__";
 			}
 			result.add(
-				`for(var i in ${exports}) __webpack_export_target__[i] = ${exports}[i];\n`
+				`for(var __webpack_i__ in ${exports}) __webpack_export_target__[__webpack_i__] = ${exports}[__webpack_i__];\n`
 			);
 			result.add(
 				`if(${exports}.__esModule) Object.defineProperty(__webpack_export_target__, "__esModule", { value: true });\n`

package/lib/library/EnableLibraryPlugin.js

@@ -208,6 +208,23 @@ class EnableLibraryPlugin {
 				}
 				case "umd":
 				case "umd2": {
+					if (compiler.options.output.iife === false) {
+						compiler.options.output.iife = true;
+
+						class WarnFalseIifeUmdPlugin {
+							apply(compiler) {
+								compiler.hooks.thisCompilation.tap(
+									"WarnFalseIifeUmdPlugin",
+									compilation => {
+										const FalseIIFEUmdWarning = require("../FalseIIFEUmdWarning");
+										compilation.warnings.push(new FalseIIFEUmdWarning());
+									}
+								);
+							}
+						}
+
+						new WarnFalseIifeUmdPlugin().apply(compiler);
+					}
 					enableExportProperty();
 					const UmdLibraryPlugin = require("./UmdLibraryPlugin");
 					new UmdLibraryPlugin({

package/lib/node/ReadFileCompileAsyncWasmPlugin.js

@@ -13,9 +13,18 @@ const AsyncWasmLoadingRuntimeModule = require("../wasm-async/AsyncWasmLoadingRun
 /** @typedef {import("../Chunk")} Chunk */
 /** @typedef {import("../Compiler")} Compiler */
 
+/**
+ * @typedef {object} ReadFileCompileAsyncWasmPluginOptions
+ * @property {boolean} [import] use import?
+ */
+
+const PLUGIN_NAME = "ReadFileCompileAsyncWasmPlugin";
+
 class ReadFileCompileAsyncWasmPlugin {
-	constructor({ type = "async-node", import: useImport = false } = {}) {
-		this._type = type;
+	/**
+	 * @param {ReadFileCompileAsyncWasmPluginOptions} [options] options object
+	 */
+	constructor({ import: useImport = false } = {}) {
 		this._import = useImport;
 	}
 
@@ -25,32 +34,53 @@ class ReadFileCompileAsyncWasmPlugin {
 	 * @returns {void}
 	 */
 	apply(compiler) {
-		compiler.hooks.thisCompilation.tap(
-			"ReadFileCompileAsyncWasmPlugin",
-			compilation => {
-				const globalWasmLoading = compilation.outputOptions.wasmLoading;
-				/**
-				 * @param {Chunk} chunk chunk
-				 * @returns {boolean} true, if wasm loading is enabled for the chunk
-				 */
-				const isEnabledForChunk = chunk => {
-					const options = chunk.getEntryOptions();
-					const wasmLoading =
-						options && options.wasmLoading !== undefined
-							? options.wasmLoading
-							: globalWasmLoading;
-					return wasmLoading === this._type;
-				};
-				const { importMetaName } = compilation.outputOptions;
-				/**
-				 * @type {(path: string) => string}
-				 */
-				const generateLoadBinaryCode = this._import
-					? path =>
-							Template.asString([
-								"Promise.all([import('fs'), import('url')]).then(([{ readFile }, { URL }]) => new Promise((resolve, reject) => {",
+		compiler.hooks.thisCompilation.tap(PLUGIN_NAME, compilation => {
+			const globalWasmLoading = compilation.outputOptions.wasmLoading;
+			/**
+			 * @param {Chunk} chunk chunk
+			 * @returns {boolean} true, if wasm loading is enabled for the chunk
+			 */
+			const isEnabledForChunk = chunk => {
+				const options = chunk.getEntryOptions();
+				const wasmLoading =
+					options && options.wasmLoading !== undefined
+						? options.wasmLoading
+						: globalWasmLoading;
+				return wasmLoading === "async-node";
+			};
+
+			/**
+			 * @param {string} path path to wasm file
+			 * @returns {string} generated code to load the wasm file
+			 */
+			const generateLoadBinaryCode = this._import
+				? path =>
+						Template.asString([
+							"Promise.all([import('fs'), import('url')]).then(([{ readFile }, { URL }]) => new Promise((resolve, reject) => {",
+							Template.indent([
+								`readFile(new URL(${path}, ${compilation.outputOptions.importMetaName}.url), (err, buffer) => {`,
+								Template.indent([
+									"if (err) return reject(err);",
+									"",
+									"// Fake fetch response",
+									"resolve({",
+									Template.indent(["arrayBuffer() { return buffer; }"]),
+									"});"
+								]),
+								"});"
+							]),
+							"}))"
+						])
+				: path =>
+						Template.asString([
+							"new Promise(function (resolve, reject) {",
+							Template.indent([
+								"try {",
 								Template.indent([
-									`readFile(new URL(${path}, ${importMetaName}.url), (err, buffer) => {`,
+									"var { readFile } = require('fs');",
+									"var { join } = require('path');",
+									"",
+									`readFile(join(__dirname, ${path}), function(err, buffer){`,
 									Template.indent([
 										"if (err) return reject(err);",
 										"",
@@ -61,59 +91,32 @@ class ReadFileCompileAsyncWasmPlugin {
 									]),
 									"});"
 								]),
-								"}))"
-							])
-					: path =>
-							Template.asString([
-								"new Promise(function (resolve, reject) {",
-								Template.indent([
-									"try {",
-									Template.indent([
-										"var { readFile } = require('fs');",
-										"var { join } = require('path');",
-										"",
-										`readFile(join(__dirname, ${path}), function(err, buffer){`,
-										Template.indent([
-											"if (err) return reject(err);",
-											"",
-											"// Fake fetch response",
-											"resolve({",
-											Template.indent(["arrayBuffer() { return buffer; }"]),
-											"});"
-										]),
-										"});"
-									]),
-									"} catch (err) { reject(err); }"
-								]),
-								"})"
-							]);
+								"} catch (err) { reject(err); }"
+							]),
+							"})"
+						]);
 
-				compilation.hooks.runtimeRequirementInTree
-					.for(RuntimeGlobals.instantiateWasm)
-					.tap(
-						"ReadFileCompileAsyncWasmPlugin",
-						(chunk, set, { chunkGraph }) => {
-							if (!isEnabledForChunk(chunk)) return;
-							if (
-								!chunkGraph.hasModuleInGraph(
-									chunk,
-									m => m.type === WEBASSEMBLY_MODULE_TYPE_ASYNC
-								)
-							) {
-								return;
-							}
-							set.add(RuntimeGlobals.publicPath);
-							compilation.addRuntimeModule(
-								chunk,
-								new AsyncWasmLoadingRuntimeModule({
-									generateLoadBinaryCode,
-									supportsStreaming: false
-								})
-							);
-						}
+			compilation.hooks.runtimeRequirementInTree
+				.for(RuntimeGlobals.instantiateWasm)
+				.tap(PLUGIN_NAME, (chunk, set, { chunkGraph }) => {
+					if (!isEnabledForChunk(chunk)) return;
+					if (
+						!chunkGraph.hasModuleInGraph(
+							chunk,
+							m => m.type === WEBASSEMBLY_MODULE_TYPE_ASYNC
+						)
+					) {
+						return;
+					}
+					compilation.addRuntimeModule(
+						chunk,
+						new AsyncWasmLoadingRuntimeModule({
+							generateLoadBinaryCode,
+							supportsStreaming: false
+						})
 					);
-			}
-		);
+				});
+		});
 	}
 }