HMR not working with multiple entries

• Operating System: Linux
• Node Version: 14.14.0
• NPM Version: 6.14.7
• webpack Version: 5.2.0
• webpack-dev-server Version: 3.11.0
• Browser: Google Chrome

• This is a bug
• This is a modification request

Code

https://github.com/slightlyfaulty/webpack-hmr-multi-entry-repro

// webpack.config.js
...
entry: {
  first: ['./src/first.js', './src/first.css'],
  second: ['./src/second.js', './src/second.css'],
},
...

Expected Behavior

After starting the dev server, hot module replacement should work for all JS and CSS files from all webpack entries.

Actual Behavior

Hot module replacement doesn’t work for all entries. Only files from the second entry are hot reloaded when changed. Files from the first entry do not get hot reloaded when changed.

For Bugs; How can we reproduce the behavior?

1. Clone repro then yarn && yarn start
2. Open http://localhost:8080/
3. Change src/first.js and src/first.css - notice they are not hot reloaded
4. Change src/second.js and src/second.css - notice they are hot reloaded

[MohsenElgendy]

@slightlyfaulty setting optimization.runtimeChunk: "single" fixed the problem for me.

[slightlyfaulty]

@khelkun I recently discovered that if you use the dependOn option for an entry, then it will use the runtime that’s embedded in the entry it depends on.

In this case you don’t need to use runtimeChunk: 'single' anymore, as long as the dependOn entry is always loaded first.