I didn't understand how HMR works. Sometimes my projects didn't exactly match the provided examples or starter projects - and then I became lost.
If you've never heard of hot module replacement before, start by reading about why you should use it.
Read on to get a deep understanding of what HMR is and how it works so you can use it in all your projects.
To make these updates happen, Webpack installs the HMR Runtime into your output bundle. This is extra code that Webpack adds to your bundle so that it can run in the browser and receive module updates.
Another key component is the HMR Server. The HMR Server notifies the
HMR Runtime when an update has occurred and it provides those updates in
See how the HMR Runtime and the HMR Server fit into the big picture in the next section.
I'm so glad you asked! I happen to have a spiffy diagram to show you.
Let's start by going over all the pieces introduced in the diagram, then we can talk about how they work together.
<script>tag in the browser. It's usually served by the Bundle Server at something like
When you first run the HMR server, (using webpack-dev-server or webpack-hot-middleware), an initial bundle needs to be created. This same process happens regardless of whether or not you are using HMR.
Glance back up at the diagram to see where
B fit into the bigger
When you make a change in your text editor, a sequence of events needs to take place to deliver an updated module to the browser.
Here's the diagram again so you can visualize the process.
The HMR Runtime is a pretty big piece of this puzzle. It swaps out your old code for new code.
The most important thing to remember about the HMR Runtime is that it can't
automatically undo any side effects of your old code. That's why you have to
use module.hot.dispose() to undo any side effects. Read more about the
module.hot API in the
webpack HMR docs.
Use this knowledge of how HMR works and apply it to your projects! Now you
understand that HMR is really a
server and a
runtime. When configuring your
Webpack projects you need to make sure that both get set up.
If you need help getting set up - follow my webpack HMR tutorial. I'll tell you about the 3 ways to set up HMR, and point you towards the approach that fits your situation.
⇣ And if you liked the article, don't forget to sign up for updates! ⇣