Подскажите пожалуйста как это исправить(webpack-dev-server не обновляет страницу автоматически).Вариант target: "web" тоже не работает

const path = require('path')
const HTMLWebpackPlugin = require('html-webpack-plugin')
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const CssMinimizerWebpackPlugin = require('css-minimizer-webpack-plugin')
const TerserWebpackPlugin = require('terser-webpack-plugin')


const isDev = process.env.NODE_ENV === 'development'
const isProd = !isDev



const optimization = () =>  {
  const config =  {
        splitChunks: {
            chunks: 'all'
        }
    }

    if (isProd) {
        config.minimizer =  [
            new CssMinimizerWebpackPlugin(),
            new TerserWebpackPlugin()
        ]
    }
    return config
}

const filename = (ext) => isDev ? `[name].${ext}` : `[name].[contenthash].${ext}`


const cssLoaders = (extra) => {
    const loaders = [
            {
              loader:  MiniCssExtractPlugin.loader,
              options: {},
            }, 
            'css-loader']

            if (extra) {
                loaders.push(extra)
            }

      return loaders
}
module.exports = {
    // target: "web",
    context: path.resolve(__dirname, 'src'), 
    mode: 'development',
    entry: {
      main: ['@babel/polyfill', './index.js'],
      analytics: './analytics.js'
    },
    output: {
        filename: filename('js'),
        path: path.resolve(__dirname, 'dist')
    },
    resolve: {
        extensions: ['.js', '.json', 'png'],
        alias: {
            '@models': path.resolve(__dirname, 'src/models'),
            '@':  path.resolve(__dirname, 'src'),
            '@styles': path.resolve(__dirname, 'src/styles')
        }
    },
    optimization: optimization(),
    devServer: {    
        port: 5000,
        hot: isDev,
        static: {
            directory: path.resolve(__dirname, 'dist')
        },
        open: true,
        compress: true,
        historyApiFallback: true
    },
    plugins: [
        new HTMLWebpackPlugin({
            template: './index.html',
            inject: 'body',
            minify: {
                collapseWhitespace: isProd
            }
        }),
        new CleanWebpackPlugin(),
        new CopyWebpackPlugin({
            patterns: [
              { 
                   from: path.resolve(__dirname, 'src/favicon.ico'),
                   to: path.resolve(__dirname, 'dist')
              },
            ],
          }),
          new MiniCssExtractPlugin({
            filename: filename('css')
          }),
    ],
    module: {
        rules: [
            {
                test: /\.css$/,
                use: cssLoaders()
            },
            {
                test: /\.less$/,
                use: cssLoaders('less-loader')
            },
            {
                test: /\.s[ac]ss$/,
                use: cssLoaders('sass-loader')
            },
            {   
                    test: /\.(png|svg|jpg|jpeg|gif)$/i,
                    type: 'asset/resource'
            },
            {
                test: /\.(ttf|woff|woff2|eot)$/,
                use: ['file-loader']
            },
            {
                test: /\.m?js$/,
                exclude: /node_modules/,
                use: {
                loader: "babel-loader",
                options: {
                    presets: [
                       '@babel/preset-env'
                    ], 
                    plugins: [
                        '@babel/plugin-proposal-class-properties'
                    ]
                }
              }
            }
        ],
    }
}   


package.json


{
  "name": "stepformyself",
  "version": "1.0.0",
  "description": "webpackproj",
  "private": true,
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack --mode development",
    "build": "cross-env NODE_ENV=production webpack --mode production",
    "watch": "cross-env NODE_ENV=development webpack --mode development  --watch",
    "start": "cross-env NODE_ENV=development webpack serve --mode development"
  },
  "browserslist": "> 0.25%, not dead",
  "keywords": [
    "js",
    "webpack"
  ],
  "author": "baHdan",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.18.2",
    "@babel/plugin-proposal-class-properties": "^7.17.12",
    "@babel/preset-env": "^7.18.2",
    "babel-loader": "^8.2.5",
    "clean-webpack-plugin": "^4.0.0",
    "copy-webpack-plugin": "^11.0.0",
    "cross-env": "^7.0.3",
    "css-loader": "^6.7.1",
    "css-minimizer-webpack-plugin": "^4.0.0",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^5.5.0",
    "install": "^0.13.0",
    "less-loader": "^11.0.0",
    "mini-css-extract-plugin": "^2.6.0",
    "node-sass": "^7.0.1",
    "npm": "^8.12.1",
    "sass-loader": "^13.0.0",
    "style-loader": "^3.3.1",
    "terser-webpack-plugin": "^5.3.3",
    "webpack": "^5.73.0",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.9.2"
  },
  "dependencies": {
    "@babel/polyfill": "^7.12.1",
    "normalize.css": "^8.0.1"
  }
}