Why doesn't CleanWebpackPlugin work properly with watch?

Question

webpack

here is the webpack config.

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {
  context: path.resolve(__dirname, "src"),
  watch: true,
  mode: "development",
  entry: {
    main: "./index.js",
    analytics: "./analytics.js",
  },
  output: {
    filename: "[name].[contenthash].js",
    path: path.resolve(__dirname, "dist"),
  },
  module: {
    rules: [
      {
        test: /\.sass$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
    ],
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: "./index.html",
      filename: "index.html",
    }),
  ],
};

When changing a file and saving it, as it should, deletes old files and collects new ones. But if you do not change anything and click save, then the plugin deletes the html file. And such garbage is only in the watch: true mode. If you do not change anything and manually press the development assembly with watch: false, then the html file does not disappear.

Answer 1

Found a solution in disabling cache in HtmlWebpackPlugin:

new HtmlWebpackPlugin({
      template: "./index.html",
      filename: "html/index.html",
      cache: false,
}),