webpack 5.91.0 → 5.92.0

package/lib/esm/ModuleChunkLoadingRuntimeModule.js

@@ -22,7 +22,7 @@ const { getUndoPath } = require("../util/identifier");
 /** @typedef {import("../Module").ReadOnlyRuntimeRequirements} ReadOnlyRuntimeRequirements */
 
 /**
- * @typedef {Object} JsonpCompilationPluginHooks
+ * @typedef {object} JsonpCompilationPluginHooks
  * @property {SyncWaterfallHook<[string, Chunk]>} linkPreload
  * @property {SyncWaterfallHook<[string, Chunk]>} linkPrefetch
  */
@@ -89,7 +89,7 @@ class ModuleChunkLoadingRuntimeModule extends RuntimeModule {
 		const chunk = /** @type {Chunk} */ (this.chunk);
 		const {
 			runtimeTemplate,
-			outputOptions: { importFunctionName }
+			outputOptions: { environment, importFunctionName, crossOriginLoading }
 		} = compilation;
 		const fn = RuntimeGlobals.ensureChunkHandlers;
 		const withBaseURI = this._runtimeRequirements.has(RuntimeGlobals.baseURI);
@@ -105,6 +105,14 @@ class ModuleChunkLoadingRuntimeModule extends RuntimeModule {
 		const withHmr = this._runtimeRequirements.has(
 			RuntimeGlobals.hmrDownloadUpdateHandlers
 		);
+		const { linkPreload, linkPrefetch } =
+			ModuleChunkLoadingRuntimeModule.getCompilationHooks(compilation);
+		const withPrefetch =
+			environment.document &&
+			this._runtimeRequirements.has(RuntimeGlobals.prefetchChunkHandlers);
+		const withPreload =
+			environment.document &&
+			this._runtimeRequirements.has(RuntimeGlobals.preloadChunkHandlers);
 		const conditionMap = chunkGraph.getChunkConditionMap(chunk, chunkHasJs);
 		const hasJsMatcher = compileBooleanMatcher(conditionMap);
 		const initialChunkIds = getInitialChunkIds(chunk, chunkGraph, chunkHasJs);
@@ -229,6 +237,86 @@ class ModuleChunkLoadingRuntimeModule extends RuntimeModule {
 					])
 				: "// no chunk on demand loading",
 			"",
+			withPrefetch && hasJsMatcher !== false
+				? `${
+						RuntimeGlobals.prefetchChunkHandlers
+					}.j = ${runtimeTemplate.basicFunction("chunkId", [
+						`if((!${
+							RuntimeGlobals.hasOwnProperty
+						}(installedChunks, chunkId) || installedChunks[chunkId] === undefined) && ${
+							hasJsMatcher === true ? "true" : hasJsMatcher("chunkId")
+						}) {`,
+						Template.indent([
+							"installedChunks[chunkId] = null;",
+							linkPrefetch.call(
+								Template.asString([
+									"var link = document.createElement('link');",
+									crossOriginLoading
+										? `link.crossOrigin = ${JSON.stringify(
+												crossOriginLoading
+											)};`
+										: "",
+									`if (${RuntimeGlobals.scriptNonce}) {`,
+									Template.indent(
+										`link.setAttribute("nonce", ${RuntimeGlobals.scriptNonce});`
+									),
+									"}",
+									'link.rel = "prefetch";',
+									'link.as = "script";',
+									`link.href = ${RuntimeGlobals.publicPath} + ${RuntimeGlobals.getChunkScriptFilename}(chunkId);`
+								]),
+								chunk
+							),
+							"document.head.appendChild(link);"
+						]),
+						"}"
+					])};`
+				: "// no prefetching",
+			"",
+			withPreload && hasJsMatcher !== false
+				? `${
+						RuntimeGlobals.preloadChunkHandlers
+					}.j = ${runtimeTemplate.basicFunction("chunkId", [
+						`if((!${
+							RuntimeGlobals.hasOwnProperty
+						}(installedChunks, chunkId) || installedChunks[chunkId] === undefined) && ${
+							hasJsMatcher === true ? "true" : hasJsMatcher("chunkId")
+						}) {`,
+						Template.indent([
+							"installedChunks[chunkId] = null;",
+							linkPreload.call(
+								Template.asString([
+									"var link = document.createElement('link');",
+									"link.charset = 'utf-8';",
+									`if (${RuntimeGlobals.scriptNonce}) {`,
+									Template.indent(
+										`link.setAttribute("nonce", ${RuntimeGlobals.scriptNonce});`
+									),
+									"}",
+									'link.rel = "modulepreload";',
+									`link.href = ${RuntimeGlobals.publicPath} + ${RuntimeGlobals.getChunkScriptFilename}(chunkId);`,
+									crossOriginLoading
+										? crossOriginLoading === "use-credentials"
+											? 'link.crossOrigin = "use-credentials";'
+											: Template.asString([
+													"if (link.href.indexOf(window.location.origin + '/') !== 0) {",
+													Template.indent(
+														`link.crossOrigin = ${JSON.stringify(
+															crossOriginLoading
+														)};`
+													),
+													"}"
+												])
+										: ""
+								]),
+								chunk
+							),
+							"document.head.appendChild(link);"
+						]),
+						"}"
+					])};`
+				: "// no preloaded",
+			"",
 			withExternalInstallChunk
 				? Template.asString([
 						`${RuntimeGlobals.externalInstallChunk} = installChunk;`

package/lib/hmr/LazyCompilationPlugin.js

@@ -38,7 +38,7 @@ const { registerNotSerializable } = require("../util/serialization");
 /** @typedef {import("../util/fs").InputFileSystem} InputFileSystem */
 
 /**
- * @typedef {Object} BackendApi
+ * @typedef {object} BackendApi
  * @property {function(Error=): void} dispose
  * @property {function(Module): { client: string, data: string, active: boolean }} module
  */
@@ -319,7 +319,7 @@ class LazyCompilationDependencyFactory extends ModuleFactory {
 
 class LazyCompilationPlugin {
 	/**
-	 * @param {Object} options options
+	 * @param {object} options options
 	 * @param {(function(Compiler, function(Error?, BackendApi?): void): void) | function(Compiler): Promise<BackendApi>} options.backend the backend
 	 * @param {boolean} options.entries true, when entries are lazy compiled
 	 * @param {boolean} options.imports true, when import() modules are lazy compiled

package/lib/ids/ChunkModuleIdRangePlugin.js

@@ -14,7 +14,7 @@ const {
 /** @typedef {import("../Compiler")} Compiler */
 
 /**
- * @typedef {Object} ChunkModuleIdRangePluginOptions
+ * @typedef {object} ChunkModuleIdRangePluginOptions
  * @property {string} name the chunk name
  * @property {("index" | "index2" | "preOrderIndex" | "postOrderIndex")=} order order
  * @property {number=} start start id

package/lib/ids/DeterministicChunkIdsPlugin.js

@@ -16,7 +16,7 @@ const {
 /** @typedef {import("../Module")} Module */
 
 /**
- * @typedef {Object} DeterministicChunkIdsPluginOptions
+ * @typedef {object} DeterministicChunkIdsPluginOptions
  * @property {string=} context context for ids
  * @property {number=} maxLength maximum length of ids
  */

package/lib/ids/DeterministicModuleIdsPlugin.js

@@ -18,7 +18,7 @@ const {
 /** @typedef {import("../Module")} Module */
 
 /**
- * @typedef {Object} DeterministicModuleIdsPluginOptions
+ * @typedef {object} DeterministicModuleIdsPluginOptions
  * @property {string=} context context relative to which module identifiers are computed
  * @property {function(Module): boolean=} test selector function for modules
  * @property {number=} maxLength maximum id length in digits (used as starting point)

package/lib/ids/IdHelpers.js

@@ -78,7 +78,7 @@ const shortenLongString = (string, delimiter, hashFunction) => {
 /**
  * @param {Module} module the module
  * @param {string} context context directory
- * @param {Object=} associatedObjectForCache an object to which the cache will be attached
+ * @param {object=} associatedObjectForCache an object to which the cache will be attached
  * @returns {string} short module name
  */
 const getShortModuleName = (module, context, associatedObjectForCache) => {
@@ -98,7 +98,7 @@ exports.getShortModuleName = getShortModuleName;
  * @param {Module} module the module
  * @param {string} context context directory
  * @param {string | Hash} hashFunction hash function to use
- * @param {Object=} associatedObjectForCache an object to which the cache will be attached
+ * @param {object=} associatedObjectForCache an object to which the cache will be attached
  * @returns {string} long module name
  */
 const getLongModuleName = (
@@ -116,7 +116,7 @@ exports.getLongModuleName = getLongModuleName;
 /**
  * @param {Module} module the module
  * @param {string} context context directory
- * @param {Object=} associatedObjectForCache an object to which the cache will be attached
+ * @param {object=} associatedObjectForCache an object to which the cache will be attached
  * @returns {string} full module name
  */
 const getFullModuleName = (module, context, associatedObjectForCache) => {
@@ -134,7 +134,7 @@ exports.getFullModuleName = getFullModuleName;
  * @param {string} context context directory
  * @param {string} delimiter delimiter for names
  * @param {string | Hash} hashFunction hash function to use
- * @param {Object=} associatedObjectForCache an object to which the cache will be attached
+ * @param {object=} associatedObjectForCache an object to which the cache will be attached
  * @returns {string} short chunk name
  */
 const getShortChunkName = (
@@ -164,7 +164,7 @@ exports.getShortChunkName = getShortChunkName;
  * @param {string} context context directory
  * @param {string} delimiter delimiter for names
  * @param {string | Hash} hashFunction hash function to use
- * @param {Object=} associatedObjectForCache an object to which the cache will be attached
+ * @param {object=} associatedObjectForCache an object to which the cache will be attached
  * @returns {string} short chunk name
  */
 const getLongChunkName = (
@@ -197,7 +197,7 @@ exports.getLongChunkName = getLongChunkName;
  * @param {Chunk} chunk the chunk
  * @param {ChunkGraph} chunkGraph the chunk graph
  * @param {string} context context directory
- * @param {Object=} associatedObjectForCache an object to which the cache will be attached
+ * @param {object=} associatedObjectForCache an object to which the cache will be attached
  * @returns {string} full chunk name
  */
 const getFullChunkName = (

package/lib/ids/NamedChunkIdsPlugin.js

@@ -20,7 +20,7 @@ const {
 /** @typedef {import("../Module")} Module */
 
 /**
- * @typedef {Object} NamedChunkIdsPluginOptions
+ * @typedef {object} NamedChunkIdsPluginOptions
  * @property {string} [context] context
  * @property {string} [delimiter] delimiter
  */

package/lib/ids/NamedModuleIdsPlugin.js

@@ -19,7 +19,7 @@ const {
 /** @typedef {import("../Module")} Module */
 
 /**
- * @typedef {Object} NamedModuleIdsPluginOptions
+ * @typedef {object} NamedModuleIdsPluginOptions
  * @property {string} [context] context
  */
 

package/lib/ids/SyncModuleIdsPlugin.js

@@ -15,7 +15,7 @@ const plugin = "SyncModuleIdsPlugin";
 
 class SyncModuleIdsPlugin {
 	/**
-	 * @param {Object} options options
+	 * @param {object} options options
 	 * @param {string} options.path path to file
 	 * @param {string=} options.context context for module names
 	 * @param {function(Module): boolean} options.test selector for modules
@@ -63,7 +63,7 @@ class SyncModuleIdsPlugin {
 		if (this._write) {
 			compiler.hooks.emitRecords.tapAsync(plugin, callback => {
 				if (!data || !dataChanged) return callback();
-				/** @type {Object<string, string | number>} */
+				/** @type {{[key: string]: string | number}} */
 				const json = {};
 				const sorted = Array.from(data).sort(([a], [b]) => (a < b ? -1 : 1));
 				for (const [key, value] of sorted) {

package/lib/index.js

@@ -60,6 +60,8 @@ const memoize = require("./util/memoize");
 /** @typedef {import("./stats/DefaultStatsFactoryPlugin").StatsModuleTraceDependency} StatsModuleTraceDependency */
 /** @typedef {import("./stats/DefaultStatsFactoryPlugin").StatsModuleTraceItem} StatsModuleTraceItem */
 /** @typedef {import("./stats/DefaultStatsFactoryPlugin").StatsProfile} StatsProfile */
+/** @typedef {import("./util/fs").InputFileSystem} InputFileSystem */
+/** @typedef {import("./util/fs").OutputFileSystem} OutputFileSystem */
 
 /**
  * @template {Function} T
@@ -221,6 +223,9 @@ module.exports = mergeExports(fn, {
 	get HotModuleReplacementPlugin() {
 		return require("./HotModuleReplacementPlugin");
 	},
+	get InitFragment() {
+		return require("./InitFragment");
+	},
 	get IgnorePlugin() {
 		return require("./IgnorePlugin");
 	},
@@ -277,6 +282,9 @@ module.exports = mergeExports(fn, {
 	get Parser() {
 		return require("./Parser");
 	},
+	get PlatformPlugin() {
+		return require("./PlatformPlugin");
+	},
 	get PrefetchPlugin() {
 		return require("./PrefetchPlugin");
 	},
@@ -576,6 +584,9 @@ module.exports = mergeExports(fn, {
 		},
 		get LazySet() {
 			return require("./util/LazySet");
+		},
+		get compileBooleanMatcher() {
+			return require("./util/compileBooleanMatcher");
 		}
 	},
 

package/lib/javascript/CommonJsChunkFormatPlugin.js

@@ -32,7 +32,7 @@ class CommonJsChunkFormatPlugin {
 			"CommonJsChunkFormatPlugin",
 			compilation => {
 				compilation.hooks.additionalChunkRuntimeRequirements.tap(
-					"CommonJsChunkLoadingPlugin",
+					"CommonJsChunkFormatPlugin",
 					(chunk, set, { chunkGraph }) => {
 						if (chunk.hasRuntime()) return;
 						if (chunkGraph.getNumberOfEntryModules(chunk) > 0) {

package/lib/javascript/JavascriptGenerator.js

@@ -199,7 +199,6 @@ class JavascriptGenerator extends Generator {
 			chunkGraph: generateContext.chunkGraph,
 			module,
 			runtime: generateContext.runtime,
-			runtimes: generateContext.runtimes,
 			runtimeRequirements: generateContext.runtimeRequirements,
 			concatenationScope: generateContext.concatenationScope,
 			codeGenerationResults: generateContext.codeGenerationResults,

package/lib/javascript/JavascriptModulesPlugin.js

@@ -5,6 +5,7 @@
 
 "use strict";
 
+const eslintScope = require("eslint-scope");
 const { SyncWaterfallHook, SyncHook, SyncBailHook } = require("tapable");
 const vm = require("vm");
 const {
@@ -12,7 +13,8 @@ const {
 	OriginalSource,
 	PrefixSource,
 	RawSource,
-	CachedSource
+	CachedSource,
+	ReplaceSource
 } = require("webpack-sources");
 const Compilation = require("../Compilation");
 const { tryRunOrWebpackError } = require("../HookWebpackError");
@@ -30,11 +32,13 @@ const { last, someInIterable } = require("../util/IterableHelpers");
 const StringXor = require("../util/StringXor");
 const { compareModulesByIdentifier } = require("../util/comparators");
 const createHash = require("../util/createHash");
+const { getPathInAst, getAllReferences } = require("../util/mergeScope");
 const nonNumericOnlyHash = require("../util/nonNumericOnlyHash");
 const { intersectRuntime } = require("../util/runtime");
 const JavascriptGenerator = require("./JavascriptGenerator");
 const JavascriptParser = require("./JavascriptParser");
 
+/** @typedef {import("eslint-scope").Variable} Variable */
 /** @typedef {import("webpack-sources").Source} Source */
 /** @typedef {import("../Chunk")} Chunk */
 /** @typedef {import("../ChunkGraph")} ChunkGraph */
@@ -85,7 +89,7 @@ const printGeneratedCodeForStack = (module, code) => {
 };
 
 /**
- * @typedef {Object} RenderContext
+ * @typedef {object} RenderContext
  * @property {Chunk} chunk the chunk
  * @property {DependencyTemplates} dependencyTemplates the dependency templates
  * @property {RuntimeTemplate} runtimeTemplate the runtime template
@@ -96,7 +100,7 @@ const printGeneratedCodeForStack = (module, code) => {
  */
 
 /**
- * @typedef {Object} MainRenderContext
+ * @typedef {object} MainRenderContext
  * @property {Chunk} chunk the chunk
  * @property {DependencyTemplates} dependencyTemplates the dependency templates
  * @property {RuntimeTemplate} runtimeTemplate the runtime template
@@ -108,7 +112,7 @@ const printGeneratedCodeForStack = (module, code) => {
  */
 
 /**
- * @typedef {Object} ChunkRenderContext
+ * @typedef {object} ChunkRenderContext
  * @property {Chunk} chunk the chunk
  * @property {DependencyTemplates} dependencyTemplates the dependency templates
  * @property {RuntimeTemplate} runtimeTemplate the runtime template
@@ -120,7 +124,7 @@ const printGeneratedCodeForStack = (module, code) => {
  */
 
 /**
- * @typedef {Object} RenderBootstrapContext
+ * @typedef {object} RenderBootstrapContext
  * @property {Chunk} chunk the chunk
  * @property {CodeGenerationResults} codeGenerationResults results of code generation
  * @property {RuntimeTemplate} runtimeTemplate the runtime template
@@ -132,7 +136,7 @@ const printGeneratedCodeForStack = (module, code) => {
 /** @typedef {RenderContext & { inlined: boolean }} StartupRenderContext */
 
 /**
- * @typedef {Object} CompilationHooks
+ * @typedef {object} CompilationHooks
  * @property {SyncWaterfallHook<[Source, Module, ChunkRenderContext]>} renderModuleContent
  * @property {SyncWaterfallHook<[Source, Module, ChunkRenderContext]>} renderModuleContainer
  * @property {SyncWaterfallHook<[Source, Module, ChunkRenderContext]>} renderModulePackage
@@ -818,13 +822,19 @@ class JavascriptModulesPlugin {
 			const lastInlinedModule = last(inlinedModules);
 			const startupSource = new ConcatSource();
 			startupSource.add(`var ${RuntimeGlobals.exports} = {};\n`);
+			const renamedInlinedModule = this.renameInlineModule(
+				allModules,
+				renderContext,
+				inlinedModules,
+				chunkRenderContext,
+				hooks
+			);
+
 			for (const m of inlinedModules) {
-				const renderedModule = this.renderModule(
-					m,
-					chunkRenderContext,
-					hooks,
-					false
-				);
+				const renderedModule =
+					renamedInlinedModule.get(m) ||
+					this.renderModule(m, chunkRenderContext, hooks, false);
+
 				if (renderedModule) {
 					const innerStrict = !allStrict && m.buildInfo.strict;
 					const runtimeRequirements = chunkGraph.getModuleRuntimeRequirements(
@@ -840,11 +850,9 @@ class JavascriptModulesPlugin {
 							? // TODO check globals and top-level declarations of other entries and chunk modules
 								// to make a better decision
 								"it need to be isolated against other entry modules."
-							: chunkModules
-								? "it need to be isolated against other modules in the chunk."
-								: exports && !webpackExports
-									? `it uses a non-standard name for the exports (${m.exportsArgument}).`
-									: hooks.embedInRuntimeBailout.call(m, renderContext);
+							: exports && !webpackExports
+								? `it uses a non-standard name for the exports (${m.exportsArgument}).`
+								: hooks.embedInRuntimeBailout.call(m, renderContext);
 					let footer;
 					if (iife !== undefined) {
 						startupSource.add(
@@ -1383,6 +1391,155 @@ class JavascriptModulesPlugin {
 			"JavascriptModulesPlugin.getCompilationHooks().renderRequire"
 		);
 	}
+
+	/**
+	 * @param {Module[]} allModules allModules
+	 * @param {MainRenderContext} renderContext renderContext
+	 * @param {Set<Module>} inlinedModules inlinedModules
+	 * @param {ChunkRenderContext} chunkRenderContext chunkRenderContext
+	 * @param {CompilationHooks} hooks hooks
+	 * @returns {Map<Module, Source>} renamed inlined modules
+	 */
+	renameInlineModule(
+		allModules,
+		renderContext,
+		inlinedModules,
+		chunkRenderContext,
+		hooks
+	) {
+		const { runtimeTemplate } = renderContext;
+
+		/** @type {Map<Module, { source: Source, ast: any, variables: Set<Variable>, usedInNonInlined: Set<Variable>}>} */
+		const inlinedModulesToInfo = new Map();
+		/** @type {Set<string>} */
+		const nonInlinedModuleThroughIdentifiers = new Set();
+		/** @type {Map<Module, Source>} */
+		const renamedInlinedModules = new Map();
+
+		for (const m of allModules) {
+			const isInlinedModule = inlinedModules && inlinedModules.has(m);
+			const moduleSource = this.renderModule(
+				m,
+				chunkRenderContext,
+				hooks,
+				isInlinedModule ? false : true
+			);
+
+			if (!moduleSource) continue;
+			const code = /** @type {string} */ (moduleSource.source());
+			const ast = JavascriptParser._parse(code, {
+				sourceType: "auto"
+			});
+
+			const scopeManager = eslintScope.analyze(ast, {
+				ecmaVersion: 6,
+				sourceType: "module",
+				optimistic: true,
+				ignoreEval: true
+			});
+
+			const globalScope = scopeManager.acquire(ast);
+			if (inlinedModules && inlinedModules.has(m)) {
+				const moduleScope = globalScope.childScopes[0];
+				inlinedModulesToInfo.set(m, {
+					source: moduleSource,
+					ast,
+					variables: new Set(moduleScope.variables),
+					usedInNonInlined: new Set()
+				});
+			} else {
+				for (const ref of globalScope.through) {
+					nonInlinedModuleThroughIdentifiers.add(ref.identifier.name);
+				}
+			}
+		}
+
+		for (const [, { variables, usedInNonInlined }] of inlinedModulesToInfo) {
+			for (const variable of variables) {
+				if (nonInlinedModuleThroughIdentifiers.has(variable.name)) {
+					usedInNonInlined.add(variable);
+				}
+			}
+		}
+
+		for (const [m, moduleInfo] of inlinedModulesToInfo) {
+			const { ast, source: _source, usedInNonInlined } = moduleInfo;
+			const source = new ReplaceSource(_source);
+			if (usedInNonInlined.size === 0) {
+				renamedInlinedModules.set(m, source);
+				continue;
+			}
+
+			const usedNames = new Set(
+				Array.from(inlinedModulesToInfo.get(m).variables).map(v => v.name)
+			);
+
+			for (const variable of usedInNonInlined) {
+				const references = getAllReferences(variable);
+				const allIdentifiers = new Set(
+					references.map(r => r.identifier).concat(variable.identifiers)
+				);
+
+				const newName = this.findNewName(
+					variable.name,
+					usedNames,
+					m.readableIdentifier(runtimeTemplate.requestShortener)
+				);
+				usedNames.add(newName);
+				for (const identifier of allIdentifiers) {
+					const r = identifier.range;
+					const path = getPathInAst(ast, identifier);
+					if (path && path.length > 1) {
+						const maybeProperty =
+							path[1].type === "AssignmentPattern" && path[1].left === path[0]
+								? path[2]
+								: path[1];
+						if (maybeProperty.type === "Property" && maybeProperty.shorthand) {
+							source.insert(r[1], `: ${newName}`);
+							continue;
+						}
+					}
+					source.replace(r[0], r[1] - 1, newName);
+				}
+			}
+
+			renamedInlinedModules.set(m, source);
+		}
+
+		return renamedInlinedModules;
+	}
+
+	/**
+	 * @param {string} oldName oldName
+	 * @param {Set<string>} usedName usedName
+	 * @param {string} extraInfo extraInfo
+	 * @returns {string} extraInfo
+	 */
+	findNewName(oldName, usedName, extraInfo) {
+		let name = oldName;
+
+		// Remove uncool stuff
+		extraInfo = extraInfo.replace(
+			/\.+\/|(\/index)?\.([a-zA-Z0-9]{1,4})($|\s|\?)|\s*\+\s*\d+\s*modules/g,
+			""
+		);
+		const splittedInfo = extraInfo.split("/");
+		while (splittedInfo.length) {
+			name = splittedInfo.pop() + (name ? "_" + name : "");
+			const nameIdent = Template.toIdentifier(name);
+			if (!usedName.has(nameIdent)) {
+				return nameIdent;
+			}
+		}
+
+		let i = 0;
+		let nameWithNumber = Template.toIdentifier(`${name}_${i}`);
+		while (usedName.has(nameWithNumber)) {
+			i++;
+			nameWithNumber = Template.toIdentifier(`${name}_${i}`);
+		}
+		return nameWithNumber;
+	}
 }
 
 module.exports = JavascriptModulesPlugin;