By adding webpack-dev-server (WDS) to our app, the page will automatically refresh on change.

But wouldn’t it be better if our app updates without a hard reload?

With Hot Module Replacement (HMR), we can do just that.

Prerequisite

Make sure you have webpack-dev-server set up.

Quickstart

The easiest way to enable HMR for WDS is to update the CLI command:

{
  "scripts": {
    "start": "webpack-dev-server --hot --inline"
  }
}

Now when you restart the server, the additional chunks should be displayed in the command-line output.

If you open http://localhost:8080/, you should get the following logs in the browser:

[HMR] Waiting for update signal from WDS...
[WDS] Hot Module Replacement enabled.

But that’s not enough for HMR to work. You’ll also need to accept the hot update:

// main.js
console.log('Hello, world!');

// https://webpack.github.io/docs/hot-module-replacement.html#api
if (module.hot) {
  module.hot.accept();
}

Now if you edit and save the app, you should get an update without a hard refresh.

And you should see the following console logs:

[WDS] App updated. Recompiling...
[WDS] App hot update...
[HMR] Checking for updates on the server...
[HMR] Updated modules:
[HMR]  - 77
[HMR] App is up to date.

One more thing, you could add a plugin to see the named module instead of the module id in the browser console:

// webpack.config.js
var webpack = require('webpack');
module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js'
  },
  plugins: [
    new webpack.NamedModulesPlugin()
  ]
};

When you restart the server and update main.js, you should be able to see:

[HMR] Updated modules:
[HMR]  - ./main.js

Config

The alternative to enabling HMR from the CLI is through the configuration file:

// webpack.config.js
var webpack = require('webpack');
module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js'
  },
  plugins: [
    new webpack.NamedModulesPlugin(),
    new webpack.HotModuleReplacementPlugin()
  ],
  devServer: {
    inline: true,
    hot: true
  }
};

But you must revert package.json since you can’t have HMR enabled in both the CLI and the config:

{
  "scripts": {
    "start": "webpack-dev-server"
  }
}

Now if you restart the server, HMR should continue to work like before.

You can learn more about HMR from the “SurviveJS - Webpack” chapter.