React项目Webpack监听文件变更时单个模块首次更新后停止构建问题

排查与解决方案 #

• 修正Webpack基础配置
  你当前的entry和输出路径直接写在启动命令中，配置文件未显式声明context、监听规则，容易出现路径识别偏差。先补全webpack.config.js配置：

const path = require('path');

module.exports = {
  context: __dirname,
  entry: './frontend/src/index.js',
  output: {
    path: path.resolve(__dirname, 'frontend/static/frontend/'),
    filename: 'main.js'
  },
  watchOptions: {
    aggregateTimeout: 200,
    poll: 1000,
    ignored: /node_modules/
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
      {
        test: /\.css$/,
        exclude: /node_modules/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
}

同步修改package.json的scripts配置，避免命令行参数和配置文件冲突：

"scripts": {
  "dev": "webpack --mode development --watch",
  "build": "webpack --mode production",
  "test": "cypress open"
}

如果项目运行在WSL、虚拟机、共享文件夹环境下，watchOptions.poll必须开启，否则系统文件变更事件会丢失，导致监听失效。

• 检查异常文件的引用关系
  确认该文件是否仅被动态import引用，若动态导入的逻辑触发条件异常，会导致webpack依赖树识别失败，后续变更不会被监听到。可以先在入口文件index.js中静态导入一次该文件进行测试，如果监听恢复正常，说明是动态引用的依赖识别问题，调整导入逻辑即可。

• 排查文件名大小写问题
  如果代码中import的路径大小写和实际文件名大小写不一致（如实际文件名为OrderCard.js，代码中写为import OrderCard from './ordercard.js'），在不区分大小写的文件系统中会出现首次加载正常、后续监听失效的问题，统一路径和文件名的大小写即可修复。

• 清除缓存重试
  删除所有缓存文件后重新安装依赖测试：

rm -rf node_modules/.cache
rm -rf frontend/static/frontend/*
npm install
npm run dev

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