Webpack - devServer.watchFiles 破坏了 webpack-dev-server 中的热模块替换 (HMR)

Question

我正在学习 Udemy 课程，并尝试让 HMR 使用 webpack 版本 5.67.0 和 webpack-dev-server 4.7.3 运行，但它不起作用。当我修改并保存 CSS 文件时，webpack 正确地重新编译了项目，前端也正确更新，但热模块替换不起作用。它会重新加载整个页面。在我尝试实现该属性之前，HMR工作得很好before。

我已经在兔子洞里呆了两天了，遵循不同的建议，但仍然不起作用。

这是我的webpack.config.js：

const path = require('path')

const postCSSPlugins = [
    require('postcss-import'),
    require('postcss-simple-vars'),
    require('postcss-nested'),
    require('autoprefixer')
]

module.exports = {
    entry: './app/assets/scripts/App.js',
    output: {
        filename: 'bundled.js',
        path: path.resolve(__dirname, 'app')
    },
    devServer: {
        watchFiles: ('./app/**/*.html'),
        static: path.join(__dirname, 'app'),
        hot: true,
        port: 3000,
        // liveReload: false
    },
    mode: 'development',
    module: {
        rules: [
            {
                test: /\.css$/i,
                use: ['style-loader','css-loader', {loader: "postcss-loader", options: {postcssOptions: {plugins: postCSSPlugins}}}]
            }
        ]
    }
}

详细问题描述：

详细信息如下：

1. devServer.before热模块重新加载一直有效，直到我尝试在 webpack.config.js 中添加该属性

开发服务器属性：

devServer: {
  before: function(app, server) {
   server._watch('./app/**/*.html')
  },
  static: path.join(__dirname, 'app'),
  hot: true,
  port: 3000
},

和我的App.js文件：

import '../styles/styles.css';

if (module.hot) {
    module.hot.accept();
}

2. 当我尝试添加该before属性时，我收到该属性也无效的错误。我发现这个迁移指南（https://github.com/webpack/webpack-dev-server/blob/master/migration-v4.md）说它before被替换为onBeforeSetupMiddleware并且参数也被更改。我之前尝试用这个替换：

onBeforeSetupMiddleware属性：

onBeforeSetupMiddleware: function (devServer) {
   devServer.app.get('./app/**/*.html', function (req, res) {
     res.json({ custom: "response" });
   });
},

3. 那时，服务器不再出现编译错误，但热重载不再起作用。每当我更改 CSS 时，它每次都会重新加载整页！

4. 然后我又花了半个小时梳理课程问答寻找答案。我发现一位用户 Simeon 说过这样的话：

对于那些使用 Webpack 5 和 webpack-dev-server >= 4.0.0 的用户。

在 webpack.config.js 中，将之前的选项更改为以下内容：

watchFiles: ('./app/**/*.html'),

5. 因此，我删除了 onBeforeSetupMiddleware 并替换为watchFiles. 重新启动开发服务器。没有变化——只要 CSS 改变，它就会刷新整个页面！

帮助！我究竟做错了什么？我怎样才能解决这个问题？

谢谢你！

PS：如果有帮助，这是我的 GitHub 存储库，您可以在其中查看我的所有代码：

• https://github.com/codewizard13/travel-site/tree/ERROR_HotReload