如何修复Express非SPA应用中Webpack HMR仅首次生效的问题？

我正尝试在非SPA架构的Express应用中启用Webpack HMR（模块热替换）。视图层使用EJS和Vue，因为没办法借助vue-cli，只能手动配置vue-loader来处理.vue单文件组件。我的工作流是：把客户端资源（scss、js、vue等）放在resources目录，打包后输出到public目录。

我的webpack.config.js配置 #

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const webpack = require('webpack');
module.exports = {
 mode: 'development',
 entry: [
  './resources/css/app.scss',
  './resources/js/app.js',
  'webpack-hot-middleware/client'
 ],
 output: {
  path: path.resolve(__dirname, 'public/js'),
  publicPath: '/',
  filename: 'app.js',
  hotUpdateChunkFilename: "../.hot/[id].[hash].hot-update.js",
  hotUpdateMainFilename: "../.hot/[hash].hot-update.json"
 },
 module: {
  rules: [
   {
    test: /\.(sa|sc|c)ss$/,
    use: [
     { loader: MiniCssExtractPlugin.loader, options: { hmr: process.env.NODE_ENV === 'development' } },
     'css-loader',
     'sass-loader'
    ],
   },
   { test: /\.vue$/, loader: 'vue-loader' }
  ]
 },
 plugins: [
  new VueLoaderPlugin(),
  new MiniCssExtractPlugin({ filename: '../css/app.css' }),
  new webpack.HotModuleReplacementPlugin(),
  new webpack.NoEmitOnErrorsPlugin()
 ]
};

Express应用入口配置（app/index.js） #

import express from 'express';
import routes from './routes';
import path from 'path';
import webpack from 'webpack';
import devMiddleware from 'webpack-dev-middleware';
import hotMiddleware from 'webpack-hot-middleware';
const config = require('../webpack.config');
const compiler = webpack(config);
const app = express();
app.use(express.static('public'));
app.use(devMiddleware(compiler, { noInfo: true, publicPath: config.output.publicPath }));
app.use(hotMiddleware(compiler));
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, '../resources/views'))
routes(app);
app.listen(4000);
export default app;

package.json的scripts部分 #

"scripts": {
 "start": "nodemon app --exec babel-node -e js",
 "watch": "./node_modules/.bin/webpack --mode=development --watch",
 "build": "./node_modules/.bin/webpack --mode=production"
}

我现在的操作是：用nodemon重启服务器来加载服务端代码的变更，同时打开两个终端分别运行npm run start和npm run watch。控制台显示HMR已经连接上了，但只有第一次的资源变更能被识别并生效，后续的变更都会抛出警告：

Ignored an update to unaccepted module ./resources/css/app.scss -> 0

完全没法实现热替换的效果，有没有大佬能帮忙看看怎么解决这个问题？

内容的提问来源于stack exchange，提问作者Tanmay