Hot Module Replacement-Webpack 5

Hi there!👋

First of all let’s talk about what’s the meaning of Hot Module Replacement (HMR).

Hot Module Replacement (or HMR) is one of the most useful features offered by webpack. It allows all kinds of modules to be updated at runtime without the need for a full refresh

Now, Let me show you how we can enable the live reload in webpack 5.

in webpack.config.js file

set target to “web”, which its main purpose is to bundle JavaScript files for usage in a browser.

[embed]

and in package.json file add the browserslist. Browserslist is a tool that allows specifying which browsers should be supported in your frontend app by specifying “queries” in a config file. It’s used by frameworks/libraries such as React, Angular and Vue, but it’s not limited to them.

[embed]

and here we go 😉, now the live reload is enabled in your application

Github : https://github.com/daliayousry/webpack5-starter-app

Thanks for your interest. And if you want articles like those to show up in your feed, feel free to hit the “follow” button.