Webpack-hot-middleware: hot-update.json 404

[DmitryVolkovTulaco]

• Operating System: macOS 10.13.4
• Node Version: 8.11.1
• NPM Version: 6.0.0
• webpack Version: 4.12.0
• ${package} Version: 2.22.2

Expected Behavior

*.hot-update.json file should generate on application startup

Actual Behavior

*hot-update.json file generates after first change with old hash (after first change it generates with original bundle hash, second time it generates with first bundle change hash etc.)

Code

https://gist.github.com/DmitryVolkovTulaco/e53edd2cecb2d8d262b717385439761e

How Do We Reproduce?

Reproduces every time, can upload project to github if needed

[lbittner-pdftron]

Getting the same issue with a very similar setup. Seems to only happen with a multi-config setup.

[royriojas]

It might be needed to use the name=configName option detailed in the Multi compiler mode section

// webpack.config.js
module.exports = [
    {
        name: 'mobile',
        entry: {
            vendor: 'vendor.js',
            main: ['webpack-hot-middleware/client?name=mobile', 'mobile.js']
        }
    },
    {
        name: 'desktop',
        entry: {
            vendor: 'vendor.js',
            main: ['webpack-hot-middleware/client?name=desktop', 'desktop.js']
        }
    }
]

this one worked for me.

[lbittner-pdftron]

After a bit of trial and error I found that I needed to have publicPath set for each config in my multi config setup.

My config merges a bunch of smaller project into one large dist folder, each subproject in a different subdirectory. I had to make sure that the publicPath for each config pointed to the folder where the subproject was going to be located, and not just the root of the dist folder. In this case, my publicPath in webpack.config and webpack-hot-middleware DID NOT have to match.

Something like this:

//webpack.config.js
module.exports = [
  {
    name: "Project1",
    entry: [
      'webpack-hot-middleware/client?name=Project1&path=/__webpack_hmr',
      path.resolve(__dirname, './project1/index.js')  
    ],
    output: {
      path: path.resolve(__dirname, './dist/project1'),
      publicPath: '/project1/'
    }
  },
  {
    name: "Project2",
    entry: [
      'webpack-hot-middleware/client?name=Project2&path=/__webpack_hmr',
      path.resolve(__dirname, './project2/index.js')  
    ],
    output: {
      path: path.resolve(__dirname, './dist/project2'),
      publicPath: '/project2/'
    }
  },
  {
    name: "Root",
    entry: [
      'webpack-hot-middleware/client?name=Root&path=/__webpack_hmr',
      path.resolve(__dirname, './index.js')  
    ],
    output: {
      path: path.resolve(__dirname, './dist/'),
      publicPath: '/'
    }
  }
]

// server.js
app.use(webpackDevMiddleware(compiler, {
  publicPath: '/dist/'
}));

...

[diegoddox]

Thanks @royriojas, that fixed the issue on my case.