Hot reload not working in Webpack using in html project

Question

I am using Webpack 5 in my html project for partials and assets compilation. all of thinks is working fine but when i changed any file the html page not reload automatically, i have to reload it manually so i need to be add auto reload in this case.

const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const rtlcss = require('rtlcss');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HandlebarsPlugin = require('handlebars-webpack-plugin');
const fs = require('fs-extra');
const { RawSource } = require('webpack-sources');

// define global paths
const folder = {
    src: "./src/",
    src_assets: "./src/assets/",
    dist: "./dist/",
    dist_assets: "./dist/assets/"
};

// define rtl css pairs
const cssPairs = [
    { ltr: 'css/app.min.css', rtl: 'css/app-rtl.min.css' },
    { ltr: 'css/bootstrap.min.css', rtl: 'css/bootstrap-rtl.min.css' },
    // Add more pairs as needed
];

module.exports = {
    mode: 'development', // or 'production'
    entry: {
        app: path.join(__dirname, folder.src_assets, 'scss/app.scss'),
        bootstrap: path.join(__dirname, folder.src_assets, 'scss/bootstrap.scss'),
        icons: path.join(__dirname, folder.src_assets, 'scss/icons.scss'),
    },
    output: {
        path: path.resolve(__dirname, folder.dist_assets),
        filename: 'chunk/[name].js',
    },
    performance: {
        hints: false, // Disable performance hints
    },
    devServer: {
        static: {
            directory: path.join(__dirname, folder.dist),
            watch: true,
        },
        // contentBase: ['./dist/**/*'],
        watchFiles: ['src/**/*'],
        port: 'auto',
        hot: true,
        open: true,
    },
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'sass-loader',
                ],
            },
            {
                test: /\.html$/,
                use: 'html-loader',
            },
        ],
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: 'css/[name].min.css',
        }),
        new HandlebarsPlugin({
            entry: path.join(__dirname, folder.src, '*.html'),
            output: path.join(__dirname, folder.dist, '[name].html'),
            partials: [
                path.join(__dirname, folder.src + "partials/", "*.html")
            ],
        }),
        new CopyWebpackPlugin({
            patterns: [
                { from: path.join(__dirname, folder.src_assets, 'fonts'), to: path.join(__dirname, folder.dist_assets, 'fonts') },
                { from: path.join(__dirname, folder.src_assets, 'images'), to: path.join(__dirname, folder.dist_assets, 'images') },
                { from: path.join(__dirname, folder.src_assets, 'js'), to: path.join(__dirname, folder.dist_assets, 'js') },
                { from: path.join(__dirname, folder.src_assets, 'json'), to: path.join(__dirname, folder.dist_assets, 'json') },
                { from: path.join(__dirname, folder.src_assets, 'lang'), to: path.join(__dirname, folder.dist_assets, 'lang') },
            ],
        }),
        {
            apply(compiler) {
                compiler.hooks.thisCompilation.tap('GenerateRTL', (compilation) => {
                    compilation.hooks.processAssets.tap(
                        {
                            name: 'GenerateRTL',
                            stage: compilation.PROCESS_ASSETS_STAGE_ADDITIONAL,
                        },
                        () => {
                            cssPairs.forEach((pair) => {
                                const ltrCss = compilation.assets[pair.ltr].source(); // Use compilation.assets to retrieve the asset
                                const rtlCss = rtlcss.process(ltrCss, { autoRename: false, clean: false });
                                compilation.emitAsset(pair.rtl, new RawSource(rtlCss)); // Use emitAsset to add the asset
                            });
                        }
                    );
                });
            },
        },
        {
            apply(compiler) {
                compiler.hooks.emit.tapPromise('copy-specific-packages', async compilation => {
                    const outputPath = path.resolve(__dirname, folder.dist_assets); // Replace with the actual public assets path
                    const configPath = path.resolve(__dirname, 'package-copy.json');

                    try {
                        const configContent = await fs.readFile(configPath, 'utf-8');
                        const { packagesToCopy } = JSON.parse(configContent);

                        for (const packageName of packagesToCopy) {
                            const destPackagePath = path.join(outputPath, 'libs', packageName);

                            const sourcePath = fs.existsSync(path.join(__dirname, 'node_modules', packageName, 'dist'))
                                ? path.join(__dirname, 'node_modules', packageName, 'dist')
                                : path.join(__dirname, 'node_modules', packageName);

                            try {
                                await fs.access(sourcePath, fs.constants.F_OK);
                                await fs.copy(sourcePath, destPackagePath);
                            } catch (error) {
                                console.error(`Package ${packageName} does not exist.`);
                            }
                        }
                    } catch (error) {
                        console.error('Error copying and renaming packages:', error);
                    }
                });
            },
        },
    ],
};

I have tried to addeding html-webpack-plugin but if i add that then handlebar plugins not worked so i am not abling to handle partials.