Не работает hmr в cборке webpack

Всем привет, столкнулся с проблемой hot reload в своей webpack сборке и вместо того чтобы обновить конкретный файл, он обновляет все имеющиеся страницы и скрипты. Вот исходный код сборки:

//webpack.config.ts
import path from 'path';
import webpack from 'webpack';
import MiniCssExtractPlugin from 'mini-css-extract-plugin';
import globule from 'globule';

import 'webpack-dev-server';

import { generateHtmlPlugins } from './config/generateHtmlPlugins';

type EnvVariable = {
    mode?: 'development' | 'production';
};

const config = (env: EnvVariable): webpack.Configuration => {
    const isDev = env.mode == 'development';
    console.log(isDev);

    const pages = globule.find(['./src/pages/*.hbs']);

    const entry = pages.reduce((acc: { [key: string]: string }, page) => {
        const name = path.basename(page, '.hbs');
        acc[name] = `./src/${name}.ts`; // Убедитесь, что ваши ts файлы существуют
        return acc;
    }, {});

    return {
        mode: env.mode ?? 'development',
        entry: entry,
        output: {
            filename: '[name].[fullhash].js',
            path: path.resolve(__dirname, 'dist'),
            clean: true,
        },
        devtool: isDev ? 'inline-source-map' : undefined,
        devServer: {
            static: path.join(__dirname, 'src'),
            open: true,
            hot: true,
            watchFiles: ['src/pages/**/*.hbs', 'src/partials/**/*.hbs'],
        },
        plugins: [
            new webpack.HotModuleReplacementPlugin(),
            new MiniCssExtractPlugin({
                filename: 'css/[name].[contenthash].css',
            }),
            ...generateHtmlPlugins(pages),
        ],
        module: {
            rules: [
                {
                    test: /\.(sa|sc|c)ss$/i,
                    use: [
                        isDev ? 'style-loader' : MiniCssExtractPlugin.loader,
                        'css-loader',
                        {
                            loader: 'postcss-loader',
                            options: {
                                postcssOptions: {
                                    plugins: [['postcss-preset-env']],
                                },
                            },
                        },
                        'sass-loader',
                    ],
                },
                {
                    test: /\.tsx?$/,
                    use: 'ts-loader',
                    exclude: /node_modules/,
                },
                {
                    test: /\.(png|svg|jpg|jpeg|gif)$/i,
                    type: 'asset/resource',
                    generator: {
                        filename: 'images/[name].[hash][ext]',
                    },
                },
                {
                    test: /\.(woff|woff2|eot|ttf|otf)$/i,
                    type: 'asset/resource',
                    generator: {
                        filename: 'fonts/[name].[hash][ext]',
                    },
                },
                {
                    test: /\.hbs$/,
                    loader: 'handlebars-loader',
                },
            ],
        },
        resolve: {
            extensions: ['.tsx', '.ts', '.js'],
        },
        optimization: {
            runtimeChunk: 'single',
        },
    };
};

export default config;

// generateHtmlPlugins.ts
import HtmlWebpackPlugin from 'html-webpack-plugin';

export const generateHtmlPlugins = (pages: string[]): HtmlWebpackPlugin[] => {
    return pages.map((path) => {
        const name = path.split('/').pop()?.replace('.hbs', '');

        return new HtmlWebpackPlugin({
            template: path,
            filename: `${name}.html`,
            chunks: [name],
        });
    });
};

Все исходники находястя в папке src и разделены на подпапки (partials, pages, scripts, scss) Предполагаю что проблема как то связана с файлами .hbs, но не понмаю что не так. Если поставить выставить опцию liveReload:false в devSever, то hot reload работает, но файлы .hbs перестают обновлятся