“Au revoir” to Manual Refreshing

Harnessing the Power of webpack 5 by enabling Hot Module Replacement for Rapid Development

Push button wait for walk signal — Photo by Ashim D’Silva on Unsplash

WARNING! The tools and configuration in this guide are only meant for development, please refrain from using them in production!

Hot Module Replacement (HMR) is a powerful tool that is commonly used in modern web development, particularly in module bundlers like webpack. HMR allows developers to update the code in a running application without having to manually reload the page after making changes.

Enabling HMR in your webpack setup can help you move faster in making changes to your web application and shipping code. I hope that after following the steps listed in this blog you also will be able to harness the power of Hot Module Replacement for seamless updates in your web development project.

Enabling Hot Module Replacement (HMR)

First things first, install the module webpack-dev-server which is development server that enables live reloading. There are other options of configuring HMR, but for most purposes webpack-dev-server is a good fit.

# if you prefer npm
npm install webpack-dev-server@4.15.1 --save-dev

# if you prefer yarn
yarn add -D webpack-dev-server@4.15.1