Webpack 5: почему MiniCssExtractPlugin.loader не дает работать HMR и как с этим быть?

Question

Может ли кто-нибудь объяснить мне почему MiniCssExtractPlugin.loader не дает работать HMR и как с этим быть? Я создал следующую сборку:

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

Чтобы HMR работал необходимо из имени скомпилированного файла исключить hash и contenthash

БЛОГ НА HUSL

Webpack 5: почему MiniCssExtractPlugin.loader не дает работать HMR и как с этим быть?

Ответы (1 шт):