Почему webpack-dev-server после обновления перестал следить/обновлять измененный css?

Question

[Danny13]

Все работало хорошо, но после того как обновился до пятого webpack, и обновил соотв. webpack-dev-server, webpack-dev-server перестал следить/обновлять измененный css. То-есть когда приложение запущено и я изменяю html в каком либо файле, то он сразу видит и обновляет изменения, но если меняю css, файл, то он ничего больше не обновляет.

Вот скрипт из package.json.
Раньше у меня там был: "start": "webpack-dev-server --mode development --hot", но я прочитал, что теперь нужно использовать webpack serve. Запускаю, как и раньше, командой npm start.

"scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "start": "webpack serve --mode development --hot",
        "build": "webpack --mode production"
    },

Это версии плагинов:

"sass": "^1.26.11",
"sass-loader": "^10.0.4",
"style-loader": "^2.0.0",
"webpack": "^5.3.0",
"webpack-cli": "^4.1.0",
"webpack-dev-server": "^3.11.0"

А это конфигурация webpack.congig.js
Всё, что я добавил это devServer, так как без него выдавал ошибку после обновления.

const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")

module.exports = {
    mode: "development",
    entry: "./src/index.js",
    output: {
        path: path.join(__dirname, "/dist"),
        filename: "[name].js",
        sourceMapFilename: "[name].js.map",
    },
    devServer: {
        contentBase: "/dist",
        watchContentBase: true,
        open: true,
        inline: true,
        hot: true,
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: ["babel-loader"],
            },
            {
                test: /\.css$/,
                use: ["style-loader", "css-loader"],
            },
            {
                test: /\.s[ac]ss$/i,
                use: ["style-loader", "sass-loader"],
            },
            {
                test: /\.(jpe?g|png|gif|woff|woff2|eot|ttf|svg)(\?[a-z0-9=.]+)?$/,
                use: [
                    {
                        loader: "url-loader",
                        options: {
                            limit: 100000,
                        },
                    },
                ],
            },
        ],
    },

    plugins: [
        new HtmlWebpackPlugin({
            template: "./src/index.html",
        }),
    ],
}

Кто нибудь сталкивался с такой проблемой?
Спасибо

Answer 1

[TechnicaL]

Я сейчас столкнулся с такой же проблемой пока не решил.
У тебя это проблема, как разрешилась?

Comments

[Danny13]

Решить не получилось, но я теперь использую конфигурацию webpack из плагина create-reacte-app, которая работает превосходно :)

Answer 2

[AxeRicin]

Фуф.. Сейчас столкнулся с такой же проблемой. В моём случае помогла установка watchOption в module.exports:

module.exports = {
  //...
  watchOptions: {
    poll: true,
  },
};

Таким образом мы просим webpack осматривать наши файлы на изменения раз в 5007 ms.
А devServer оказался не причём.

Ну и ссылка на документацию с подробностями: https://webpack.js.org/configuration/watch/