Angular 14中如何禁用Webpack以解决代码调试问题

首先明确：Angular CLI 底层依赖 Webpack，无法完全禁用它，但可以通过配置调整开发模式下的打包行为，让代码调试更顺畅。

1. 确认开发启动命令 #

用开发模式启动项目，别用生产构建命令：

• 正确命令：ng serve
  这个命令默认开启增量编译、生成source map，不会做代码压缩/混淆，完全适配调试需求。
• 避免使用：ng build 或 ng build --prod，这类命令会生成优化后的生产包，代码被压缩混淆，根本没法调试。

2. 调整 angular.json 配置优化调试 #

打开你的 angular.json，找到对应项目的 architect -> serve -> configurations -> development 节点，确保配置如下：

"development": {
  "buildOptimizer": false,
  "optimization": false,
  "vendorChunk": true,
  "extractLicenses": false,
  "sourceMap": true,
  "namedChunks": true
}

• sourceMap: true：生成源码映射文件，让浏览器直接映射到你的TS原代码，调试时能看到真实代码而非打包后的JS。
• optimization: false & buildOptimizer: false：关闭代码压缩、混淆和优化，保留原始代码结构。
• namedChunks: true：打包后的chunk用有意义的名称，方便在浏览器开发者工具里识别。

如果默认启动不是开发模式，启动时指定配置：ng serve --configuration development

3. 检查 tsconfig.json 调试配置 #

确保 tsconfig.json 里开启了调试支持：

"compilerOptions": {
  "sourceMap": true,
  "inlineSourceMap": false,
  "inlineSources": false,
  "declaration": false
}

• sourceMap: true 和angular.json的配置对应，保证TS编译时生成source map文件。

4. 浏览器调试工具设置 #

在Chrome/Firefox开发者工具里：

• 打开Sources面板，找到webpack://下的项目原代码（一般在./src目录下），直接在TS代码上打断点就能调试。
• 如果看不到原代码，检查浏览器是否禁用了source map：在开发者工具设置里，确保Enable JavaScript source maps和Enable CSS source maps是勾选状态。

误区澄清 #

• Angular CLI 没法彻底禁用Webpack，它是CLI的核心打包工具。所谓"禁用Webpack"本质是调整打包策略，让开发过程贴近源码调试。
• 如果ng serve还是触发全量打包，检查是否修改过默认的serve配置，或者安装了@angular-builders/custom-webpack这类自定义Webpack插件，它们可能改变默认行为。

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