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.

screenshot hot module folder structure

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

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  • CSS Styling the Audio Element

    There are a few things you can do with CSS to style the HTML audio element in various browsers.

  • How to Get WP RSS Aggregator Feed to Validate

    I’m using the plugin WP RSS Aggregator, and I couldn’t get the custom feed to validate in other places. The validator said that it was missing an <author> field. If an item doesn’t have an author, then the feed doesn’t even supply an empty one. The way to fix it is to go to wp-content/plugins/wp-rss-aggregator/templates/custom-feed/entry.twig ... Read more

  • How to Remove Rank Math Top Banner

    Rank Math has added an ugly top banner to the sites using its plugin. Here's how to hide it.

  • Fix for High CPU Usage on Siteground

    The MailPoet cron job on my website was triggered by Google Bot and caused my CPU seconds on Siteground to go over the quota. Here's how I fixed it.

  • Fast MIDI Song Starter

    Here is a really easy way to build MIDI chord progressions using iRealPro.

  • What is Full Kontakt Required?

    Perhaps you don't know what Kontakt is or how it works. Hopefully we can sort these things out and get you on your way to making some music.

  • How To Style a Range Input Slider

    If you are going to build a custom html audio player, you will need to know how to style a range input slider.

  • How to Build a HTML Audio Player with Vanilla JS (Part 2)

    Here is another tutorial on how to build a custom html audio player with vanilla js.

  • Coding a Custom HTML Audio Player (Part 1)

    Here is a starter tutorial on how to create a custom HTML audio player with HTML and JavaScript.