index.html in /dist gets deleted on save and not re-built again (if no file is changed) during webpack watch mode

I am using vscode. And I am trying to build a webpack project. I use html-webpack-plugin to build html files in /dist, but I found that when I was using watch mode, and save file with no changes(or just gain some spaces or blank lines), my index.html in /dist just get deleted, I can't figure out what happen here. Here is my webpack config file:

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');


var extractPlugin = new MiniCssExtractPlugin({
    chunkFilename: '[hash].css',
});

const { CleanWebpackPlugin } = require('clean-webpack-plugin');



module.exports = {
    entry: {
        main: ['./src/js/main.js', './src/scss/project/main.scss'],
        // page1: ['./src/js/page1.js','./src/scss/project/page1.scss]
    },
    output: {
        chunkFilename: '[hash].js',
        path: path.resolve(__dirname, 'dist'),
    },
    mode: 'production',
    module: {
        rules: [
            {
                test: /\.html$/,
                use: [
                    { loader: 'html-loader' }
                ]
            },
            {
                test: /.scss$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'sass-loader'
                ]
            },
            {
                test: /\.(js)$/,
                exclude: /(node_modules)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            },
            {
                test: require.resolve("jquery-mousewheel"),
                use: "imports-loader?define=>false&this=>window"
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                loader: 'file-loader',
                options: {
                    outputPath: 'assets/images',
                    publicPath: 'assets/images',
                }

            },

        ],
    },
    performance: {
        hints: false,
        maxEntrypointSize: 512000,
        maxAssetSize: 512000
    },
    plugins: [
        extractPlugin,
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery'
        }),
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: 'index.html',
            chunks: ['main']
        }),
        // new HtmlWebpackPlugin({
        //     filename: 'page1.html',
        //     template: 'page1.html',
        //     chunks: ['page1']
        // }),
        new CleanWebpackPlugin(),
        new CopyPlugin(
            [
                { from: 'src/static', to: 'static' },
            ]
        ),
    ],
    optimization: {
        splitChunks: {
            chunks: 'all'
        },
    },
    resolve: {
        alias: {
            '@img': path.resolve(__dirname, 'src/assets/images'),
        },
    }
};