我在哪里可以找到 Angular CLI 7.3.9 默认生成的 webpack 设置文件，以便我可以基于它构建我的覆盖？

Question

我想为 Angular CLI v7.3.9 生成的项目扩展 webpack 构建过程。

我发现我必须使用这个工具： https://github.com/just-jeb/angular-builders/tree/7.x.x/packages/custom-webpack

这似乎是一个很好的解决方案，但不幸的是我找不到任何关于扩展现有 Angular CLI 配置文件的示例。

我的意思是 - 我想看看 Angular CLI 已经为我生成了什么，然后才能想到我应该在我的自定义构建器覆盖配置中使用的正确覆盖。作为 webpack 的新手，我需要了解已经存在的内容，以便弄清楚我可以调整哪些内容以避免完全破坏项目。

在哪里可以找到 Angular CLI 默认生成的 webpack 设置文件，以便我可以基于它构建我的覆盖？

更具体地说，问题在于构建生产项目大约需要 25 分钟。这是一个包含数百个表单和网格组件的大型项目，我看到当前的构建过程在 ModuleConcatenationPlugin 中花费了大约 20 分钟，在 TerserPlugin 中花费了 5 分钟，而对计算机资源没有任何严重的负载。我听说 ModuleConcatenationPlugin 已被弃用，并认为也许我可以改用更好的东西（UglifyJS ? optimization.concatenateModules ?），但首先我必须找出 Angular CLI 是如何使用它的，这样我才能正确地覆盖它。

Answer 1

从技术上讲，从 v5 开始（据我所知）在 angular cli 中，您拥有 ng eject，这将使您能够访问 webpack 配置。

Answer 2

您可以使用ngx-build-plus

例子：

• 添加 ngx-build-plus：ng add ngx-build-plus

• 将文件 webpack.partial.js 添加到您的（子）项目的根目录：

     const webpack = require('webpack');

        module.exports = {
            plugins: [
                new webpack.DefinePlugin({
                    "VERSION": JSON.stringify("4711")
                })
            ]
        }

• 在 app.component.ts 中使用全局变量 VERSION：

import { Component } from '@angular/core';

declare const VERSION: string;

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Version: ' + VERSION;
}

• 使用指向您的部分 webpack 配置的 --extra-webpack-config 开关启动您的应用程序：

ng serve --extra-webpack-config webpack.partial.js -o

如果您的项目是基于 CLI 的子项目，请也使用 --project 开关：

ng serve --project getting-started -o --extra-webpack-config webpack.partial.js

更新你可以看看他们的doc，这里是完整的config