如何为不同环境配置Angular builder及自定义webpack，适配serve本地环境？

Angular CLI 的 angular.json 中，每个architect目标的builder属性仅支持在目标的根层级定义，configurations 下的子配置项只能覆盖当前builder对应的参数选项，无法重写builder本身，所以你直接在local配置里加builder字段不会生效。

方案1：新增独立的serve目标用于local环境 #

如果只有local环境需要使用不同的builder，你可以在architect下新增一个专门的local-serve目标，单独配置对应的builder：

"architect": {
  "serve": {
    "builder": "@angular-builders/custom-webpack:dev-server",
    "options": {
      "browserTarget": "app:build"
    },
    "configurations": {
      "production": {
        "browserTarget": "app:build:production"
      },
      "qa": {
        "browserTarget": "app:build:qa"
      }
    }
  },
  "serve:local": {
    "builder": "你要使用的自定义builder完整路径",
    "options": {
      "browserTarget": "app:build:local",
      // 补充该builder需要的其他配置参数
    }
  }
}

启动时执行 ng run app:serve:local 即可调用对应builder。

方案2：仅为local环境配置同builder的专属参数 #

如果你不需要更换builder，只是要给local环境的@angular-builders/custom-webpack:dev-server传特殊参数，直接加在local配置项内即可，不需要重复定义builder：

"serve": {
  "builder": "@angular-builders/custom-webpack:dev-server",
  "options": {
    "browserTarget": "app:build"
  },
  "configurations": {
    "production": {
      "browserTarget": "app:build:production"
    },
    "qa": {
      "browserTarget": "app:build:qa"
    },
    "local": {
      "browserTarget": "app:build:local",
      // 这里填写当前builder支持的参数，比如自定义webpack配置路径、端口、代理等
      "customWebpackConfig": {
        "path": "./webpack.local.config.js"
      },
      "port": 4201
    }
  }
}

启动命令使用 ng serve --configuration local 即可生效。

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