Почему webpack не обновляет JS при его изменении?

Question

[Станислав]

Не пойму почему не обновляет...
Мне нужно объединять как JS так и CSS файлы, делаю все вот так

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",
        })
    ]
}

Запускаю так package.json

....
"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"
....

При построении build все норм, файлы объединяются как надо.
А вот если запускаю сервер npm run dev
То тут при изменении файлов ничего не происходит, консоль в браузере молчит, лишь в терминале видно что он что то меняет. Почему так происходит? С webpack пару дней знаком...

Comments

[Вадим]

чего-то вверху связи с этим не видно... webpack-dev-server --hot

[Станислав]

Вадим, не понял...

[Вадим]

NODE_ENV=production ---> mode: "production",

для второго ничего подобного. Не знаю webpack - просто субьективно.

также
https://webpack.js.org/guides/production/

[Pavel Kuzyakin]

в конфиге вебпака измените mode на development и запустите npm run dev. ключ --hot там не нужен, у вас в конфиге уже hot: true

[Станислав]

Вадим, я видать не правильно понял механику webpack, я думал о следующем.
У меня в PUG указана ссылка на js файл в папке /static/assets/build.min.js
И при редактировании файла который компилируется в build.min.js webpack тут же отобразить изменения на самой странице, ну вообщем все будет так же как и при webpack --watch, только до кучи и на странице сразу же изменения будут)
Т.е. с webpack --watch работает отлично, но постоянно нужно F5 нажимать, думал избавиться от постоянного обновления страницы при изменении скриптов, да стилей...