create-react-app执行react-scripts start仅显示chunk文件、无法查看源文件调试

这个现象确实和webpack的Source Map工作机制直接相关，不需要怀疑是自己不小心改坏了create-react-app的默认配置，这类问题的触发原因非常明确。CRA基于webpack搭建开发服务时，正常会在开发模式下生成和本地源文件一一映射的Source Map文件，配合浏览器DevTools把堆栈里的打包chunk路径映射回真实的本地源文件行号，实现报错的快速定位。当控制台报错堆栈里只显示chunk.xxx.js的打包文件路径、看不到任何本地源文件跳转入口时，核心原因都是Source Map没有正确加载、生成或者被浏览器解析。

• 首先检查浏览器DevTools的Source Map开关：按F1打开Chrome DevTools的设置面板，在Sources分类下确认Enable JavaScript source maps选项处于勾选状态。Chrome版本升级时经常会重置这个默认配置，开关关闭后浏览器会直接展示原始打包chunk的路径，不会做源文件映射跳转，这也是最常被忽略的触发原因。
• 排查GENERATE_SOURCEMAP配置：CRA会自动读取启动时的环境变量，如果检测到GENERATE_SOURCEMAP被设置为false，会完全关闭Source Map生成逻辑。哪怕没有手动修改过项目webpack配置，只要项目根目录的.env/.env.local文件里存在这个配置项，或者系统全局环境变量被注入了这个值，就会触发该问题。开发调试场景下需要移除这个配置，或者将其值设为true后重启服务。
• 清理webpack缓存重启：开发过程中热更新累积的缓存很容易出现新旧chunk和Source Map不匹配的问题，直接停掉本地启动服务，删除项目根目录下的node_modules/.cache文件夹，再重新执行react-scripts start启动项目，多数缓存导致的映射失效问题都能通过这个操作恢复。
• 排查Source Map加载失败：如果DevTools的Sources面板里完全看不到webpack://开头的虚拟源文件目录，说明Source Map请求根本没有从本地服务拿到，直接在浏览器的Network面板筛选.map后缀的请求，就能定位是请求404还是被拦截导致的映射失败。

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