'Webpack 5: why MiniCssExtractPlugin.loader doesn't let HMR work?

Can anyone explain me why MiniCssExtractPlugin.loader doesn't let HMR work and how can I fix it? I created the following webpack.config.js file:

const path = require ('path')
const HTMLWebpackPlugin = require ('html-webpack-plugin')
const MiniCssExtractPlugin = require ('mini-css-extract-plugin')

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

module.exports = {  
    entry: './src/js/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'app')
    },
    devServer: {
        port: 8000,
        hot: true
    },
    plugins:[
        new HTMLWebpackPlugin({
            template: './src/index.html'
        }),
        new MiniCssExtractPlugin({filename: '[name].[contenthash].css'})    
    ],
    module: {
        rules: [
            {
                test: /\.css$/,
                use: cssLoaders()
            }
        ]
    }       
}

And after saving new styles, I get the following messages in the browser console:

[Info] [WDS] App updated. Recompiling... (x2)
[Info] [WDS] App hot update...
[Log] [HMR] Checking for updates on the server...
[Log] [HMR] Updated modules:
[Log] [HMR]  - ./src/styles/style.css
[Log] [HMR] App is up to date.
[Log] [HMR] Reload all css

But in fact, in order to see the changes, I have to reload the page. If I change line

use: cssLoaders()

use: ['style-loader','css-loader']

HMR really begins working. I read on many forums that adding

target: 'web'

helps with this but in my case it also doesn't resolve this problem.

Solution 1:^[1]

To avoid this it is necessary to make name of the compiled file without hash or contenthash

Solution 2:^[2]

in development mode,you should remove contenthash in MiniCssExtractPlugin?

Please refer to webpack docs

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	????? ????????
Solution 2	pipe

'Webpack 5: why MiniCssExtractPlugin.loader doesn't let HMR work?

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]