Angular CLI 6.0.1如何管控开发环境及Webpack配置

嘿，我来帮你搞定这两个Angular的问题！

一、angular.json中是否存在对应production的开发环境配置项？ #

当然有！Angular CLI默认就在angular.json的configurations节点下提供了development配置项（要是你项目里没看到，完全可以手动添加）。

你直接找到（或者新增）这个配置，把sourceMap设为false就行——这样执行ng build或者ng serve时，默认就会用这个开发环境配置（除非你特意加了--configuration production指定生产环境）。

给你个配置示例参考：

"configurations": {
  "production": {
    // 你的生产环境原有配置
    "optimization": true,
    "outputHashing": "all",
    "sourceMap": false,
    "extractCss": true,
    "namedChunks": false,
    "aot": true,
    "extractLicenses": true,
    "vendorChunk": false,
    "buildOptimizer": true,
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.prod.ts"
      }
    ]
  },
  "development": {
    "optimization": false,
    "outputHashing": "none",
    "sourceMap": false, // 这里改成你要的false
    "extractCss": false,
    "namedChunks": true,
    "aot": false,
    "extractLicenses": false,
    "vendorChunk": true,
    "buildOptimizer": false,
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.ts" // 开发环境用默认环境文件
      }
    ]
  }
}

另外，你还可以在serve配置里默认指定使用development，确保ng serve也会应用这个设置：

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "browserTarget": "your-project-name:build:development" // 这里加上:development
  },
  // ...其他原有配置
}

二、Angular CLI 6没有ng eject，如何查看和修改webpack.config.js？ #

没错，Angular CLI 6及之后确实砍掉了ng eject命令，但咱们可以用自定义构建器来扩展Webpack配置，最常用的就是@angular-builders/custom-webpack这个包，步骤超简单：

1. 先安装包（注意和你的Angular版本匹配，CLI6对应的包版本选^8.x左右的就行，实在拿不准直接装最新兼容版）：

npm install @angular-builders/custom-webpack --save-dev

2. 修改angular.json里的构建配置，把默认的构建器换成自定义的：
   找到architect.build节点，把builder改成@angular-builders/custom-webpack:browser，然后加个customWebpackConfig字段指定你的自定义配置文件路径：

"build": {
  "builder": "@angular-builders/custom-webpack:browser", // 替换原来的builder
  "options": {
    "customWebpackConfig": {
      "path": "./webpack.config.js", // 你的自定义配置文件路径
      "mergeStrategies": {
        "module.rules": "prepend" // 可选，比如你想让自定义规则优先执行就用这个
      }
    },
    // ...其他原有options配置（比如outputPath、index、main这些）
  },
  // ...configurations配置保持不变
}

要是想让ng serve也用这个自定义配置，同样把architect.serve的builder换成@angular-builders/custom-webpack:dev-server：

"serve": {
  "builder": "@angular-builders/custom-webpack:dev-server",
  "options": {
    "browserTarget": "your-project-name:build"
  },
  // ...其他原有配置
}

3. 创建自己的webpack.config.js文件，在这里你想怎么改Webpack配置都行。比如禁用sourceMap，或者加个新的loader：

module.exports = {
  // 示例：禁用sourceMap
  devtool: false,
  // 再比如添加处理txt文件的loader
  module: {
    rules: [
      {
        test: /\.txt$/,
        use: 'raw-loader'
      }
    ]
  }
};

至于查看默认的Webpack配置，你可以执行ng build --verbose命令，它会输出构建时用的默认配置细节；要是想更直观地看到完整配置，也可以借助@angular-devkit/build-angular的内部API打印，但一般用自定义构建器扩展就完全够用啦。

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