How to hot-reload with Webpack?

3 min readNov 1, 2020

Prerequisites: Make sure you understand the basics of how to use TypeScript with Webpack. For that You can read my last lesson, here. 👈

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

You can also read the official tutorial at https://webpack.js.org/guides/hot-module-replacement/ but it can get a bit fuzzy. My article is more clear and straight to the point!

Let’s pick up where we left off

At the moment, if You want to have your application running with updated code in your browser, you have to

Compile the code aka npm run build
And then hit the refresh button in browser

— Obviously, this will drive every person insane after few hours, even the most toughest Indian programmers. (and it’s also a massive waste of time)

So how do upgrade our development environment?

In the wonderful world of Webpack, it is surprisingly easy. Let’s thank Tobias Koppers who is the author of Webpack

sokra - Overview

Arctic Code Vault Contributor Dismiss Sign up for your own profile on GitHub, the best place to host code, manage…

github.com

Task 1: How to use copy-webpack-plugin?

You need to have index.html file in your build folder. For that we can use copy-webpack-plugin. You can read more about it at webpack.js.org/copy-webpack-plugin

npm run install --save-dev copy-webpack-plugin

Update your webpack’s config file

//webpack.config.dev.js
...
const CopyPlugin = require('copy-webpack-plugin');

module.exports = {
  ...
  plugins: [
    new CopyPlugin({
      patterns: [
        {from: 'public'}
      ]
    })
  ],
  ...
}

Previous code snippet copies all your files from /public folder into output destination.

That means, make sure you have the correct path to bundle.js in your index.html relative to .html new location after build.

// /public/index.html
...
<body>
...
<script src="./bundle.js"></script>
</body>
...

Sidenote: It is also possible to use html-webpack-plugin, but we will not use it in this lesson.

Make sure you have thebuild script inpackage.json

"scripts": {
  ...
  "build": "webpack --config webpack.dev.config.js",
  ...
},

Now if you execute npm run build then it should create /dist folder with content:

If you have any questions, contact me at twitter/@codegodzilla

Now you know how to use copy-webpack-plugin, which is an essential skill in JavaScript web development!

Let’s continue with task 2.

Task 2: How to use webpack devServer?

We will implement hot-reloading with webpack-dev-server

DevServer | webpack

webpack-dev-server can be used to quickly develop an application. See the development guide to get started. This page…

webpack.js.org

1.Install dependency

npm run install --save-dev webpack-dev-server

2.Update the config file

// webpack.dev.config.js
...
module.exports = {
  ...
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    port: 9002,
  }
}

3. Add a new script

// package.json
"scripts": {
  ...
  "start:dev": "webpack-dev-server --open --config webpack.dev.config.js"
},

4.Make sure resolve.extensions value is correct. You need to have “.js” included, otherwise webpack-dev-server will not be able to find modules.

//webpack.dev.config.js
...
resolve: {
  extensions: ['.ts', ".js"],
},
...

5. Execute npm run start:dev

It should open browser with your index.html which links to your bundle.js

6. Test if hot reloading is working, for that change some code in/src folder , click save -> webpack should reload your website.

Congratulations, now you know the basics of hot module replacement with Webpack. 🚀

How to use React, TypeScript with Webpack?

For that you need to read my next lesson, check out my website www.codegodzilla.com

You can also find me on Twitter at https://twitter.com/codegodzilla

And my Youtube Channel is: “Youtube API Developer CodeGodzilla”

Good luck 🍀