gaearon / react-hot-boilerplate

Minimal live-editing example for React
MIT License
3.91k stars 879 forks source link

Question only? #98

Closed brianbier closed 7 years ago

brianbier commented 8 years ago

Hey I was trying to understand how the webpack auto reload is working. I know your using a webpack-dev-server, but what part of your code is forcing the reload to happen when you edit a component?

Thanks in advance. Any resources is much appreciated.

dawsbot commented 7 years ago

TL;DR: webpack injects a script on the frontend that has control of your browser refresh.

@brianbier The parsed jsx is served using WebPackDevServer here. This means that the server is able to both have access to your filesystem (listen for file changes), and refresh the browser.

If you want to read more about that "refresh the browser" part above, take a look at the WebPack Docs Explanation.

calesce commented 7 years ago

thanks for the answer @dawsonbotsford, I recommend reading Webpack Docs and Dan's blog post on approaches to hot reloading in React.