Angular 8.2.14生产构建后浏览器Sources显示webpack://问题求助

核心配置调整（angular.json） #

找到项目根目录下的angular.json，定位到对应项目的生产构建配置节点：projects[你的项目名].architect.build.configurations.production，确保以下配置项正确设置：

{
  "production": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.prod.ts"
      }
    ],
    "optimization": true,
    "outputHashing": "all",
    "sourceMap": false,
    "extractCss": true,
    "namedChunks": false,
    "aot": true,
    "extractLicenses": true,
    "vendorChunk": false,
    "buildOptimizer": true,
    "budgets": [
      {
        "type": "initial",
        "maximumWarning": "2mb",
        "maximumError": "5mb"
      }
    ]
  }
}

关键配置说明：

• sourceMap: false：彻底关闭源码映射文件生成，这是消除webpack://源码目录的核心
• optimization: true：开启代码压缩、混淆等优化
• buildOptimizer: true：配合Angular AOT编译移除冗余代码、缩小体积
• vendorChunk: false：合并第三方依赖chunk，减少构建产物数量

额外检查项 #

• 如果项目使用了自定义webpack配置（如@angular-builders/custom-webpack），需确保webpack配置文件中devtool设置为false或'none'，避免生成源码映射
• 执行构建命令时添加--delete-output-path参数清理旧构建产物，避免缓存干扰：

  ng build --prod --delete-output-path
  

验证方式 #

构建完成后检查dist目录，确认没有.map后缀的文件；部署后打开浏览器开发者工具的Sources面板，确认webpack://目录不再出现。

内容的提问来源于stack exchange，提问作者Alejandro Diaz Bellido