Webpack Dev Server not recognizing newly created HTML files during development

I’m using Webpack Dev Server to serve my project files, but I’m encountering an issue where any new HTML files (or other pages) I create after starting the server (npm start) are not accessible through the browser.

Problem:

• When I start the development server with npm start, I can
  access existing HTML files (like index.html). Also If I made any changes to the existing files
  then it’s updating nicely.

• But, if I create a new HTML file or other files in the src, src/pages, src/js etc directory
  after starting the server, I cannot access it through the browser
  (e.g., Cannot GET /about.html).

My Project Structure

my-project/
├── dist/
├── src/
│   ├── css/
│   ├── images/
│   ├── js/
│   └── pages/
│       ├── index.html
│       └── about.html  // New page added
└── webpack.config.js

My Webpack.config.js

const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
const glob = require("glob");
const { processHtmlLoader } = require("./html-partial-processor");

module.exports = (env, argv) => {
  const isProduction = argv.mode === "production";

  return {
    entry: "./src/js/app.js",
    output: {
      path: path.resolve(__dirname, "dist"),
      filename: "js/app.bundle.js",
      clean: true,
    },
    devServer: {
      static: {
        directory: path.join(__dirname, "dist"),
      },
      compress: true,
      port: 3000,
      open: true,
      hot: true,
    },
    module: {
      rules: [
        {
          test: /.(s[ac]ss|css)$/i,
          use: [
            isProduction ? MiniCssExtractPlugin.loader : "style-loader",
            "css-loader",
            "postcss-loader",
            "sass-loader",
          ],
        },
        {
          test: /.html$/i,
          use: [
            {
              loader: "html-loader",
              options: {
                preprocessor: processHtmlLoader,
              },
            },
          ],
        },
        {
          test: /.(png|jpe?g|gif|svg|ico|eot|ttf|woff)$/i,
          type: "asset/resource",
          generator: {
            filename: "images/[name][ext]",
          },
        },
        {
          test: /.m?js$/,
          exclude: /node_modules/,
          use: {
            loader: "babel-loader",
            options: {
              presets: ["@babel/preset-env"],
            },
          },
        },
      ],
    },
    resolve: {
      extensions: [".js"],
    },
    plugins: [
      ...glob.sync("./src/pages/*.html").map((file) => {
        return new HtmlWebpackPlugin({
          template: file,
          filename: path.basename(file),
        });
      }),
      new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
      }),

      ...(isProduction
        ? [
            new MiniCssExtractPlugin({
              filename: "css/app.min.css",
            }),
            new ImageMinimizerPlugin({
              minimizer: {
                implementation: ImageMinimizerPlugin.imageminMinify,
                options: {
                  plugins: [
                    ["mozjpeg", { quality: 70 }],
                    ["pngquant", { quality: [0.6, 0.8], speed: 3 }],
                    ["svgo", { removeViewBox: false }],
                    ["gifsicle", { interlaced: true, optimizationLevel: 3 }],
                    ["imagemin-webp", { quality: 75 }],
                  ],
                },
              },
            }),
          ]
        : []),
    ],
    mode: isProduction ? "production" : "development",
  };
};

My package.json

{
  "name": "marketpro",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "start": "webpack serve --mode development",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "dependencies": {
    "animate.css": "^4.1.1",
    "aos": "^2.3.4",
    "jquery": "^3.7.1",
    "jquery-ui": "^1.14.0",
    "jquery.marquee": "^1.6.0",
    "marketpro": "file:",
    "select2": "^4.1.0-rc.0",
    "slick-carousel": "^1.8.1",
    "vanilla-tilt": "^1.8.1",
    "wowjs": "^1.1.3"
  },
  "devDependencies": {
    "@babel/core": "^7.25.8",
    "@babel/preset-env": "^7.25.8",
    "@fullhuman/postcss-purgecss": "^6.0.0",
    "autoprefixer": "^10.4.20",
    "babel-loader": "^9.2.1",
    "css-loader": "^7.1.2",
    "cssnano": "^7.0.6",
    "glob": "^11.0.0",
    "html-loader": "^5.1.0",
    "html-webpack-plugin": "^5.6.0",
    "image-minimizer-webpack-plugin": "^4.1.0",
    "imagemin": "^9.0.0",
    "imagemin-gifsicle": "^7.0.0",
    "imagemin-mozjpeg": "^10.0.0",
    "imagemin-pngquant": "^10.0.0",
    "imagemin-svgo": "^11.0.1",
    "imagemin-webp": "^8.0.0",
    "mini-css-extract-plugin": "^2.9.1",
    "nodemon": "^3.1.7",
    "postcss": "^8.4.47",
    "postcss-loader": "^8.1.1",
    "postcss-preset-env": "^10.0.7",
    "sass": "^1.79.5",
    "sass-loader": "^16.0.2",
    "style-loader": "^4.0.0",
    "tailwindcss": "^3.4.13",
    "webpack": "^5.95.0",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^5.1.0"
  }
}

I’ll be very very thankful If anyone help me to solve this. I tried many solutions, but everytime I failed. Thanks in advance.