Webpack Watch模式未仅编译变更文件问题咨询

看起来你遇到了Webpack Watch模式没有按预期只编译变更文件的问题——我之前也帮不少开发者排查过类似情况，下面给你梳理几个常见的原因和解决思路：

一、先排查模块依赖链是否存在交叉引用 #

Webpack的增量编译完全基于它构建的模块依赖图，如果你的first.tsx和second.tsx共享了某个公共依赖（比如同一个工具函数、样式文件），或者其中一个文件间接引用了另一个的内容，那修改其中一个时，Webpack会判定相关依赖都需要重新编译。

你可以通过这个命令生成完整的依赖图来排查：

./node_modules/.bin/webpack --display-modules

仔细核对两个入口文件的依赖链，看看有没有你没注意到的隐式引用。

二、检查插件与配置是否破坏了增量编译 #

有些插件或配置会干扰Webpack的增量编译逻辑：

• 如果你用了clean-webpack-plugin这类每次编译都会清空输出目录的插件，或者某些强制全量压缩的代码优化插件，可能会导致Webpack放弃增量编译，转而重新打包所有文件。可以先暂时禁用这些插件，看看是否恢复预期行为。
• 优化你的watchOptions配置，有时候文件系统的监听机制会有延迟或遗漏，加上poll和aggregateTimeout可以改善：

watchOptions: {
  ignored: /node_modules/,
  poll: 1000, // 每秒轮询一次文件变化，适配部分文件系统
  aggregateTimeout: 300 // 等待300ms再触发编译，避免频繁修改导致多次编译
}

三、确认resolve配置是否覆盖了必要扩展名 #

如果你的tsx文件里引用了.ts、.js这类其他扩展名的文件，但resolve.extensions没有正确配置，Webpack可能会误判依赖关系，导致不必要的全量编译。确保你的配置里有：

resolve: {
  extensions: ['.tsx', '.ts', '.js']
}

四、验证缓存机制是否正常工作 #

Webpack的增量编译依赖缓存，如果你的配置里禁用了缓存，或者缓存目录被手动清空，就会触发全量编译。检查一下缓存相关配置：

module.exports = {
  // ...
  cache: {
    type: 'filesystem', // 默认开启的文件系统缓存，是增量编译的核心
  },
  // ...
}

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