启用 HMR 的 webpack 5 - 所有内容（甚至 CSS 更改）都会导致完全重新加载

Question

我有一个使用 webpack 5.72 的小型 Typescript/React 存储库。启用热模块替换后，我希望能够更改组件或 CSS，并且仅更新已更改的组件或样式。相反，我所做的每一个更改都会导致完全刷新。

每次更改都会在 Chrome 控制台中生成如下行：

[webpack-dev-server] "C:\path\to\ComponentName.tsx" from static directory was changed. Reloading...
index.js:551 [webpack-dev-server] App updated. Recompiling...
Navigated to http://localhost:8080/
bootstrap:24 [HMR] Waiting for update signal from WDS...

“导航到本地主机”正在执行完全刷新，但为什么呢？为什么它看到我的文件位于静态目录中而不是位于可以热交换的模块中？

回购协议在这里，如果有人想深入了解它并查看代码/配置。

我已经尝试过这个配置，为我自动生成：

const path = require('path');

module.exports = {
  target: "web",
  mode: "development",
  entry: [
    './src/index.tsx',
    'react-hot-loader/patch',
  ],
  devtool: "inline-source-map",
  devServer: {
    static: {
      directory: path.resolve(__dirname, "src"),
    },
    hot: true
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules|(\.spec.ts)/,
      },
      {
        test: /\.js$/,
        enforce: "pre",
        use: ["source-map-loader"],
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
      }
    ],
  },
  ignoreWarnings: [/Failed to parse source map/],
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: "/dist/",
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
    alias: {
      "app": path.resolve(__dirname, "src/"),
      "test": path.resolve(__dirname, "test/"),
    }
  },
};

据我从 webpack 文档中了解到，css 文件的

use: ["style-loader", "css-loader"]

行至少应该使我能够在不完全刷新的情况下更改 CSS 文件，但事实并非如此。

'react-hot-loader/patch',

应该对我的 React 组件执行相同的操作。但话又说回来，事实并非如此。

Answer 1

我认为这里的问题是你的静态文件目录包含你的源文件。注意输出

"C:\path\to\ComponentName.tsx" from static directory was changed. Reloading...

。为 devServer.static.directory 选择不同的值可能会修复它。