Introduction to Webpack HMR

Webpack has a feature called Hot Module Replacement (HMR), available since 1.x. I hadn’t focused on it much, but while improving developer experience recently, I touched this area. Summarizing it here also deepens my understanding of Webpack.

Concepts

From the docs:

Hot Module Replacement (HMR) exchanges, adds, or removes modules while an application is running, without a full reload. This can significantly speed up development in a few ways:

• Retain application state which is lost during a full reload.
• Save valuable development time by only updating what’s changed.
• Instantly update the browser when modifications are made to CSS/JS in the source code, which is almost comparable to changing styles directly in the browser’s dev tools.

Without HMR, each change to HTML/JS/CSS triggers a full page reload. With HMR, only the changed modules are updated, which is faster. Full reloads also lose runtime state—for example, data stored in singletons. HMR addresses these pain points.

How It Works

Understanding the flow helps clarify HMR’s capabilities.

1. You edit a source file.
2. The file system detects the change and notifies Webpack.
3. Webpack recompiles and notifies the HMR server.
   • Output file names carry a hash; if the source changes, the hash changes.
4. The HMR server notifies the HMR runtime via WebSocket; the runtime requests the updated modules.
   • Notification via WebSocket
   • Fetching updated modules via HTTP
5. The HMR runtime replaces the modules in the running app.

Enable HMR in Angular

The official guide is detailed. See: Angular Configure Hot Module Replacement

• If issues persist, check my example for a working setup.

Notes

• HMR is a Webpack feature, not something provided or officially supported by Angular.
• Changes to the host index.html won’t hot-reload. JS and CSS will, since in dev mode they’re loaded as modules.

Enable HMR in Create React App

React apps are often scaffolded with Create React App, so here’s how to enable HMR there. There’s also react-hot-loader; how does it relate to Webpack HMR?

Webpack HMR vs React Hot Loader

• React Hot Loader is a third-party loader built on top of Webpack HMR that provides React-specific hot replacement capabilities.
• It uses Webpack’s HMR API and enables hot-swapping individual components while preserving component state.

So they are different things: Webpack HMR is framework-agnostic, while React Hot Loader is tailored to React.

Which to use

Since React Hot Loader is more React-centric, it’s often the more convenient choice in React apps.

Setup

1. Install React Hot Loader

   $ npm install react-hot-loader
   

   I used version ^4.12.13. Note: it conflicts with react-router-dom@^4.3.1; upgrading the router to v5 resolves it.

2. Enable hot loader in index.js

   if (module.hot) {
   module.hot.accept('./routes', () => {
       const nextRoutes = require('./routes').default; // Again, depends on your project
       ReactDOM.render(
           <Provider store={store}>
               <Routes/>
           </Provider>,
           document.getElementById('root')
       );
   });
   

} ```

If you eject the Webpack config, you’ll notice HMR is enabled in dev; you just need to wire it up in your app.

If you still have issues, see my example — link.

Enable HMR in JHipster React

JHipster is a development platform that scaffolds modern web apps or microservice architectures. Many of my recent projects use it. Here’s how to enable HMR in the React app initialized by JHipster.

Open the following in index.tsx:

if (module.hot) {
  module.hot.accept('./app', () => {
    const NextApp = require<{ default: typeof AppComponent }>('./app').default;
    render(NextApp);
  });
}

Webpack’s HMR-related config is enabled by default.

If you still have issues, see my example — link.

Enable HMR in Vue

I don’t use Vue much, so just linking the docs:

Link

Final Thoughts

• This is a lightweight walkthrough intended to get things working.
• For more detail, read Webpack’s source.
• The techniques behind HMR or React Hot Loader are simple, but applying them to solve real problems is the valuable part. Sometimes we should use our tools to solve general problems, not just crank out repetitive business code. Agreed?

References

Many of these insights come from others’ work; links below:

• Angular Configure Hot Module Replacement
• Webpack Hot Module Replacement
• How to add Hot Module Reloading (HMR) to a React app
• Webpack HMR vs React-Hot-Loader (Chinese)
• Webpack HMR internals (Chinese)
• Understanding Webpack HMR