Где я могу найти Angular CLI 7.3.9 сгенерированный по умолчанию файл настроек веб-пакета, чтобы я мог построить свои переопределения на его основе?

Question

Я хочу расширить процесс сборки веб-пакетов для проекта, сгенерированного Angular CLI v7.3.9.

Я обнаружил, что должен использовать этот инструмент: https://github.com/just-jeb/angular-builders/tree/7.x.x/packages/custom-webpack

Кажется, это хорошее решение, но, к сожалению, я не могу найти пример расширения существующего файла конфигурации Angular CLI.

Я имею в виду - я хочу посмотреть, что Angular CLI уже генерирует для меня, прежде чем я смогу думать о правильных переопределениях, которые я должен использовать в своей конфигурации переопределения собственного компоновщика. Будучи новичком в вебпаке, мне нужно узнать, что там уже есть, чтобы понять, что я могу настроить, чтобы избежать полного взлома проекта.

Где я могу найти Angular CLI, сгенерированный по умолчанию веб-пакет файл настроек, чтобы я мог строить свои переопределения на его основе?

Чтобы быть более точным c, проблема в том, что сборка проекта для производства занимает около 25 минут. Это большой проект с несколькими сотнями компонентов формы и сетки, и я вижу, что текущий процесс сборки занимает около 20 минут в ModuleConcatenationPlugin и 5 минут в TerserPlugin без какой-либо серьезной нагрузки на ресурсы компьютера. Я слышал, что ModuleConcatenationPlugin устарел и подумал, что, возможно, я мог бы вместо этого использовать что-то лучше (Uglify JS? Оптимизация.concatenateModules?), Но сначала я должен выяснить, как Angular CLI использует это, так что я могу переопределить это правильно.

Answer 1

Вы можете использовать ngx-build-plus

Пример:

• Добавить ngx-build-plus: ng add ngx-build-plus

• Добавьте файл webpack.partial. js в root вашего (под) проекта:

     const webpack = require('webpack');

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

• Используйте глобальную переменную VERSION в вашем app.component.ts:

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

• Запустите ваше приложение с ключом --extra-webpack-config, указывающим на вашу частичную конфигурацию webpack:

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

Если ваш проект является подпроектом на основе CLI, используйте также переключатель --project:

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

Обновление, которое вы можете посмотреть на их do c и вот полный конфиг

Answer 2

технически в angular cli начиная с v5 (насколько я знаю) у вас есть ng eject, который даст вам доступ к конфигурации webpack.