Webpack calls itself a “module loader”. It does load your Javascript modules, in whatever format they may be. But it also loads your static assets like stylesheets or images.

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?

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.

  1. And I despise only one thing that is the huge amount of configuration options. But I bet there will be more tutorials and written documentation in the future.

  2. If you want to use LESS you can, there is a loader, but apparently you will have to use a 1.x version of LESS with it.