How to use Webpack Hot Middleware / Webpack Hot Reload with IIS Rewrite / relative base Url?

Question

We are developing an application that uses hapi as webserver and webpack-hot-middleware for hot-module-replacement.

The application server runs at http://hostname:8080.

The application is usually accessible via http://hostname/my/module/ To make http://hostname/my/module/ serve the application that runs under hostname:8080, we are using an IIS rewrite that rewrites everything from http://hostname/my/module/(...) to http://hostname:8080/(...).

The issue now comes in when developing using webpack-hot-middleware. It seems, webpack hot-module-replacement always tries to make its hmr endpoint (I think the websocket for detecting/serving changes) hardcoded at /__webpack_hmr which - if the root page http://hostname/my/module/ is opened - resolves to http://hostname/__webpack_hmr. Of course, this cannot be found and therefore returns a 404 since the IIS running at http://hostname/ does not know anything about webpack hmr.

Now, for development, it would also be fine to access the application using its own address http://hostname:8080/ but then, a CORS error happens:

Access to resource at 'http://hostname/__webpack_hmr' from origin 'http://hostname:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

So it seems even though I am accessing the application using http://hostname:8080, webpack-hmr still tries to open the socket at http://hostname/__webpack_hmr that then additionally fails with a CORS error.

Is there any option to tell the webpack.HotModuleReplacementPlugin that it should serve the __webpack_hmr endpoint as a relative path so it ends up as http://hostname/my/module/__webpack_hmr (which is rewritten to http://hostname:8080/__webpack_hmr which would be the correct address)?

Or if this is not possible, is there any way to at least get it working when accessing the application using http://hostname:8080/(...)?

I did not find anything in the docs. Only in some Github issues the Webpack publicPath configuration is mentioned but I did not see how it can help me.

Update I came a bit further and detected that setting the webpack-hot-middleware entrypoint in the webpack config to "webpack-hot-middleware/client?path=http://hostname/my/module/__webpack_hmr" makes the __webpack_hmr endpoint be available at the correct location.

But the next issue now is that the HRM files

• dist.XYZ.hot-update.json
• distbundle.XYZ.hot-update.js are also tried to be located directly under the root directory (/dist.XYZ.hot-update.json, /distbundle.XYZ.hot-update.js). Is there any possibility to make these locations relative / set a specific subdirectory for them?

Adding another IIS rewrite to rewrite those paths to something like http://localhost:8080/dist.XYZ.hot-update.json makes it work but I would prefer a solution without having to configure the IIS for this.

Answer 1

Try adding it without specifying the actual domain name and port

// Add hot reloading in development
  entry: [
    'webpack-hot-middleware/client?reload=true&path=/my/module/__webpack_hmr',
  ],

alternatively, you could use dynamicPublicPath and set the correct publicPath

// Add hot reloading in development
  entry: [
    'webpack-hot-middleware/client?reload=true&dynamicPublicPath=true',
  ],

check the documentation here https://github.com/webpack-contrib/webpack-hot-middleware