Adding Hot Module Replacement (HMR) to Webpack

Once you have set up webpack and Babel to develop d3.js you might want to enable hot module replacement (HMR) so that you do not have to refresh the browser every time you make a change. First, in your root folder, create a file named webpack.config.js and add the following code.

const path = require('path');
const webpack = require('webpack');

module.exports = {
  entry: {
    app: './src/index.js'
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  devServer: {
    contentBase: './dist',
    hot: true
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ]
};

Note a few things have changed since the previous post. We are declaring that the devServer will be looking for the contentBase in the ./dist folder, so move the index.html file from the root directory into ./dist.

Also, we have renamed main.js to bundle.js. “Main” and “Index” are too similar, and “Bundle” is a little more descriptive. Make sure you make the src attribute change in index.html to reflect this.

This file, webpack.config.js is not required in webpack 4 or higher, but it is very useful to customize your development.

Next add the --hot tag to your webpack-dev-server script in the package.json file. See below.

"webpack-dev-server": "webpack-dev-server --hot",

Next run the following commands in your terminal while in your root directory:

npm run webpack
npm run webpack-dev-server

Your folder structure should now look like this.

Try changing something in your Javascript code, and your browser on localhost:8080 should refresh automatically.