Unable to generate a HTML file in dist folder

Question

I have a html file in src folder. I have installed html-loader and html-webpack-plugin to generate an updated html in dist folder. Using npm run build will generate a new html file in dist folder but I don't want to run same command each time and want to work in real time updates so I used npm start and it opens a browser window with html from src folder but it never generates a new html file in dist folder and even if I manually make a new html there, browser window will never be updated. So I am stuck with html from src folder (and since I am using static: ./dist even that won't be updated).

webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { title } = require("process");

module.exports = {
  mode: "development",
  entry: "./src/index.js",
  output: {
    filename: "main.js",
    path: path.resolve(__dirname, "dist"),
    clean: true,
    },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html",
      title: "todo-app",
    }),
  ],
  devtool: "inline-source-map",
  devServer: {
    static: "./dist",
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.html$/i,
        use: ["html-loader"],
      },
    ],
  },
};

Package.json

{
  "name": "todo-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "start": "webpack serve --open"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^6.6.0",
    "html-loader": "^3.1.0",
    "html-webpack-plugin": "^5.5.0",
    "style-loader": "^3.3.1",
    "webpack": "^5.68.0",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.7.4"
  }
}