This is nothing inherently new, even require.js did this. But Webpack can do even more: I love two things about it.1 First its modularity and vast amount of loaders. It probably supports what you’re using now. Secondly its Hot Module Replacement API (HRM). Webpack can swap your modules while they are running.
If you’re like me, you’re thinking “yeah, whatever, this is just some flavor of live reload.” It’s not. This is different.
It doesn’t do a page refresh like live reload. Remember when working with a large/complex/badly designed app you had to click your way through the thing you’re developing for like 10 seconds? Every 30 seconds? React Hot Loader keeps your application state while it swaps your modules. This is insanely useful and time-saving.
And it doesn’t end there. While setting up a new project for work I decided to go all-in on this hot replacement hotness. Here is the commit where I got everything to work, someone might consider this a boilerplate.
So what does it do?
- React with ES6
- Webpack, obviously
- React Hot Loader
- SCSS with hot replacement2
- Tests with Karma (currently launching Chrome because there are no binaries of PhantomJS 2 for Linux yet)
What is missing? I still have to look into how you can build different bundles for production. Actually everything related to “running in production”, especially Source Maps would be good. But for the first steps a single bundle is probably alright.
Anyways, please try this out, it is amazing. As James Long put it:
You’ll never look back after experiencing this.