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

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
  }
}