search

survivejs / webpack-book

From apprentice to master (CC BY-NC-ND)
https://survivejs.com/webpack/
2.42k stars 319 forks source link

Enhance section on Hot Module Replacement #289

Closed gavinorland closed 6 years ago

gavinorland commented 6 years ago

I found the first half of this section to be fine, describing the need to either enable flag --hot or use HotModuleReplacementPlugin(), but in order actually get this working with React I found myself looking around for other info.

The thing that actually got it working for me was react-hot-loader so this might be specifically worth mentioning as perhaps the easiest way currently with Webpack and WDS. I also noted that only the root components needs exporting using this, not each component.

The second thing I learned which might be worth including is that if not using WDS, but maybe only Express, you can enable your hot module reloading via middleware.

sapegin commented 6 years ago

There are two different things: webpack hot module replacement is generic and works with any code, React Hot Loaders (and similar tools) works only with React. I’d not recommend it though and none of them are actively maintained. Most likely you don’t even need it ;-)

gavinorland commented 6 years ago

Thanks - I already understand those points. When you say React Hot Loader is not actively maintained, however, I am confused since a new version is being prepared here!

sapegin commented 6 years ago

Yeah, since 18 days ago ;-) But I don’t think it would change much.

gavinorland commented 6 years ago

It probably doesn't need to ;-)

sapegin commented 6 years ago

Sure, module.hot is enough most of the time and easy to set up ;-)

gavinorland commented 6 years ago

Anyway, this post is really just for Juho to consider mentioning these techniques for HMR which are also available. Thanks for your input all the same :)

bebraw commented 6 years ago

See https://survivejs.com/webpack/appendices/hmr/ . I added a small bit about JS and the need for react-hot-loader and such. It's enough that the appendix explains the webpack side of things. App-side is documented per solution.