Do more in less time with Webpack HMR

Hot Module Replacement is a Webpack feature that updates your Javascript without a browser reload. It can even maintain your application state across code updates. It's primarily used for development.

This article is about why you should be using it - so if you've never heard of HMR, or if you don't use it for all your projects, read on.

NOTE: Browserify also supports hot module replacement via a plugin but my articles assume you are using Webpack.

So why do I need HMR?

Let's take a step back and talk about your development cycle. I'm not talking about project management or agile. Think smaller. I'm talking about this cycle: type code -> reload your app -> type more code -> ....

The type some code step is up to you for now. Let's look at the reload your app step. When you're working on client-side Javascript, that probably means switch to the browser and refresh.

That only takes a second right? Weelll, it might be a little bit more when you break it down:

1. ⌘tab 1-2 times to get to the browser.
2. ⌘R to reload the page.
3. ~1 second waiting for the page to reload.
4. Put the web page in the state you want it. (You lost your state during reload.)
5. ⌘tab to get back to your code editor.

(sorry these are mac shortcuts - windows users you get the idea)

Okay, obviously this is not a big deal, but, doing this hundreds of times per day adds up. And as a programmer, I hate doing anything more than once when I know I can write (or just get) a program to do it for me.

Also, let's not give ourselves a Repetitive Strain Injury by typing the same thing over and over. I've had an RSI and it is not fun.

What about Live Reload?

Live reload is similar to HMR, but it just automatically reloads the browser after every code change. Waiting for the reload may or may not be a problem depending on how fast your backend is.

Live reload also loses your state, so if you are developing a feature deep within a large single page application, that can be annoying.

Okay I'm sold, can I haz?

Yes you can! If you want to set it up right now, check out my article on the 3 ways to set up webpack HMR.

Or if you want to learn more, I've written an article to help you understand HMR and how it works.

Either way, you'll want to sign up for my mailing list right here in this box. You'll be the first to know when I write more articles about Webpack, HMR, and React.