HMR is possibly the most useful element of Webpack. It allows runtime updates of modules that need a total refresh. This section will explore the implementation of HMR, as well as detailing how it works and why it is so useful.

It is very important to note that HMR is not intended for and should never be used in production mode; it should only be used in development mode.

To enable HMR, what we first need to do is update our webpack-dev-server configuration and use Webpack's built-in HMR plugin. This feature is great for productivity.

It is also a good idea to remove the entry point for print.js as it will now be consumed by the index.js module.

Anyone who used webpack-dev-middleware instead of webpack-dev-server should now use the webpack-hot-middleware package to enable HMR:

1. To start using HMR, we need to return to the configuration file, webpack.config.js. Follow the amendment here:

  const path = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  const CleanWebpackPlugin = require('clean-webpack-plugin');
  const webpack = require('webpack');

  module.exports = {
    entry: {
       app: './src/index.js',
       print: './src/print.js'
       app: './src/index.js'
    },
    devtool: 'inline-source-map',
    devServer: {
      contentBase: './dist',
      hot: true
    },
    plugins: [
      // new CleanWebpackPlugin(['dist/*']) for < v2 versions of 
      // CleanWebpackPlugin
      new CleanWebpackPlugin(),
      new HtmlWebpackPlugin({
        title: 'Hot Module Replacement'
      }),
      new webpack.HotModuleReplacementPlugin()
    ],
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist')
    }
  };

Note the additions in the preceding code—the hot: option is set to true and the 'Hot Module Replacement' plugin has been added—as well as the creation of the new Webpack plugin in the configuration for HMR. All of this should be done to make use of the plugin and HMR.

2. The command line can be used to modify the webpack-dev-server configuration with the following command:

webpack-dev-server --hot 

This will allow ad hoc changes to be made to bundled applications.

3. index.js should now be updated so that when a change in print.js is detected, Webpack can accept the updated module. The changes are illustrated in bold in the following example; we are simply exposing the print.js file with an import expression and function:

  import _ from 'lodash';
  import printMe from './print.js';

  function component() {
    const element = document.createElement('div');
    const btn = document.createElement('button');

    element.innerHTML = _.join(['Hello', 'Webpack'], ' ');

    btn.innerHTML = 'Click me and check the console!';
    btn.onclick = printMe;

    element.appendChild(btn);

    return element;
  }

  document.body.appendChild(component());
 
  if (module.hot) {
    module.hot.accept('./print.js', function() {
      console.log('Accepting the updated printMe module');
      printMe();

    })
  }

If you make changes to the console log in print.js, the following output will be seen in the browser console. The obligatory printMe() button is missing for now, but that can be updated later:

  export default function printMe() {
    console.log('This got called from print.js!');
    console.log('Updating print.js...')
  }

A look at the console window should reveal the following printout:

[HMR] Waiting for update signal from WDS...
main.js:4395 [WDS] Hot Module Replacement enabled.
  2main.js:4395 [WDS] App updated. Recompiling...
  main.js:4395 [WDS] App hot update...
  main.js:4330 [HMR] Checking for updates on the server...
  main.js:10024 Accepting the updated printMe module!
  0.4b8ee77….hot-update.js:10 Updating print.js...
  main.js:4330 [HMR] Updated modules:
  main.js:4330 [HMR]  - 20

The preceding block reveals that HMR is awaiting a signal from Webpack and should HMR take place, the command-line utility can perform the automatic bundle amendment. The command-line window will also show this when left open. Node.js has an API that can be used in a similar way.