webpack-dev-server - Webpack 5 : why MiniCssExtractPlugin. 加载程序不允许 HMR 工作？

Question

谁能解释一下为什么 MiniCssExtractPlugin.loader 不允许 HMR 工作以及如何修复它？我创建了以下 webpack.config.js 文件:

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()
            }
        ]
    }       
}

保存新样式后，我在浏览器控制台中收到以下消息:

[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

但事实上，为了看到变化，我必须重新加载页面。如果我换线

use: cssLoaders()

至

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

HMR 真正开始发挥作用。我在很多论坛上看到添加

target: 'web'

有助于解决此问题，但就我而言，它也无法解决此问题。

Answer 1

为了避免这种情况，有必要使编译文件的名称不带哈希值或内容哈希值