为什么Chrome dev tools中webpack 5会出现重复Source Map？

该问题由Webpack 5的sourceMap生成逻辑与Angular默认构建配置冲突导致，可通过以下步骤解决：

• 第一步：修改Angular构建配置
  打开项目根目录的angular.json文件，定位到projects > 你的项目名称 > architect > build > options节点，修改sourceMap配置如下：

  "sourceMap": {
    "scripts": true,
    "styles": true,
    "vendor": false,
    "hidden": false
  }
  

• 第二步：调整Webpack配置（若使用自定义Webpack构建）
  若项目使用@angular-builders/custom-webpack自定义构建逻辑，在自定义webpack配置文件中添加如下配置：

  module.exports = {
    devtool: 'source-map',
    output: {
      devtoolModuleFilenameTemplate: 'webpack://[namespace]/[resource-path]?[loaders]',
      devtoolNamespace: require('./package.json').name
    }
  }
  

• 第三步：调整Chrome调试器设置
  打开Chrome开发者工具，点击右上角齿轮图标进入设置页，找到Experiments分类，关闭Enable webpack internals开关后重启调试器即可。

配置完成后重启ng serve服务，清空浏览器缓存重新进入页面，调试器中就不会再显示webpack-internal://协议下的转译后文件。

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