angular.json webpack，通过webpack实现切换环境配置，配置公共变量，配置快捷命令行

配置不同环境（命名规则见 附1）

1 新建切换环境配置文件夹

2 新建environment.ts 配置 复制三份并重命名（环境公共变量也在此配置）

export const environment = {production: false,baseUrl: 'http://192.xxx.111.43:8080',//不同环境URL，不同文件填写不同参数useHash: false,xxxx:xxx,//公共变量配置，不同文件填写不同参数};

3.打开 angular.json -> projects -> 项目名 -> architect -> build

配置 基本webpack打包配置

"production": {//打包命令-–prod()的配置"defaultConfiguration": "prod"//配置默认打包“ng build”"configurations": {//代表这个命令的多种调用模式 "prod": {//执行ng build -c -prod 进行打包"fileReplacements": [//当前打包命令替换文件配置{"replace": "src/environments/environment.ts","with": "src/environments/environment.prod.ts"}],"budgets": [{"type": "initial","maximumWarning": "5mb","maximumError": "10mb"},{"type": "anyComponentStyle","maximumWarning": "100kb","maximumError": "100kb"}],"outputHashing": "all"}//自定义配置 dev....."dev": {执行ng build -c -dev 进行打包环境切换"fileReplacements": [{"replace": "src/environments/environment.ts","with": "src/environments/environment.dev.ts"}]},},

4 如需配置开发环境切换，环境公共变量，则再配置serve

"serve": {//serve模块配置"defaultConfiguration": "dev"//配置 ng serve 默认启动项目"builder": "@angular-devkit/build-angular:dev-server",//serve执行的自动化程序"options": {"browserTarget": "angularTest:build"},"configurations": {//如果执行serve -c -xxx切换，则在下面配置上面定义的命令名"production": {"browserTarget": "angularTest:build:production"}"dev": {//可以使用 "ng serve -c dev"实现开发环境切换"browserTarget": "app:build:dev"//项目名：build：配置名},}},

5配置 package.json 配置快捷启动

"scripts": {"ng": "ng","start": "ng serve ---open --host 0.0.0.0", //默认dev"prod": "ng serve -c prod --open --host 0.0.0.0", // npm run prod 开发环境切换"build": "ng build ", //默认prod 可用 npm run build --c dev 切换打包环境"watch": "ng build --watch --configuration development","test": "ng test"},

附1：environment环境常用起名配置参数

dev（Development environment）：开发环境。用于开发者调试使用。

test：测试环境。

prod：生产环境，是值正式提供对外服务的，一般会关掉错误报告，打开错误日志。

sit（System Integration Test）：系统集成测试。

uat（User Acceptance environment）：用户验收测试环境。生产环境下的软件测试者测试使用。预发布环境。

pre：灰度环境。灰度测试环境就是生产环境，生产数据，所影响的也是生产环境，只是范围比测试环境更广，更真实。其实就是小范围的生产环境。类似于游戏内测。

fat（Feature Acceptance Test environment）：功能验收测试环境。软件测试者测试使用。

附2：webpack angular.json 目录结构配置详解

"architect": {"build": {},//为 ng build 命令的选项配置默认值 "serve": {},//覆盖构建默认值，并为 ng serve 命令提供额外的服务器默认值。除了 ng build 命令的可用选项之外，还增加了与开发服务器有关的选项 "e2e" : {},//覆盖了构建选项默认值，以便用 ng e2e 命令构建端到端测试应用 "test": {},//会覆盖测试时的构建选项默认值，并为 ng test 命令提供额外的默认值以供运行测试 "lint": {},//ng lint 命令配置了默认值，用于对项目源文件进行代码分析。Angular 默认的 linting 工具为 TSLint "extract-i18n": {},//为 ng xi18n 命令所用到的 ng-xi18n 工具选项配置了默认值，该命令用于从源代码中提取带标记的消息串，并输出翻译文件 "server": {},//用于为使用 ng run <project>:server 命令创建带服务器端渲染的 Universal 应用配置默认值 "app-shell": {}//使用 ng run <project>:app-shell 命令为渐进式 Web 应用（PWA）

附3： angular.json webpack完整文件（）

{"$schema": "./node_modules/@angular/cli/lib/config/schema.json","version": 1,"newProjectRoot": "projects","projects": {"app": {"projectType": "application","schematics": {"@schematics/angular:component": {"style": "scss","skipTests": true},"@schematics/angular:directive": {"skipTests": true},"@schematics/angular:pipe": {"skipTests": true},"@schematics/angular:service": {"skipTests": true}},"root": "","sourceRoot": "src","prefix": "pim","architect": {"build": {"builder": "ngx-build-plus:browser","options": {"outputPath": "dist/app","index": "src/index.html","main": "src/main.ts","polyfills": ["zone.js"],"tsConfig": "tsconfig.app.json","inlineStyleLanguage": "scss","assets": ["src/favicon.ico","src/assets"],"styles": ["@angular/material/prebuilt-themes/indigo-pink.css","src/styles.scss"],"scripts": ["./node_modules/echarts/dist/echarts.js"]},"configurations": {"dev": {"fileReplacements": [{"replace": "src/environments/environment.ts","with": "src/environments/environment.dev.ts"}],"buildOptimizer": false,"optimization": false,"vendorChunk": true,"extractLicenses": false,"sourceMap": true,"namedChunks": true},"prod": {"fileReplacements": [{"replace": "src/environments/environment.ts","with": "src/environments/environment.prod.ts"}],"budgets": [{"type": "initial","maximumWarning": "5mb","maximumError": "10mb"},{"type": "anyComponentStyle","maximumWarning": "100kb","maximumError": "100kb"}],"outputHashing": "all"}},"defaultConfiguration": "prod"},"serve": {"builder": "ngx-build-plus:dev-server","configurations": {"dev": {"browserTarget": "app:build:dev"},"prod": {"browserTarget": "app:build:prod"}},"defaultConfiguration": "dev"},"extract-i18n": {"builder": "ngx-build-plus:extract-i18n","options": {"browserTarget": "app:build"}},"test": {"builder": "ngx-build-plus:karma","options": {"polyfills": ["zone.js","zone.js/testing"],"tsConfig": "tsconfig.spec.json","inlineStyleLanguage": "scss","assets": ["src/favicon.ico","src/assets"],"styles": ["@angular/material/prebuilt-themes/indigo-pink.css","src/styles.scss"],"scripts": []}}}}},"cli": {"analytics": false}}

【精】angular.json webpack 通过webpack实现切换环境配置 配置公共变量 配置快捷命令行【全备注详解】