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.

const HtmlWebPackPlugin = require("html-webpack-plugin");
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
const DashboardPlugin = require("@module-federation/dashboard-plugin");

const deps = require("./package.json").dependencies;
module.exports = {
  output: {
    publicPath: "http://localhost:8080/",
  },
  // defaults to "web", Its main purpose is to bundle JavaScript files for usage in a browser.
  target: "web",
  devtool: "source-map",
  devServer: {
    port: 8080,
    historyApiFallback: true,
    // required if using webpack-dev-server
    contentBase: "./dist",

  },

  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: "vue-loader",
      },
      {
        test: /\.(ts|tsx|js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
      {test: /\.ts$/, exclude: /node_modules/, loader: 'ts-loader'},
      {
        test: /\.(css|s[ac]ss)$/i,
        use: ["style-loader", "css-loader", "postcss-loader","sass-loader"],
      },
    ],
  },

  resolve: {
    extensions: [".tsx", ".ts", ".vue", ".jsx", ".js", ".json"],
    alias: {
      vue: "vue/dist/vue.js",
    },
  },

  plugins: [
    new ModuleFederationPlugin({
      name: "home",
      filename: "remoteEntry.js",
      remotes: {},
      exposes: {},
      shared: {
        ...deps,
        vue: {
          singleton: true,
          eager: true,
          version: deps.vue,
        },
      },
    }),

    new HtmlWebPackPlugin({
      template: "./src/index.html",
    }),
  ],
};

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.

{
 "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 9"
  ]
}

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

Github: 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.