升级webpack 5后无法调试TS/JS文件问题求助

你遇到的三个调试类问题均由webpack 5升级后，自定义webpack配置与Angular 12默认构建逻辑的sourcemap处理冲突导致，按以下步骤修改即可修复：

配置修改点 #

1. custom-webpack.config.js 调整
   • 删掉重复的sourcemap配置：同时设置devtool: "inline-source-map"和SourceMapDevToolPlugin在webpack 5中会生成冲突的sourcemap，删除devtool: "inline-source-map"这一行即可
   • 移除重复的TS编译规则：Angular默认使用@ngtools/webpack处理TS文件，你额外添加的ts-loader会导致编译后的代码与源码路径映射错乱，直接删除module.rules中关于.tsx?$的整条匹配规则
   • 调整SourceMapDevToolPlugin参数适配Angular构建路径：

   new webpack.SourceMapDevToolPlugin({
     filename: '[file].map',
     moduleFilenameTemplate: '[resource-path]',
     sourceRoot: 'webpack:///'
   })
   

2. angular.json 补充配置
   在build.options中补充sourcemap开启配置，确保Angular原生构建不会拦截sourcemap生成：

   "sourceMap": true,
   "vendorSourceMap": true
   

   同时确认serve配置块下也继承了相同的sourcemap配置，保证ng serve运行时sourcemap正常输出。

验证步骤 #

• 清理本地缓存：删除node_modules文件夹和package-lock.json文件后重新执行npm install安装依赖
• 重启开发服务：执行npm run start启动服务后打开浏览器开发者工具，在Sources面板的webpack://目录下可找到对应TS源码，debugger语句可正常触发断点
• VS 2019调试适配：确保VS调试时附加的Chrome进程为当前应用的运行进程，无需额外修改调试配置即可正常识别TS断点。

内容的提问来源于stack exchange，提问作者A. Angee