即使我修改了文件，Webpack 实时重新加载也会说“没有改变”。为啥？

Posted 2023-02-22

【中文标题】即使我修改了文件，Webpack 实时重新加载也会说“没有改变”。为啥？

【英文标题】：Webpack live reload says "nothing changed" even if I modify a file. Why?即使我修改了文件，Webpack 实时重新加载也会说“没有改变”。为什么？

【发布时间】：2022-01-19 01:16:38

【问题描述】：

我有一个 react 项目，我正在使用 Webpack (webpack-dev-server) 进行开发。

一切编译良好，当我（第一次）对文件进行更改时，实时重新加载运行良好。

但是，在两次（或多次）更改同一文件后，实时重新加载停止工作。即使我进行了更改，控制台也会显示“没有任何变化”。

看起来 webpack-dev-server 内存没有接受更改。知道为什么吗？

Webpack 配置

const path = require("path");
const htmlWebpackPlugin = require("html-webpack-plugin");
const  ProvidePlugin  = require("webpack");

module.exports = 
  target: "web",
  mode: "development",
  entry: ["regenerator-runtime/runtime.js", "./src/index.js"],
  devtool: "inline-source-map",
  devServer: 
    historyApiFallback: true,
    hot: true,
    port: 8080,
    static: "./dist",
    watchFiles: "src/**/*,js",
  ,
  output: 
    path: path.resolve(__dirname, "dist"),
    filename: "index_bundle.js",
  ,

  resolve:  extensions: ["*", ".js", ".jsx"] ,
  module: 
    rules: [
      
        test: /\.(jsx|js)$/,
        exclude: /(node_modules)/,

        use: [
          
            loader: "babel-loader",
            options: 
              presets: ["@babel/env", "@babel/react"],
            ,
          ,
        ],
      ,
      
        test: /\.css$/,
        // exclude: /node_modules/,
        use: ["style-loader", "css-loader"],
      ,
      
        test: /\.svg$/,
        use: [
          
            loader: "svg-url-loader",
            options: 
              limit: 10000,
            ,
          ,
        ],
      ,
    ],
  ,
  plugins: [
    new HtmlWebpackPlugin(
      template: "src/index.html",
      title: "Development",
    ),
    new ProvidePlugin(
      React: "react",
    ),
  ],
;

Package.json

  "name": "timerfrontend",
  "version": "1.0.0",
  "main": "index.js",
  "babel": 
    "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
    ]
  ,
  "scripts": 
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack serve",
    "create": "webpack -w",
    "build": "webpack -p"
  ,
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": 
    "@babel/core": "^7.16.5",
    "@babel/preset-env": "^7.16.5",
    "@babel/preset-react": "^7.16.5",
    "babel-loader": "^8.2.3",
    "css-loader": "^6.5.1",
    "html-webpack-plugin": "^5.3.1",
    "style-loader": "^3.3.1",
    "webpack": "^5.65.0",
    "webpack-cli": "^4.9.1",
    "webpack-dev-server": "^4.6.0"
  ,
  "dependencies": 
    "@apollo/client": "^3.5.6",
    "@apollo/link-context": "^2.0.0-beta.3",
    "@apollo/react-hooks": "^4.0.0",
    "@auth0/auth0-react": "^1.8.0",
    "apollo-cache-inmemory": "^1.6.6",
    "apollo-client": "^2.6.10",
    "apollo-link-http": "^1.5.17",
    "bootstrap": "^5.0.1",
    "dayjs": "^1.10.5",
    "npm-force-resolutions": "^0.0.10",
    "prop-types": "^15.7.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^6.1.1",
    "regenerator-runtime": "^0.13.9",
    "svg-url-loader": "^7.1.1"
  ,
  "description": "",
  "resolutions": 
    "react": "17.0.2",
    "graphql": "16.1.0"
  

【参考方案1】：

我找到了解决方案（提示：这很奇怪）

我意识到我的 Webpack 实时重新加载正在我的其他组件上工作（除了我遇到的问题）。

我最终决定删除该组件并创建一个新组件（精确副本），然后它完美运行！？

我还是不知道为什么 Webpack 不特别喜欢这个组件……