From 93779a5e46e6b3c14c0a7be071f83bf98d17e93c Mon Sep 17 00:00:00 2001 From: SteveSandersonMS Date: Mon, 10 Oct 2016 12:00:56 +0100 Subject: [PATCH] aspnet-webpack configures HMR to point directly to http://localhost:/__webpack_hmr instead of proxying via /__webpack_hmr. This is because IE/Edge doesn't honour CORS headers properly following redirects (returns "Network Error 0x80004004"). This could be avoided if we could reverse-proxy to __webpack_hmr (waiting for https://github.com/aspnet/KestrelHttpServer/issues/1139) --- .../npm/aspnet-webpack/src/WebpackDevMiddleware.ts | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/src/Microsoft.AspNetCore.SpaServices/npm/aspnet-webpack/src/WebpackDevMiddleware.ts b/src/Microsoft.AspNetCore.SpaServices/npm/aspnet-webpack/src/WebpackDevMiddleware.ts index 3c53aea..9558e67 100644 --- a/src/Microsoft.AspNetCore.SpaServices/npm/aspnet-webpack/src/WebpackDevMiddleware.ts +++ b/src/Microsoft.AspNetCore.SpaServices/npm/aspnet-webpack/src/WebpackDevMiddleware.ts @@ -30,7 +30,7 @@ function arrayContainsStringStartingWith(array: string[], prefixToFind: string) return array.some(item => item.substring(0, prefixToFind.length) === prefixToFind); } -function attachWebpackDevMiddleware(app: any, webpackConfig: webpack.Configuration, enableHotModuleReplacement: boolean, enableReactHotModuleReplacement: boolean) { +function attachWebpackDevMiddleware(app: any, webpackConfig: webpack.Configuration, enableHotModuleReplacement: boolean, enableReactHotModuleReplacement: boolean, hmrEndpoint: string) { // Build the final Webpack config based on supplied options if (enableHotModuleReplacement) { // For this, we only support the key/value config format, not string or string[], since @@ -46,10 +46,11 @@ function attachWebpackDevMiddleware(app: any, webpackConfig: webpack.Configurati // Augment all entry points so they support HMR (unless they already do) Object.getOwnPropertyNames(entryPoints).forEach(entryPointName => { const webpackHotMiddlewareEntryPoint = 'webpack-hot-middleware/client'; + const webpackHotMiddlewareOptions = `?path=` + encodeURIComponent(hmrEndpoint); if (typeof entryPoints[entryPointName] === 'string') { - entryPoints[entryPointName] = [webpackHotMiddlewareEntryPoint, entryPoints[entryPointName]]; + entryPoints[entryPointName] = [webpackHotMiddlewareEntryPoint + webpackHotMiddlewareOptions, entryPoints[entryPointName]]; } else if (!arrayContainsStringStartingWith(entryPoints[entryPointName], webpackHotMiddlewareEntryPoint)) { - entryPoints[entryPointName].unshift(webpackHotMiddlewareEntryPoint); + entryPoints[entryPointName].unshift(webpackHotMiddlewareEntryPoint + webpackHotMiddlewareOptions); } }); @@ -135,7 +136,9 @@ export function createWebpackDevServer(callback: CreateDevServerCallback, option throw new Error('To use the Webpack dev server, you must specify a value for \'publicPath\' on the \'output\' section of your webpack config (for any configuration that targets browsers)'); } normalizedPublicPaths.push(removeTrailingSlash(publicPath)); - attachWebpackDevMiddleware(app, webpackConfig, enableHotModuleReplacement, enableReactHotModuleReplacement); + + const hmrEndpoint = `http://localhost:${listener.address().port}/__webpack_hmr`; + attachWebpackDevMiddleware(app, webpackConfig, enableHotModuleReplacement, enableReactHotModuleReplacement, hmrEndpoint); } });