Angular CLI自定义Webpack配置

Question

在以前的Angular版本中，eject有一个选项，以便您可以根据需要修改Webpack配置。
此功能最常见的用例之一是添加自定义Webpack加载程序。

在Angular 6中，此选项已被删除，因此，目前几乎没有办法获取webpack配置（除了在angular源代码中查找它）。

有什么方法可以向使用@ angular / cli 6+的Angular应用程序添加自定义webpack配置？或者，是否可以通过任何方式“弹出”新的Angular CLI使用的webpack配置？

Answer 1

免责声明：我是以下图书馆的所有者

您可以使用angular-builders库，该库允许您使用自定义的webpack配置扩展现有的browser和server目标。

用法很简单：

1. 安装库：npm i -D @angular-builders/custom-webpack

2. 修改您的 angular.json ：

   "architect": {
      ...
      "build": {
          "builder": "@angular-builders/custom-webpack:browser"
          "options": {
                 "customWebpackConfig": {
                    "path": "./extra-webpack.config.js",
                    "replaceDuplicatePlugins": true
                 },
                 "outputPath": "dist/my-cool-library",
                 "index": "src/index.html",
                 "main": "src/main.ts",
                 "polyfills": "src/polyfills.ts",
                 "tsConfig": "src/tsconfig.app.json"
                 ...
          }
   

3. 将 extra-webpack.config.js 添加到应用程序的根目录
4. 将额外的配置放入 extra-webpack.config.js 中（只是一个简单的webpack配置）

Here，您可以找到一个将node-loader添加到浏览器配置的示例。

进一步阅读：
Customizing Angular CLI build - an alternative to ng eject

Answer 2

不推荐使用Angular 8 @angular-builders/dev-server:generic，而使用@angular-builders/custom-webpack:dev-server，来源：https://github.com/just-jeb/angular-builders/blob/master/MIGRATION.MD。

最重要的是，如果在迁移后您看到以下错误npm i @angular-devkit/architect@latest @angular-devkit/build-angular@latest @angular-devkit/core@latest @angular-devkit/schematics@latest，则可能需要运行architect_1.createBuilder is not a function。