Webpack4升级至Webpack5后--watch监听模式失效无法触发重新编译

解决方案 #

• 优先检查输出文件名配置：开发模式下不要在output.filename和output.chunkFilename里用[chunkhash]、[contenthash]这类哈希占位符，这些是生产环境做缓存策略用的，watch模式下用会导致webpack没法正确追踪文件的更新映射，你先把开发环境的文件名改成[name].js就能排查这个问题。
• 调整watchOptions配置：你之前只开了poll没加其他配置，大概率是扫描范围太大或者轮询间隔太长导致没反应，改成下面的配置试试：

watchOptions: {
    poll: 1000, // 每1秒轮询一次文件变化
    ignored: /node_modules/, // 跳过node_modules目录减少不必要的扫描
    aggregateTimeout: 300 // 文件停更300ms后再触发编译，避免多次改动频繁编译
}

• 检查WSL路径权限：你现在把项目放在/usr/local/dev目录下，这个目录默认是root权限，你运行webpack的普通用户可能没有足够的文件监听权限，把项目移到你当前WSL用户的home目录（比如~/dev/）再启动watch试试。
• 升级依赖修复已知bug：Webpack5早期版本的watchpack依赖在WSL环境下有监听异常的已知问题，直接把webpack升到最新稳定版就能解决，执行命令：
  npm i webpack@latest --save-dev
• 确认文件修改方式：如果你用的是WSL2，在Windows这边的编辑器修改WSL里的文件是不会触发WSL的文件变更事件的，要么直接在WSL内部的编辑器改文件，要么确保轮询配置正常生效。

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