使用webpack-dev-middleware时，node_modules更新后如何重新编译生效？

核心原因 #

webpack默认会对node_modules中的模块启用强缓存（认为依赖不会频繁变动），同时webpack-dev-middleware的内存缓存机制也会保留旧模块内容，仅重启服务器或清除文件系统缓存无法触发热更新。

具体解决方案 #

1. 配置webpack监听目标依赖文件

修改你的webpack.config.js，添加watchOptions让webpack监听test-lib的变化，同时调整缓存策略：

const path = require('path');

module.exports = {
  // ...其他原有配置
  watchOptions: {
    // 仅忽略除test-lib外的node_modules目录
    ignored: /node_modules(?!\/test-lib)/,
  },
  cache: {
    type: 'filesystem',
    cacheDirectory: path.resolve(__dirname, '.webpack-cache'),
    // 对test-lib禁用缓存
    buildDependencies: {
      config: [path.resolve(__dirname, 'node_modules/test-lib/dist/TestLibC.js')]
    }
  }
};

2. 修改监听逻辑，触发webpack重新编译

替换你现有代码中的fs.watch回调逻辑，无需重启服务器，直接清除模块缓存并让webpack重新编译：

fs.watch("/home/roroco/Downloads/js/test-js/node_modules/test-lib/dist/TestLibC.js", (ev, filename) => {
  console.log(`filename:${filename}`);
  
  // 清除Node.js的require缓存
  const targetModulePath = require.resolve("../node_modules/test-lib/dist/TestLibC.js");
  delete require.cache[targetModulePath];
  
  // 通知webpack编译器重新编译所有内容
  compiler.invalidate();
});

3. 优化webpack-dev-middleware配置

确保webpack-dev-middleware启用了实时更新，可在初始化时添加相关选项：

let middleware = webpackDevMiddleware(compiler, {
  publicPath: conf.output.publicPath,
  // 强制将编译结果写入磁盘（可选，便于验证文件更新）
  writeToDisk: true
});

验证方法 #

修改test-lib/dist/TestLibC.js内容后，查看控制台是否输出webpack编译日志，浏览器刷新后检查是否加载了新代码。

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