webpack-hmr-middleware

A middleware package for Webpack Hot Module Replacement (HMR), extracted from webpack-dev-server to improve modularity and user experience.

Installation

Install webpack-hmr-middleware via npm:

webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const webpack = require("webpack");

const webpackConfig = (env, argv) => {
  return {
    entry: "./src/index.js",
    devServer: {
      static: "./dist",
      hot: true,
    },
    module: {
      rules: [
        {
          test: /\.svg$/,
          use: "svg-inline-loader",
        },
        {
          test: /\.css$/i,
          use: ["style-loader", "css-loader"],
        },
        {
          test: /\.(js|mjs|cjs)$/,
          use: "babel-loader",
        },
      ],
    },
    plugins: [
      new HtmlWebpackPlugin({
        template: "./src/index.html", // Path to your HTML template
      }),
      new webpack.HotModuleReplacementPlugin(), // Enable HMR globally
    ],
    output: {
      filename: "bundle.js",
      path: path.resolve(__dirname, "dist"),
      clean: true,
      publicPath: "/", // Adjust as needed
    },
    mode: argv.mode || "development",
  };
};

module.exports = webpackConfig;

Example Express Code

const express = require('express');
const webpack = require('webpack');
const createWebpackHmrMiddleware = require('webpack-hmr-middleware').default; // Import default export
const webpackConfig = require('./webpack.config.js'); // Adjust path as per your project

const app = express();
const compiler = webpack(webpackConfig);

// Setup HMR middleware
const hmrMiddleware = createWebpackHmrMiddleware(compiler, {
  publicPath: webpackConfig.output.publicPath,
  stats: { colors: true },
});