Webpack监听模式下重复编译node_modules问题求助

嘿，我之前也碰到过类似的头疼问题，Webpack的watch模式偶尔会在明明没碰node_modules的情况下重新编译vendor，给你几个实用的解决方案：

1. 优化splitChunks配置，让vendor chunk更稳定 #

你的splitChunks已经做了基础拆分，但可以加几个参数来避免无意义的重新生成：

optimization: {
  splitChunks: {
    cacheGroups: {
      vendor: {
        test: /[\\/]node_modules[\\/]/,
        name: "vendor",
        chunks: "all",
        priority: 10, // 给vendor更高优先级，确保它先被拆分出来
        enforce: true, // 强制生成独立的vendor chunk，不受chunk大小限制
        reuseExistingChunk: true // 核心参数！复用已存在的vendor chunk，避免重新扫描编译
      },
      Common: {
        test: /[\\/]Common[\\/]/,
        name: "Common",
        chunks: "all",
        priority: 5 // 优先级低于vendor，避免和vendor规则冲突
      }
    }
  }
},

reuseExistingChunk是关键，它会让Webpack在watch模式下检测到vendor chunk已经存在时，直接复用，而不是重新遍历node_modules生成新的chunk。

2. 修正watchOptions的忽略规则 #

你当前用path.resolve指定忽略路径，有时候可能因为路径解析细节问题没生效，可以换成更可靠的glob模式：

watchOptions: {
  ignored: [
    'dist/**',
    'node_modules/**' // 用glob匹配所有node_modules下的文件及子目录
  ]
}

Webpack的watchOptions.ignored原生支持glob语法，这种写法比绝对路径更稳定，能确保node_modules下所有文件都被排除在监听范围外。

3. 用HardSourceWebpackPlugin缓存编译结果 #

这个插件是Webpack 4时代的性能神器，它会为每个模块生成缓存，首次编译后，后续编译直接复用缓存，不仅速度飞起来，还能彻底避免vendor的无意义重编译：

首先安装插件：

npm install hard-source-webpack-plugin --save-dev

然后在webpack.config.js中引入并启用：

const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');

module.exports = {
  // ...其他配置
  plugins: [
    new HardSourceWebpackPlugin()
  ]
};

它会在项目根目录生成.hard-source-cache文件夹，缓存所有编译结果，包括vendor，后续编译几乎不会再重新处理node_modules里的内容。

4. 排查是否有外部工具修改node_modules #

有时候某些npm包的postinstall脚本会悄悄修改自身文件，或者IDE的自动格式化、lint工具不小心扫描并修改了node_modules里的文件，你可以检查下node_modules文件夹的文件修改时间，看看有没有异常变化的文件。

按照上面的步骤调整后，应该就能解决watch模式下重复编译vendor的问题了。

内容的提问来源于stack exchange，提问作者K. Roland