Персонализируйте свою Angular сборку с помощью Webpack
Если вы являетесь frontend разработчиком, то есть хорошие шансы, что вы слышали или даже использовали Webpack. Процесс сборки Angular использует Webpack для решения многих задач, таких как преобразование файлов Sass в CSS и перенос TypeScript в JavaScript.
Модули JavaScript имеют очень ограниченную поддержку в веб-браузерах. Теоретически, любое JavaScript приложение должно быть ограничено одним исходным файлом перед загрузкой в браузер. Также рекомендуется разделять код на модули, содержащиеся в отдельных файлах, поэтому при развертывании JavaScript приложения, модули объединяются в один исходный файл. Webpack объединяет несколько модулей в один файл, что делает его очень важным инструментом сборки.
Webpack не ограничивается простым объединением исходных файлов. Поскольку он может поддерживать множество плагинов, он может выполнять множество дополнительных задач. Загрузчики модулей Webpack могут анализировать файлы разных типов. Это позволяет, например, использовать оператор import для импорта файлов таблиц стилей. Обычно Webpack скрывается за инструментом командной строки Angular. Но в некоторых случаях может потребоваться настроить конфигурацию Webpack при создании приложения Angular.
В более ранних версиях Angular можно было извлечь конфигурацию Webpack и изменить ее напрямую. В Angular 8 доступ к базовой конфигурации отключен. Но все еще возможно расширить конфигурацию Webpack и добавить дополнительные загрузчики или параметры конфигурации. В этой статье я покажу вам, как создать приложение Angular 8+ и настроить конфигурацию Webpack.
Настройка Angular с Webpack
Я предполагаю, что у вас есть общие знания JavaScript и Angular, у вас установлены npm и node. Для начала вам потребуется глобально установить инструмент командной строки Angular. Откройте терминал и установите Angular с помощью следующей команды.
npm install -g @angular/cli@8.3.20
В зависимости от вашей системы вам может потребоваться выполнить эту команду с правами администратора, используя sudo. Теперь перейдите в каталог по вашему выбору и создайте новое Angular приложение, выполнив команду ниже.
ng new angular-webpack-demo --routing --style cssЧтобы разрешить настройку конфигурации Webpack, вам необходимо установить пользовательский компоновщик Angular Webpack. Перейдите во вновь созданный каталог angular-webpack-demo и выполните следующую команду.
npm install -D -E @angular-builders/custom-webpack@8.4.1
Вы будете использовать плагин webpack-define для добавления глобальных определений значений в ваш код. В качестве примера, это может быть использовано для отображения частей вашего приложения.
Чтобы включить пользовательские конфигурации Webpack, откройте файл конфигурации angular.json. Найдите строку "builder": "@angular-devkit/build-angular:browser" внутри раздела architect.build. Замените его следующими строками:
"builder": "@angular-builders/custom-webpack:browser",
Теперь внутри architect.build.options добавьте следующее свойство.
"customWebpackConfig": {
"path": "./custom-webpack.config.js"
},
Это добавляет custom-webpack.config.js к конфигурации Webpack по умолчанию для команды ng build. Чтобы также включить конфигурацию для команды ng serve, найдите строку "builder": "@angular-devkit/build-angular:dev-server", и замените ее приведенным ниже кодом.
"builder": "@angular-builders/custom-webpack:dev-server",
Теперь создайте файл custom-webpack.config.js и вставьте в него следующее содержимое.
const webpack = require('webpack');
module.exports = {
plugins: [
new webpack.DefinePlugin({
'STABLE_FEATURE': JSON.stringify(true),
'EXPERIMENTAL_FEATURE': JSON.stringify(false)
})
]
};
Это создает две глобальные константы STABLE_FEATURE и EXPERIMENTAL_FEATURE и делает их доступными в вашем приложении. Чтобы узнать больше об использовании DefinePlugin, пожалуйста, обратитесь к документации DefinePlugin .
Реализовать Angular приложение
Чтобы упростить создание чистого адаптивного макета, установите Bootstrap и его компоненты Angular. В вашем терминале выполните команду ниже.
ng add ngx-bootstrap@5.2.0
Теперь запустите ваш любимый IDE и откройте файл src/styles.css. Добавьте следующую строку, чтобы включить таблицу стилей для библиотеки начальной загрузки.
@import "~bootstrap/dist/css/bootstrap.css";
Откройте src/app/app.component.html и замените содержимое по умолчанию следующим.
Элемент router-outlet служит в качестве контейнера для маршрутизатора. Это означает, что различные компоненты могут быть загружены в этот заполнитель путем изменения URL-адреса в панели навигации браузера. Создайте два компонента, которые будут отображаться в router-outlet, и назовите их Home и Demo. Снова откройте терминал и выполните следующие команды.
ng generate component home
ng generate component demoТеперь откройте src/app/app-routing.module.ts и добавьте маршруты для этих компонентов.
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { DemoComponent } from './demo/demo.component';
const routes: Routes = [
{
path: '',
component: HomeComponent
},
{
path: 'demo',
component: DemoComponent,
},
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
Затем поместите некоторый контент на домашнюю страницу. Откройте src/app/home/home.component.html и замените содержимое по умолчанию следующим кодом.
Angular Webpack Demo
DemoComponent будет отображать содержимое в зависимости от функции флагов, которые вы определили в конфигурации WebPack. Откройте src/app/demo/demo.component.ts и вставьте в него следующий код.
import { Component, OnInit } from '@angular/core';
declare const STABLE_FEATURE: boolean;
declare const EXPERIMENTAL_FEATURE: boolean;
@Component({
selector: 'app-demo',
templateUrl: './demo.component.html',
styleUrls: ['./demo.component.css']
})
export class DemoComponent implements OnInit {
stableFeature: string;
experimentalFeature: string;
constructor() { }
ngOnInit() {
this.stableFeature = STABLE_FEATURE ? 'Stable feature enabled' : 'Stable feature disabled';
this.experimentalFeature = EXPERIMENTAL_FEATURE ? 'Experimental feature enabled' : 'Experimental feature disabled';
}
}
Обратите внимание на объявления STABLE_FEATURE и EXPERIMENTAL_FEATURE в верхней части файла. Они необходимы для того, чтобы TypeScript знал, что две константы существуют. Но также обратите внимание, что здесь не назначено никаких значений.
Затем откройте src/app/demo/demo.component.html и замените содержимое следующими строками.
Demo Features
{{stableFeature}}
{{experimentalFeature}}
В заключение
В этой статье мы создали простое веб-приложение с Angular и настраиваемой конфигурацией Webpack. Начиная с Angular 8, доступ к внутренней конфигурации Webpack был ограничен. Однако все еще возможно расширить объект конфигурации с помощью пользовательской конфигурации. Это позволяет регистрировать пользовательские загрузчики или дополнительные плагины Webpack. В представленном здесь примере мы рассмотрели, как использовать DefinePlugin для определения глобальных констант через конфигурацию. Это может быть полезно для пометки компонентов вашего приложения.
