node.js - webpack-hot-middleware 只更新 Css/Sass 一次

Question

我的webpack-hot-middleware有问题，我不确定自己做错了什么。

总结：每次我运行命令node./ devwebpack 都会运行并开始监控更改。这部分工作得很好。

当我更改src / assets / js / index.js文件时，它会在应用更改后刷新页面。但是对于我的src / assets / styles / index.scss文件，只有当该更改是我在 webpack 开始监控后所做的第一个更改时。

如果我运行node./ dev并更改index.scss，则在输出中进行更改后浏览器会刷新。第二次，浏览器不刷新。如果我改变 myindex.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.

这是我的工作代码示例：

开发者.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)
        })
      ]
    };