Webpack watch模式无文件变更仍重复构建，求排查方案

在Webpack的watch模式（或开发服务器）下，出现无文件变更却触发重新构建的情况，且Webpack未提示触发原因。自定义了WatchRunPlugin打印变更文件，发现首次构建有明确变更文件，但后续无变更时仍触发构建。

自定义插件及Webpack配置 #

class WatchRunPlugin {
  apply(compiler) {
    compiler.hooks.watchRun.tap('WatchRun', (comp) => {
      if (comp.modifiedFiles) {
        const changedFiles = Array.from(comp.modifiedFiles, (file) => `\n  ${file}`).join('');
        console.log('===============================');
        console.log('FILES CHANGED:', changedFiles);
        console.log('===============================');
      }
    });
  }
}

module.exports = {
  // ...
  plugins: [
    new WatchRunPlugin(),
    // ...
  ],
  watchOptions: {
    aggregateTimeout: 500,
    poll: 20000,
    ignored: ['**/static', '**/node_modules'],
  },
};

输出日志 #

===============================
FILES CHANGED: 
  /mnt/c/Users/Yoskutik/project/DesktopAccountDisabledPage.tsx
===============================
// Build info...
webpack 5.74.0 compiled successfully in 8875 ms
===============================
FILES CHANGED: 
===============================
// Build info...
webpack 5.74.0 compiled successfully in 5100 ms

排查思路 #

• 扩展插件监听更多钩子
  除watchRun外，新增监听afterCompile钩子，检查构建过程中是否有产物或临时文件被修改；同时打印compiler.watchFileSystem.watcher.mtimes（文件修改时间映射），对比两次重建前后的变化，找出时间戳异常变动的文件。还可以监听invalid钩子，捕捉触发重建的初始信号。

• 校验watchOptions配置有效性
  检查ignored规则是否精准：比如WSL共享目录下的路径可能需要更明确的glob匹配（如/mnt/c/Users/Yoskutik/project/static/**），避免漏忽略；暂时关闭poll轮询模式，改用系统原生文件监听，排除跨文件系统的误判；调整aggregateTimeout至更大值，排除短时间内的重复触发干扰。

• 排查第三方插件/loader的影响
  逐一禁用项目中的其他插件，定位是否有插件在构建时修改了未被忽略的文件（如lint工具、样式处理插件生成的临时文件）。找到目标插件后，检查其配置是否存在自动修改文件的逻辑。

• 解决跨文件系统兼容性问题
  从路径看使用的是WSL共享目录，这类场景易出现文件时间戳不同步的问题。可将项目迁移至WSL本地目录测试，或调整poll的轮询间隔，同时确保Windows与WSL系统时间同步。

• 启用Webpack调试日志
  启动Webpack时添加--debug参数，或设置环境变量DEBUG=webpack:watch，查看watch系统的详细日志，Webpack会打印监听文件列表及触发变更的具体原因。

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