mirror of https://github.com/webpack/webpack.git
				
				
				
			fix: allow multiple runtime instances to receive HMR updates
This commit is contained in:
		
							parent
							
								
									b4b35413f0
								
							
						
					
					
						commit
						74161a0ef4
					
				|  | @ -338,11 +338,10 @@ class JsonpChunkLoadingRuntimeModule extends RuntimeModule { | ||||||
| 						]), | 						]), | ||||||
| 						"}", | 						"}", | ||||||
| 						"", | 						"", | ||||||
| 						`${globalObject}[${JSON.stringify( | 						`var hmrGlobalJsonpLoader = ${runtimeTemplate.basicFunction( | ||||||
| 							hotUpdateGlobal |  | ||||||
| 						)}] = ${runtimeTemplate.basicFunction( |  | ||||||
| 							"chunkId, moreModules, runtime", | 							"chunkId, moreModules, runtime", | ||||||
| 							[ | 							[ | ||||||
|  | 								"if (!currentUpdate) return;", | ||||||
| 								"for(var moduleId in moreModules) {", | 								"for(var moduleId in moreModules) {", | ||||||
| 								Template.indent([ | 								Template.indent([ | ||||||
| 									`if(${RuntimeGlobals.hasOwnProperty}(moreModules, moduleId)) {`, | 									`if(${RuntimeGlobals.hasOwnProperty}(moreModules, moduleId)) {`, | ||||||
|  | @ -362,6 +361,18 @@ class JsonpChunkLoadingRuntimeModule extends RuntimeModule { | ||||||
| 								"}" | 								"}" | ||||||
| 							] | 							] | ||||||
| 						)};`,
 | 						)};`,
 | ||||||
|  | 						`var oldHmrGlobalJsonpLoader = ${globalObject}[${JSON.stringify( | ||||||
|  | 							hotUpdateGlobal | ||||||
|  | 						)}] || (${runtimeTemplate.basicFunction("", [])});`,
 | ||||||
|  | 						`${globalObject}[${JSON.stringify( | ||||||
|  | 							hotUpdateGlobal | ||||||
|  | 						)}] = ${runtimeTemplate.basicFunction( | ||||||
|  | 							"chunkId, moreModules, runtime", | ||||||
|  | 							[ | ||||||
|  | 								`oldHmrGlobalJsonpLoader(chunkId, moreModules, runtime);`, | ||||||
|  | 								`hmrGlobalJsonpLoader(chunkId, moreModules, runtime);` | ||||||
|  | 							] | ||||||
|  | 						)};`,
 | ||||||
| 						"", | 						"", | ||||||
| 						Template.getFunctionContent( | 						Template.getFunctionContent( | ||||||
| 							require("../hmr/JavascriptHotModuleReplacement.runtime.js") | 							require("../hmr/JavascriptHotModuleReplacement.runtime.js") | ||||||
|  |  | ||||||
|  | @ -0,0 +1,10 @@ | ||||||
|  | import { value } from './value.js'; | ||||||
|  | 
 | ||||||
|  | const div = document.createElement('div'); | ||||||
|  | div.innerHTML = value | ||||||
|  | document.body.appendChild(div); | ||||||
|  | 
 | ||||||
|  | module.hot.accept('./value.js', () => { | ||||||
|  | 	const newValue = require('./value.js').value; | ||||||
|  | 	div.innerHTML = newValue; | ||||||
|  | }) | ||||||
|  | @ -0,0 +1 @@ | ||||||
|  | export const value = 1; | ||||||
|  | @ -0,0 +1,17 @@ | ||||||
|  | const path = require("path"); | ||||||
|  | 
 | ||||||
|  | /** @type import('webpack').Configuration */ | ||||||
|  | module.exports = { | ||||||
|  | 	mode: "development", | ||||||
|  | 	entry: "./index.js", | ||||||
|  | 	output: { | ||||||
|  | 		path: path.resolve(__dirname, "dist"), | ||||||
|  | 		filename: "bundle.js" | ||||||
|  | 	}, | ||||||
|  | 	devServer: { | ||||||
|  | 		port: 8000, | ||||||
|  | 		headers: { | ||||||
|  | 			"Access-Control-Allow-Origin": "*" | ||||||
|  | 		} | ||||||
|  | 	} | ||||||
|  | }; | ||||||
|  | @ -0,0 +1,6 @@ | ||||||
|  | <!DOCTYPE html> | ||||||
|  | <html lang="en"> | ||||||
|  | 	<body> | ||||||
|  | 		<script src="index.js"></script> | ||||||
|  | 	</body> | ||||||
|  | </html> | ||||||
|  | @ -0,0 +1,23 @@ | ||||||
|  | function loadScript(url) { | ||||||
|  | 	return new Promise((resolve, reject) => { | ||||||
|  | 		const script = document.createElement('script') | ||||||
|  | 		script.src = url | ||||||
|  | 		if (url.endsWith('.mjs')) { | ||||||
|  | 			script.type = 'module' | ||||||
|  | 		} | ||||||
|  | 
 | ||||||
|  | 		script.onerror = (error) => { | ||||||
|  | 			document.body.removeChild(script) | ||||||
|  | 			reject(error) | ||||||
|  | 		} | ||||||
|  | 
 | ||||||
|  | 		script.onload = () => { | ||||||
|  | 			resolve() | ||||||
|  | 			document.body.removeChild(script) | ||||||
|  | 		} | ||||||
|  | 
 | ||||||
|  | 		document.body.append(script) | ||||||
|  | 	}) | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | loadScript('http://localhost:8000/bundle.js').then(() => loadScript('http://localhost:8000/bundle.js')) | ||||||
		Loading…
	
		Reference in New Issue