webpack-hot-middleware обновляет только Css/Sass Once

Question

У меня проблема с webpack-hot-middleware, и я не уверен, что делаю не так.

В итоге: каждый раз, когда я запускаю команду node./ dev Запускается веб-пакет и начинается мониторинг изменений. Эта часть работает отлично.

Когда я меняю src / assets / js / index.js файл, он обновляет страницу после применения изменений. Но с моим src / assets / styles / index.scss файла, только если это изменение является первым изменением, которое я сделал после начала мониторинга веб-пакета.

Если я бегу node./ dev и изменитьindex.scssобновление браузера после внесения изменений в вывод. Во второй раз браузер не обновляется. То же самое случится, если я поменяю index.js и пытается изменитьindex.scss,

На моей вкладке консоли Chrome отображаются следующие сообщения (когда страница не загружается):

[HMR] bundle rebuilding      client.js:242
[HMR] bundle rebuilt in 2407ms      process-update.js:39
[HMR] Checking for updates on the server...      process-update.js:110
[HMR] Nothing hot updated.      process-update.js:119
[HMR] App is up to date.

Вот пример моего рабочего кода:

dev.js

    const webpack = require('webpack');
    const webpackMiddleware = require('webpack-dev-middleware');
    const webpackHotMiddleware = require('webpack-hot-middleware');
    const express = require('express');
    const app = express();
    const config = require('./webpack.dev.conf');

    const DEFAULT_PORT = 3000;
    const options = {
      publicPath: config.output.publicPath
    };

    config.entry.main.push('webpack-hot-middleware/client?reload=true');
    const compiler = webpack(config);

    console.log('Starting the dev web server...');
    app.use(webpackMiddleware(compiler, options));
    app.use(webpackHotMiddleware(compiler));
    app.listen(DEFAULT_PORT, (err) => {
      if (err) {
        console.log(err);
      }
      console.log('WebpackHotMiddleware is listening at http://localhost:3000/...');
    });

webpack.dev.conf.js

    const path = require('path');
    const webpack = require('webpack');
    const merge = require('webpack-merge');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    const CleanWebpackPlugin = require('clean-webpack-plugin');
    const MiniCssExtractPlugin = require('mini-css-extract-plugin');
    const base = require('./webpack.base.conf');

    const appHtmlTitle = 'Hello World';
    process.env.NODE_ENV = 'development';
    const dirSrc = path.join(__dirname, 'src');
    process.noDeprecation = true;

    module.exports = {
      mode: 'development',
      devtool: 'source-map',
      output: {
        path: path.join(__dirname, 'dev'),
        publicPath: '/',
        filename: 'assets/js/[name].js?[hash]'
      },
      optimization: {
        splitChunks: {
          chunks: 'all' // include all types of chunks
        },
      },
      entry: {
        main: [
          path.join(dirSrc, 'assets', 'js', 'index'),
          path.join(dirSrc, 'assets', 'styles', 'index.scss')
        ]
      },
      module: {
        rules: [{
          test: /\.html$/,
          loader: 'html-loader',
          options: { minimize: true }
        },
        {
          enforce: 'pre',
          test: /\.js$/,
          exclude: [/node_modules/],
          loader: 'eslint-loader'
        },
        {
          test: /\.js?$/,
          exclude: [/node_modules/],
          loader: 'babel-loader'
        },
        // CSS / SASS
        {
          test: /\.(s)?css/,
          use: [
            {
              loader: MiniCssExtractPlugin.loader,
              options: { publicPath: '/' }
            },
            { loader: 'css-loader' },
            { loader: 'sass-loader' }
          ]
        },
        // IMAGES
        {
          test: /\.(jpe?g|png|gif)$/i,
          use: [
            {
              loader: 'file-loader',
              options: {
                publicPath: '/',
                name: 'assets/images/[name].[ext]'
              }
            }
          ]
        },
        // FONTS
        {
          test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
          loader: 'file-loader',
          options: {
            publicPath: '/',
            name: 'assets/fonts/[name].[ext]'
          }
        }]
      },
      plugins: [
        new CleanWebpackPlugin(['dev'], { verbose: false }),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoEmitOnErrorsPlugin(),
        new HtmlWebpackPlugin({
          filename: path.join(__dirname, 'dev', 'index.html'),
          template: 'src/index.ejs',
          title: appHtmlTitle,
          minify: {
            removeComments: true,
            collapseWhitespace: true,
            removeAttributeQuotes: true
          }
        }),
        new MiniCssExtractPlugin({
          publicPath: '/',
          filename: 'assets/css/[name].css?[hash]'
        }),
        new webpack.DefinePlugin({
          PRODUCTION: JSON.stringify(false)
        })
      ]
    };