Duplicated “single” runtime

[MatTheCat]

• Operating System: Alpine 3.7.0
• Node Version: 10.6.0
• NPM Version: 6.1.0
• webpack Version: 4.15.1
• webpack-hot-client Version: 4.1.1

Expected Behavior

When optimization.runtimeChunk is single the client script should be injected in the runtime only.

Actual Behavior

The client script is injected in the runtime then the runtime is injected in the entrypoint. Also HMR doesn't work without allEntries: true; not sure if it's normal.

EDIT: it's normal I just didn't understand I needed it in my case.

Code

webpack.config.js

https://gist.github.com/MatTheCat/2e11f1ddbdf8bee2663fa2a5d2a227a2

serve.config.js

module.exports = {
  clipboard: false,
  devMiddleware: {
    publicPath: '/pattern-library/dist/'
  },
  hotClient: {
    host: {
      client: '*',
      server: 'webpack'
    },
    port: {
      client: +process.env.WEBPACK_HOT_PORT,
      server: 8081
    }
  },
  host: '0.0.0.0'
}

How Do We Reproduce?

Enable webpack-hot-client with optimization.runtimeChunk = 'single'.

[shellscape]

I don't know much about the optimization settings or what they're supposed to do, what their side-effects are, and I don't have the time to learn about that at the moment. Happy to review a PR that resolves this.

Also HMR doesn't work without allEntries: true; not sure if it's normal.

One actual issue per issue please. We haven't seen an issue with that, so it's probably due to the way your config is setup.

[adamscybot]

I think I am seeing this same thing. After much head-banging I can confirm there's definitely some difference in behaviour between "wepback-dev-server" and "webpack-serve".

When using runtimeChunk: 'single' with "webpack-serve" the window.webpackHotUpdate is set multiple times in each entry point which infers that handler code is being duplicated. With "wepback-dev-server", this code only appears in the runtime chunk -- which I think is probably the desired behaviour.

This seems to break HMR in some scenarios. I noticed the HMR of packages like https://github.com/shepherdwind/css-hot-loader and https://github.com/faceyspacey/extract-css-chunks-webpack-plugin seems to not work as the hot accept function never gets called. I think that might be because the hot client runtime being in every chunk is fundamentally incompatible when you have a separate runtime chunk. I don't know enough about Webpack do dig deeper at this point.

[MatTheCat]

Maybe @sokra could help? How could the client be injected in runtime chunks only?

Current strategy seems to add it to every entry.

[MatTheCat]

In the meantime I disabled autoConfigure and added webpack-hot-client/client as an entry.