В Angular-проектах система сборки исторически базировалась на Webpack как на основном инструменте бандлинга. Angular CLI использует абстракцию сборочной системы, в которой Webpack скрыт за уровнем конфигурации, называемым builder (строитель). Это позволяет отделить декларативное описание проекта от низкоуровневых деталей сборки.
Webpack выполняет ключевые задачи:
В Angular вся эта логика инкапсулируется в builder, который управляется через Angular CLI.
Система сборки Angular основана на концепции Architect (в новых версиях — Targets), где каждый процесс (build, serve, test, extract-i18n) определяется как отдельная цель.
Файл конфигурации:
angular.jsonКлючевые элементы структуры:
Пример:
{
"projects": {
"app": {
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {}
}
}
}
}
}Builder определяет, какой механизм сборки используется. В случае Angular стандартный builder подключает Webpack под капотом.
Основной Webpack builder в Angular CLI:
@angular-devkit/build-angular:browserОн выполняет следующие этапы:
Важная особенность заключается в том, что Webpack конфигурация не предоставляется напрямую. Она генерируется автоматически.
Процесс сборки можно представить как цепочку:
Angular добавляет собственные слои над Webpack:
Angular Compiler (ngc) выполняет специфичную для фреймворка трансформацию:
Webpack получает уже частично трансформированный код, что снижает его роль до бандлинга и оптимизации.
AOT (Ahead-of-Time compilation) существенно влияет на процесс сборки.
При AOT:
Webpack в этом случае обрабатывает уже оптимизированный output Angular Compiler.
В Angular архитектуре Webpack не является центральным элементом, а выполняет вспомогательную роль.
Angular отвечает за:
Webpack отвечает за:
Такое разделение позволяет Angular заменять backend сборки без изменения кода приложения.
Несмотря на скрытую конфигурацию, Angular CLI допускает расширение Webpack через сторонние инструменты.
Наиболее распространённый подход — использование custom webpack builder.
Установка:
npm install @angular-builders/custom-webpack --save-devИзменение angular.json:
{
"architect": {
"build": {
"builder": "@angular-builders/custom-webpack:browser",
"options": {
"customWebpackConfig": {
"path": "./webpack.config.js"
}
}
}
}
}Пример webpack.config.js:
module.exports = {
resolve: {
alias: {
'@app': '/src/app/'
}
}
};В этом режиме Angular объединяет стандартный конфиг Webpack с пользовательским.
Другой подход — использование:
ngx-build-plusОсобенности:
Пример:
{
"builder": "ngx-build-plus:browser",
"options": {
"extraWebpackConfig": "webpack.extra.js"
}
}Через кастомный builder становится доступным подключение стандартных Webpack plugins:
Пример:
const webpack = require('webpack');
module.exports = {
plugins: [
new webpack.DefinePlugin({
API_URL: JSON.stringify('https://api.example.com')
})
]
};Webpack в Angular управляет различными типами файлов через loaders:
Пример обработки стилей:
{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader']
}В Angular CLI эта конфигурация скрыта, но логика сохраняется.
Webpack реализует lazy loading через динамические импорты:
const AdminModule = () => import('./admin/admin.module').then(m => m.AdminModule);Angular Router использует этот механизм для разделения бандлов.
Webpack формирует отдельные chunks:
Webpack builder в Angular применяет оптимизации:
Пример production build:
ng build --configuration productionРанее Angular CLI генерировал два набора бандлов:
Webpack использовался для сборки обоих вариантов. В современных версиях этот механизм удалён, но архитектурно он был тесно связан с Webpack pipeline.
Основная особенность Angular Webpack builder заключается в отсутствии прямого доступа к конфигурации.
Это приводит к:
Современные версии Angular постепенно снижают зависимость от Webpack:
Несмотря на это, Webpack builder сохраняется как совместимый и расширяемый слой.
Builder API представляет собой контракт:
Пример builder definition:
{
"builders": {
"browser": {
"implementation": "./index.js",
"schema": "./schema.json"
}
}
}Webpack вызывается внутри implementation слоя.
Angular добавляет дополнительный уровень анализа перед Webpack:
Webpack получает уже подготовленную структуру модулей, что снижает нагрузку на его dependency graph algorithm.
Webpack builder поддерживает development server:
Angular Dev Server интегрируется через:
@angular-devkit/build-angular:dev-serverОн запускает Webpack dev middleware и проксирует изменения в браузер.
Angular libraries могут собираться без Webpack (ng-packagr), но при интеграции в приложения Webpack используется для:
Webpack builder в Angular представляет собой промежуточный слой между высокоуровневой архитектурой фреймворка и низкоуровневым процессом бандлинга. Его основная особенность заключается в инкапсуляции конфигурации, расширяемости через builder API и тесной интеграции с Angular Compiler.