keep state of chunk loading during hmr updates

ignore duplicate chunk loads

lib/RuntimeGlobals.js

@@ -297,6 +297,11 @@ exports.hmrModuleData = "__webpack_require__.hmrD";
  */
 exports.hmrInvalidateModuleHandlers = "__webpack_require__.hmrI";
 
+/**
+ * the prefix for storing state of runtime modules when hmr is enabled
+ */
+exports.hmrRuntimeStatePrefix = "__webpack_require__.hmrS";
+
 /**
  * the AMD define function
  */

lib/esm/ModuleChunkLoadingRuntimeModule.js

@@ -76,6 +76,9 @@ class ModuleChunkLoadingRuntimeModule extends RuntimeModule {
 		const withOnChunkLoad = this._runtimeRequirements.has(
 			RuntimeGlobals.onChunksLoaded
 		);
+		const withHmr = this._runtimeRequirements.has(
+			RuntimeGlobals.hmrDownloadUpdateHandlers
+		);
 		const conditionMap = chunkGraph.getChunkConditionMap(chunk, chunkHasJs);
 		const hasJsMatcher = compileBooleanMatcher(conditionMap);
 		const initialChunkIds = getInitialChunkIds(chunk, chunkGraph);
@@ -93,6 +96,10 @@ class ModuleChunkLoadingRuntimeModule extends RuntimeModule {
 			true
 		);
 
+		const stateExpression = withHmr
+			? `${RuntimeGlobals.hmrRuntimeStatePrefix}_module`
+			: undefined;
+
 		return Template.asString([
 			withBaseURI
 				? Template.asString([
@@ -105,7 +112,9 @@ class ModuleChunkLoadingRuntimeModule extends RuntimeModule {
 			"// object to store loaded and loading chunks",
 			"// undefined = chunk not loaded, null = chunk preloaded/prefetched",
 			"// [resolve, reject, Promise] = chunk loading, 0 = chunk loaded",
-			"var installedChunks = {",
+			`var installedChunks = ${
+				stateExpression ? `${stateExpression} = ${stateExpression} || ` : ""
+			}{`,
 			Template.indent(
 				Array.from(initialChunkIds, id => `${JSON.stringify(id)}: 0`).join(
 					",\n"

lib/node/ReadFileChunkLoadingRuntimeModule.js

@@ -61,6 +61,10 @@ class ReadFileChunkLoadingRuntimeModule extends RuntimeModule {
 			false
 		);
 
+		const stateExpression = withHmr
+			? `${RuntimeGlobals.hmrRuntimeStatePrefix}_readFileVm`
+			: undefined;
+
 		return Template.asString([
 			withBaseURI
 				? Template.asString([
@@ -74,7 +78,9 @@ class ReadFileChunkLoadingRuntimeModule extends RuntimeModule {
 			"",
 			"// object to store loaded chunks",
 			'// "0" means "already loaded", Promise means loading',
-			"var installedChunks = {",
+			`var installedChunks = ${
+				stateExpression ? `${stateExpression} = ${stateExpression} || ` : ""
+			}{`,
 			Template.indent(
 				Array.from(initialChunkIds, id => `${JSON.stringify(id)}: 0`).join(
 					",\n"

lib/node/ReadFileCompileAsyncWasmPlugin.js

@@ -7,7 +7,7 @@
 
 const RuntimeGlobals = require("../RuntimeGlobals");
 const Template = require("../Template");
-const AsyncWasmChunkLoadingRuntimeModule = require("../wasm-async/AsyncWasmChunkLoadingRuntimeModule");
+const AsyncWasmLoadingRuntimeModule = require("../wasm-async/AsyncWasmLoadingRuntimeModule");
 
 /** @typedef {import("../Compiler")} Compiler */
 
@@ -93,7 +93,7 @@ class ReadFileCompileAsyncWasmPlugin {
 						set.add(RuntimeGlobals.publicPath);
 						compilation.addRuntimeModule(
 							chunk,
-							new AsyncWasmChunkLoadingRuntimeModule({
+							new AsyncWasmLoadingRuntimeModule({
 								generateLoadBinaryCode,
 								supportsStreaming: false
 							})

lib/node/ReadFileCompileWasmPlugin.js

@@ -80,7 +80,8 @@ class ReadFileCompileWasmPlugin {
 							new WasmChunkLoadingRuntimeModule({
 								generateLoadBinaryCode,
 								supportsStreaming: false,
-								mangleImports: this.options.mangleImports
+								mangleImports: this.options.mangleImports,
+								runtimeRequirements: set
 							})
 						);
 					});

lib/node/RequireChunkLoadingRuntimeModule.js

@@ -61,6 +61,10 @@ class RequireChunkLoadingRuntimeModule extends RuntimeModule {
 			true
 		);
 
+		const stateExpression = withHmr
+			? `${RuntimeGlobals.hmrRuntimeStatePrefix}_require`
+			: undefined;
+
 		return Template.asString([
 			withBaseURI
 				? Template.asString([
@@ -74,7 +78,9 @@ class RequireChunkLoadingRuntimeModule extends RuntimeModule {
 			"",
 			"// object to store loaded chunks",
 			'// "1" means "loaded", otherwise not loaded yet',
-			"var installedChunks = {",
+			`var installedChunks = ${
+				stateExpression ? `${stateExpression} = ${stateExpression} || ` : ""
+			}{`,
 			Template.indent(
 				Array.from(initialChunkIds, id => `${JSON.stringify(id)}: 1`).join(
 					",\n"

lib/wasm-async/AsyncWasmLoadingRuntimeModule.js

@@ -9,9 +9,9 @@ const RuntimeGlobals = require("../RuntimeGlobals");
 const RuntimeModule = require("../RuntimeModule");
 const Template = require("../Template");
 
-class AsyncWasmChunkLoadingRuntimeModule extends RuntimeModule {
+class AsyncWasmLoadingRuntimeModule extends RuntimeModule {
 	constructor({ generateLoadBinaryCode, supportsStreaming }) {
-		super("wasm chunk loading", RuntimeModule.STAGE_ATTACH);
+		super("wasm loading", RuntimeModule.STAGE_NORMAL);
 		this.generateLoadBinaryCode = generateLoadBinaryCode;
 		this.supportsStreaming = supportsStreaming;
 	}
@@ -75,4 +75,4 @@ class AsyncWasmChunkLoadingRuntimeModule extends RuntimeModule {
 	}
 }
 
-module.exports = AsyncWasmChunkLoadingRuntimeModule;
+module.exports = AsyncWasmLoadingRuntimeModule;

lib/wasm-sync/WasmChunkLoadingRuntimeModule.js

@@ -189,11 +189,17 @@ const generateImportObject = (
 };
 
 class WasmChunkLoadingRuntimeModule extends RuntimeModule {
-	constructor({ generateLoadBinaryCode, supportsStreaming, mangleImports }) {
+	constructor({
+		generateLoadBinaryCode,
+		supportsStreaming,
+		mangleImports,
+		runtimeRequirements
+	}) {
 		super("wasm chunk loading", RuntimeModule.STAGE_ATTACH);
 		this.generateLoadBinaryCode = generateLoadBinaryCode;
 		this.supportsStreaming = supportsStreaming;
 		this.mangleImports = mangleImports;
+		this._runtimeRequirements = runtimeRequirements;
 	}
 
 	/**
@@ -203,6 +209,9 @@ class WasmChunkLoadingRuntimeModule extends RuntimeModule {
 		const { chunkGraph, compilation, chunk, mangleImports } = this;
 		const { moduleGraph, outputOptions } = compilation;
 		const fn = RuntimeGlobals.ensureChunkHandlers;
+		const withHmr = this._runtimeRequirements.has(
+			RuntimeGlobals.hmrDownloadUpdateHandlers
+		);
 		const wasmModules = getAllWasmModules(moduleGraph, chunkGraph, chunk);
 		const declarations = [];
 		const importObjects = wasmModules.map(module => {
@@ -247,9 +256,16 @@ class WasmChunkLoadingRuntimeModule extends RuntimeModule {
 				runtime: chunk.runtime
 			}
 		);
+
+		const stateExpression = withHmr
+			? `${RuntimeGlobals.hmrRuntimeStatePrefix}_wasm`
+			: undefined;
+
 		return Template.asString([
 			"// object to store loaded and loading wasm modules",
-			"var installedWasmModules = {};",
+			`var installedWasmModules = ${
+				stateExpression ? `${stateExpression} = ${stateExpression} || ` : ""
+			}{};`,
 			"",
 			// This function is used to delay reading the installed wasm module promises
 			// by a microtask. Sorting them doesn't help because there are edge cases where

lib/web/FetchCompileAsyncWasmPlugin.js

@@ -6,7 +6,7 @@
 "use strict";
 
 const RuntimeGlobals = require("../RuntimeGlobals");
-const AsyncWasmChunkLoadingRuntimeModule = require("../wasm-async/AsyncWasmChunkLoadingRuntimeModule");
+const AsyncWasmLoadingRuntimeModule = require("../wasm-async/AsyncWasmLoadingRuntimeModule");
 
 /** @typedef {import("../Compiler")} Compiler */
 
@@ -48,7 +48,7 @@ class FetchCompileAsyncWasmPlugin {
 						set.add(RuntimeGlobals.publicPath);
 						compilation.addRuntimeModule(
 							chunk,
-							new AsyncWasmChunkLoadingRuntimeModule({
+							new AsyncWasmLoadingRuntimeModule({
 								generateLoadBinaryCode,
 								supportsStreaming: true
 							})

lib/web/FetchCompileWasmPlugin.js

@@ -58,7 +58,8 @@ class FetchCompileWasmPlugin {
 							new WasmChunkLoadingRuntimeModule({
 								generateLoadBinaryCode,
 								supportsStreaming: true,
-								mangleImports: this.options.mangleImports
+								mangleImports: this.options.mangleImports,
+								runtimeRequirements: set
 							})
 						);
 					});

lib/web/JsonpChunkLoadingRuntimeModule.js

@@ -98,6 +98,10 @@ class JsonpChunkLoadingRuntimeModule extends RuntimeModule {
 		const hasJsMatcher = compileBooleanMatcher(conditionMap);
 		const initialChunkIds = getInitialChunkIds(chunk, chunkGraph);
 
+		const stateExpression = withHmr
+			? `${RuntimeGlobals.hmrRuntimeStatePrefix}_jsonp`
+			: undefined;
+
 		return Template.asString([
 			withBaseURI
 				? Template.asString([
@@ -108,7 +112,9 @@ class JsonpChunkLoadingRuntimeModule extends RuntimeModule {
 			"// object to store loaded and loading chunks",
 			"// undefined = chunk not loaded, null = chunk preloaded/prefetched",
 			"// [resolve, reject, Promise] = chunk loading, 0 = chunk loaded",
-			"var installedChunks = {",
+			`var installedChunks = ${
+				stateExpression ? `${stateExpression} = ${stateExpression} || ` : ""
+			}{`,
 			Template.indent(
 				Array.from(initialChunkIds, id => `${JSON.stringify(id)}: 0`).join(
 					",\n"
@@ -389,16 +395,23 @@ class JsonpChunkLoadingRuntimeModule extends RuntimeModule {
 								'// add "moreModules" to the modules object,',
 								'// then flag all "chunkIds" as loaded and fire callback',
 								"var moduleId, chunkId, i = 0;",
-								"for(moduleId in moreModules) {",
+								`if(chunkIds.some(${runtimeTemplate.returningFunction(
+									"installedChunks[id] !== 0",
+									"id"
+								)})) {`,
 								Template.indent([
-									`if(${RuntimeGlobals.hasOwnProperty}(moreModules, moduleId)) {`,
-									Template.indent(
-										`${RuntimeGlobals.moduleFactories}[moduleId] = moreModules[moduleId];`
-									),
-									"}"
+									"for(moduleId in moreModules) {",
+									Template.indent([
+										`if(${RuntimeGlobals.hasOwnProperty}(moreModules, moduleId)) {`,
+										Template.indent(
+											`${RuntimeGlobals.moduleFactories}[moduleId] = moreModules[moduleId];`
+										),
+										"}"
+									]),
+									"}",
+									"if(runtime) var result = runtime(__webpack_require__);"
 								]),
 								"}",
-								"if(runtime) var result = runtime(__webpack_require__);",
 								"if(parentChunkLoadingFunction) parentChunkLoadingFunction(data);",
 								"for(;i < chunkIds.length; i++) {",
 								Template.indent([

lib/webworker/ImportScriptsChunkLoadingRuntimeModule.js

@@ -67,6 +67,10 @@ class ImportScriptsChunkLoadingRuntimeModule extends RuntimeModule {
 			false
 		);
 
+		const stateExpression = withHmr
+			? `${RuntimeGlobals.hmrRuntimeStatePrefix}_importScripts`
+			: undefined;
+
 		return Template.asString([
 			withBaseURI
 				? Template.asString([
@@ -78,7 +82,9 @@ class ImportScriptsChunkLoadingRuntimeModule extends RuntimeModule {
 			"",
 			"// object to store loaded chunks",
 			'// "1" means "already loaded"',
-			"var installedChunks = {",
+			`var installedChunks = ${
+				stateExpression ? `${stateExpression} = ${stateExpression} || ` : ""
+			}{`,
 			Template.indent(
 				Array.from(initialChunkIds, id => `${JSON.stringify(id)}: 1`).join(
 					",\n"

test/HotTestCases.template.js

@@ -64,6 +64,9 @@ const describeCases = config => {
 								);
 								let options = {};
 								if (fs.existsSync(configPath)) options = require(configPath);
+								if (typeof options === "function") {
+									options = options({ config });
+								}
 								if (!options.mode) options.mode = "development";
 								if (!options.devtool) options.devtool = false;
 								if (!options.context) options.context = testDirectory;

test/Stats.test.js

@@ -175,10 +175,10 @@ describe("Stats", () => {
 			      "assets": Array [
 			        Object {
 			          "name": "entryB.js",
-			          "size": 2938,
+			          "size": 2964,
 			        },
 			      ],
-			      "assetsSize": 2938,
+			      "assetsSize": 2964,
 			      "auxiliaryAssets": undefined,
 			      "auxiliaryAssetsSize": 0,
 			      "childAssets": undefined,
@@ -223,10 +223,10 @@ describe("Stats", () => {
 			      "info": Object {
 			        "javascriptModule": false,
 			        "minimized": true,
-			        "size": 2938,
+			        "size": 2964,
 			      },
 			      "name": "entryB.js",
-			      "size": 2938,
+			      "size": 2964,
 			      "type": "asset",
 			    },
 			    Object {

test/configCases/library/0-create-library/webpack.config.js

@@ -4,6 +4,7 @@ const webpack = require("../../../../");
 module.exports = (env, { testPath }) => [
 	{
 		output: {
+			uniqueName: "esm",
 			filename: "esm.js",
 			libraryTarget: "module"
 		},
@@ -19,6 +20,7 @@ module.exports = (env, { testPath }) => [
 	},
 	{
 		output: {
+			uniqueName: "esm-runtimeChunk",
 			filename: "esm-runtimeChunk/[name].js",
 			libraryTarget: "module"
 		},
@@ -37,6 +39,7 @@ module.exports = (env, { testPath }) => [
 	},
 	{
 		output: {
+			uniqueName: "commonjs",
 			filename: "commonjs.js",
 			libraryTarget: "commonjs",
 			iife: false
@@ -49,6 +52,7 @@ module.exports = (env, { testPath }) => [
 	},
 	{
 		output: {
+			uniqueName: "commonjs-iife",
 			filename: "commonjs-iife.js",
 			libraryTarget: "commonjs",
 			iife: true
@@ -61,6 +65,7 @@ module.exports = (env, { testPath }) => [
 	},
 	{
 		output: {
+			uniqueName: "amd",
 			filename: "amd.js",
 			libraryTarget: "amd",
 			iife: false
@@ -73,6 +78,7 @@ module.exports = (env, { testPath }) => [
 	},
 	{
 		output: {
+			uniqueName: "amd-iife",
 			filename: "amd-iife.js",
 			libraryTarget: "amd",
 			iife: true
@@ -85,6 +91,7 @@ module.exports = (env, { testPath }) => [
 	},
 	{
 		output: {
+			uniqueName: "amd-runtimeChunk",
 			filename: "amd-runtimeChunk/[name].js",
 			libraryTarget: "amd",
 			globalObject: "global",
@@ -102,6 +109,7 @@ module.exports = (env, { testPath }) => [
 	},
 	{
 		output: {
+			uniqueName: "amd-iife-runtimeChunk",
 			filename: "amd-iife-runtimeChunk/[name].js",
 			libraryTarget: "amd",
 			globalObject: "global",
@@ -119,6 +127,7 @@ module.exports = (env, { testPath }) => [
 	},
 	{
 		output: {
+			uniqueName: "umd",
 			filename: "umd.js",
 			libraryTarget: "umd"
 		},
@@ -130,6 +139,7 @@ module.exports = (env, { testPath }) => [
 	},
 	{
 		output: {
+			uniqueName: "umd-default",
 			filename: "umd-default.js",
 			libraryTarget: "umd",
 			libraryExport: "default"
@@ -142,6 +152,7 @@ module.exports = (env, { testPath }) => [
 	},
 	{
 		output: {
+			uniqueName: "this",
 			filename: "this.js",
 			libraryTarget: "this",
 			iife: false
@@ -154,6 +165,7 @@ module.exports = (env, { testPath }) => [
 	},
 	{
 		output: {
+			uniqueName: "this-iife",
 			filename: "this-iife.js",
 			libraryTarget: "this",
 			iife: true
@@ -166,6 +178,7 @@ module.exports = (env, { testPath }) => [
 	},
 	{
 		output: {
+			uniqueName: "var",
 			filename: "var.js",
 			library: ["globalName", "x", "y"],
 			iife: false
@@ -184,6 +197,7 @@ module.exports = (env, { testPath }) => [
 	},
 	{
 		output: {
+			uniqueName: "var-iife",
 			filename: "var-iife.js",
 			library: ["globalName", "x", "y"],
 			iife: true
@@ -203,6 +217,7 @@ module.exports = (env, { testPath }) => [
 	{
 		entry: "./nested.js",
 		output: {
+			uniqueName: "commonjs-nested",
 			filename: "commonjs-nested.js",
 			libraryTarget: "commonjs",
 			libraryExport: "NS",
@@ -217,6 +232,7 @@ module.exports = (env, { testPath }) => [
 	{
 		entry: "./nested.js",
 		output: {
+			uniqueName: "commonjs-nested-iife",
 			filename: "commonjs-nested-iife.js",
 			libraryTarget: "commonjs",
 			libraryExport: "NS",
@@ -230,6 +246,7 @@ module.exports = (env, { testPath }) => [
 	},
 	{
 		output: {
+			uniqueName: "commonjs2-external",
 			filename: "commonjs2-external.js",
 			libraryTarget: "commonjs2",
 			iife: false
@@ -238,6 +255,7 @@ module.exports = (env, { testPath }) => [
 	},
 	{
 		output: {
+			uniqueName: "commonjs2-external-no-concat",
 			filename: "commonjs2-external-no-concat.js",
 			libraryTarget: "commonjs2",
 			iife: false
@@ -249,6 +267,7 @@ module.exports = (env, { testPath }) => [
 	},
 	{
 		output: {
+			uniqueName: "commonjs2-iife-external",
 			filename: "commonjs2-iife-external.js",
 			libraryTarget: "commonjs2",
 			iife: true
@@ -258,6 +277,7 @@ module.exports = (env, { testPath }) => [
 	{
 		mode: "development",
 		output: {
+			uniqueName: "commonjs2-external-eval",
 			filename: "commonjs2-external-eval.js",
 			libraryTarget: "commonjs2"
 		},
@@ -266,6 +286,7 @@ module.exports = (env, { testPath }) => [
 	{
 		mode: "development",
 		output: {
+			uniqueName: "commonjs2-external-eval-source-map",
 			filename: "commonjs2-external-eval-source-map.js",
 			libraryTarget: "commonjs2"
 		},
@@ -274,6 +295,7 @@ module.exports = (env, { testPath }) => [
 	},
 	{
 		output: {
+			uniqueName: "index",
 			filename: "index.js",
 			path: path.resolve(testPath, "commonjs2-split-chunks"),
 			libraryTarget: "commonjs2"
@@ -299,6 +321,7 @@ module.exports = (env, { testPath }) => [
 	},
 	{
 		output: {
+			uniqueName: "commonjs2-runtimeChunk",
 			filename: "commonjs2-runtimeChunk/[name].js",
 			libraryTarget: "commonjs2",
 			iife: false
@@ -314,6 +337,7 @@ module.exports = (env, { testPath }) => [
 	},
 	{
 		output: {
+			uniqueName: "commonjs2-iife-runtimeChunk",
 			filename: "commonjs2-iife-runtimeChunk/[name].js",
 			libraryTarget: "commonjs2",
 			iife: true
@@ -329,6 +353,7 @@ module.exports = (env, { testPath }) => [
 	},
 	{
 		output: {
+			uniqueName: "global-runtimeChunk",
 			filename: "global-runtimeChunk/[name].js",
 			library: ["globalName", "x", "y"],
 			libraryTarget: "global",
@@ -346,6 +371,7 @@ module.exports = (env, { testPath }) => [
 	},
 	{
 		output: {
+			uniqueName: "global-iife-runtimeChunk",
 			filename: "global-iife-runtimeChunk/[name].js",
 			library: ["globalName", "x", "y"],
 			libraryTarget: "global",
@@ -384,6 +410,7 @@ module.exports = (env, { testPath }) => [
 			library: {
 				type: "commonjs-module"
 			},
+			uniqueName: "commonjs-module",
 			filename: "[name].js"
 		},
 		resolve: {

test/hotCases/chunks/update-chunk-loading-runtime/chunk.js

@@ -0,0 +1 @@
+export default 42;

test/hotCases/chunks/update-chunk-loading-runtime/index.js

@@ -0,0 +1,30 @@
+import value from "vendor";
+// if (import.meta.webpackHot.data) throw new Error("Should not be executed again");
+it("should correctly self-accept an entrypoint when chunk loading runtime module is updated", done => {
+	const hash = __webpack_hash__;
+	expect(value).toBe(1);
+	let hmrData;
+	import.meta.webpackHot.dispose(data => {
+		hmrData = data;
+	});
+	NEXT(
+		require("../../update")(done, true, () => {
+			expect(hmrData).toHaveProperty("ok", true);
+			hmrData.test();
+			expect(hmrData.hash).not.toBe(hash);
+			hmrData.loadChunk().then(m => {
+				expect(m.default).toBe(42);
+				done();
+			}, done);
+		})
+	);
+});
+import.meta.webpackHot.accept();
+---
+import value from "vendor";
+import.meta.webpackHot.data.ok = true;
+import.meta.webpackHot.data.loadChunk = () => import("./chunk");
+import.meta.webpackHot.data.test = () => {
+	expect(value).toBe(2);
+};
+import.meta.webpackHot.data.hash = __webpack_hash__;

test/hotCases/chunks/update-chunk-loading-runtime/node_modules/vendor.js

@@ -0,0 +1,3 @@
+export default 1;
+---
+export default 2;

test/hotCases/chunks/update-chunk-loading-runtime/webpack.config.js

@@ -0,0 +1,12 @@
+module.exports = ({ config }) => ({
+	output: {
+		filename: "[name].js"
+	},
+	optimization: {
+		runtimeChunk: config.target !== "webworker",
+		splitChunks: {
+			chunks: "all",
+			minSize: 0
+		}
+	}
+});

types.d.ts

@@ -12036,6 +12036,7 @@ declare namespace exports {
 		export let hmrDownloadUpdateHandlers: string;
 		export let hmrModuleData: string;
 		export let hmrInvalidateModuleHandlers: string;
+		export let hmrRuntimeStatePrefix: string;
 		export let amdDefine: string;
 		export let amdOptions: string;
 		export let system: string;