Why doesn't webpack update JS when it changes?

Question

webpack

I don’t understand why it doesn’t update ...
I need to combine both JS and CSS files, I do everything like this

const path = require('path')
    , MiniCssExtractPlugin = require("mini-css-extract-plugin")

module.exports = {
    entry: ["./bundle.js", "./bundle.css"],
    target: "web",
    module: {
        rules: [
            { test: /\.(js)$/, use: ['babel-loader'] },
            { test: /\.css$/, use: [ MiniCssExtractPlugin.loader,  'css-loader' ] }
        ]
    },
    output: {
        path: path.resolve(__dirname, '/static/assets'),
        publicPath: '/static/assets/',
        filename: "bindle.min.js",

    },
    mode: "production",
    devtool: "source-map",
    devServer: {
        hot: true,
        static: {
            directory: path.join(__dirname, '/static')
        },
        allowedHosts: 'all',
        compress: true,
        port: 9000,
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: "bindle.min.css",
        })
    ]
}

I run package.json like this

....
"scripts": {
    "build": "NODE_ENV=production webpack",
    "dev": "webpack-dev-server --hot"
  }....

    "webpack": "^5.60.0",
    "webpack-cli": "^4.9.1",
    "webpack-dev-server": "^4.4.0"
....

When building build, everything is fine, the files are combined as they should.
But if I run the npm run dev server
, then nothing happens when the files are changed, the console in the browser is silent, only in the terminal you can see that it changes something. Why is this happening? I've been familiar with webpack for a couple of days...