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( | ||||
| 							hotUpdateGlobal | ||||
| 						)}] = ${runtimeTemplate.basicFunction( | ||||
| 						`var hmrGlobalJsonpLoader = ${runtimeTemplate.basicFunction( | ||||
| 							"chunkId, moreModules, runtime", | ||||
| 							[ | ||||
| 								"if (!currentUpdate) return;", | ||||
| 								"for(var moduleId in moreModules) {", | ||||
| 								Template.indent([ | ||||
| 									`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( | ||||
| 							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