React-hot-loader: Multiple Entry Points

[Gillingham]

Looking at the docs, it seems to assume that there's only one entry point. Are there plans to support multi-page apps that have multiple entry points?

[gaearon]

Just do it normally, but make sure each entry point has webpack/hot/only-dev-server, or hot updates inside it won't work.

{
  entryPointA: ['./entryPointA', 'webpack/hot/only-dev-server'],
  entryPointB: ['./entryPointB', 'webpack/hot/only-dev-server'],
  devServerClient: 'webpack-dev-server/client?http://0.0.0.0:3000'
}

[gaearon]

(You're welcome to PR the docs!)

[Surreal9]

I've taken this approach to my app but it seems to trigger all of my entry points to be re-processed with every update. I'm used to working with webpack-dev-server where updating one file simply shows that one file was updated, but for some reason when I update a file when using this approach/syntax with react-hot-loader I get the same output in the console as I do when I first fire up the new RHL'd webpack-dev-server. Is there something I'm missing that could allow me to use multiple entry points, but not have all of the files re-checked by a single file update?

[gaearon]

@Surreal9 I don't know :-(. You can probably ask around in Webpack's Gitter room or repo.

[Gillingham]

@Surreal9 Did you ever find more information or a resolution to that?

[Surreal9]

Unfortunately not really.. I basically decided there was no benefit to switching over my main project to RHL since it was taking just as long to 'hot-load' as it was in doing a plain old refresh which was already built in with webpack-dev-server (due to RHL re-building the entire bundle each time).

I have since re-visited RHL in a new project, but I unfortunately see the same behaviour, (of re-building the entire bundle every time), even though this project only uses a single entry point. I've just decided to live with it.

[Surreal9]

I was linked to https://github.com/webpack/webpack/issues/669 though, which remains open, so maybe that's still related

[ghost]

Just a quick note on here. I couldn't get it to work using the answer provided by gaeron (https://github.com/gaearon/react-hot-loader/issues/141#issuecomment-106878103).

But this worked:

{
  entryPointA: ['./entryPointA', 'webpack/hot/only-dev-server', 'webpack-dev-server/client?http://0.0.0.0:3000'],
  entryPointB: ['./entryPointB', 'webpack/hot/only-dev-server', 'webpack-dev-server/client?http://0.0.0.0:3000']
}

Since that worked, I didn't bother to look into why that worked while the answer given previously did not work.

[monochrome-yeh]

@gaearon good answer! you have solved my problem 👯

[JonathanGuo]

@dcefram This actually works. webpack-dev-server/client cannot be loaded as an individual entry. It has to be bundled into each entry.

[hkjpotato]

It is better not to separate hmr related code in a different entry chunk if you are developing with Django and using django-wepack-loader.
If you keep the entry structure of development.config and production.config the same, you don't need to modify the template to load different static files.

[Dimon70007]

I have fixed hot-reloading with multiple entry points in my project by removing babel-polyfill from all entries in webpack.config.dev.js and using config like in the example above/

[thylle]

'webpack-dev-server/client?http://0.0.0.0:3000'

I had the same issue, added these lines but it didn't work. - Had to add (both) .js files to the index.html and then hot-reloading worked.

[SunShinewyf]

I have the same problem, any solutions?

[theKashey]

@SunShinewyf this problem shall not exists in 2020. Please refer to webpack-dev-server documentation. --hot should handle all cases.