Настройка среды разработки Webpack 3 + Angular 4: от сложного к простому

Современное front-end-приложение на Angular должно включать в себя следующие характеристики:

• Возможность использования типизированного JS — Typescript
• Обеспечение удобства и производительности разработки с помощью HMR (hot module replacement);
• Модульность приложений и возможность отложенной загрузки модулей (Lazy Loading); — режим (ahead-of-time), повышающий производительность приложения.

В статье я расскажу, как совместить Angular 2+ с webpack и разобраться со всеми этапами сборки/разработки.

Постараюсь по максимуму осветить тонкие моменты. Итак, поехали.

Создаем папку с проектом, чтобы никто не догадался, назовем ее angular-project. (Использую Webstorm, однако можете проделывать то же самое в вашем редакторе)

Устанавливаем node.js (npm в комплекте по умолчанию).

Создаем package.json, разумеется, количество подключаемых на проект модулей потенциально стремится к бесконечности, однако я оставлю только необходимые, на мой взгляд, для полноценной разработки. Модулей много, постараюсь обосновать, зачем они нужны.

Через терминал заходим в папку, где лежит package.json, и вводим команду npm i.

Так как мы используем команды rimraf, webpack и webpack-dev-server в терминале, то придется объяснить их вашему ПК с помощью команды npm i rimraf webpack webpack-dev-server -g

После этих манипуляций наш проект пополнился папкой node_modules.

Создаем README.md, куда кроме ссылки на эту статью можно добавить особенности разработки вашего проекта.

Создаем tslint.json, тут не буду останавливаться, так как нет серебряной пули.

Создадим postcss.config.js, чтобы не писать префиксы к стилям

Дальше пойдут немного более сложные манипуляции, пожалуйста, сфокусируйтесь.

Так как разработка A2+, на мой взгляд, невозможна без typescript, его надо настроить. Настройки обычные, однако если будут вопросы, спрашивайте в комментариях.

Самое сложное – дать понять webpack, что мы от него хотим. Для этого создаем webpack.conf.js, без паники, постараюсь все объяснить

Сейчас наш проект выглядит так, кроме папки src

Создаем структуру в папке src:

Пара комментариев: в папке app будет лежать наше angular приложение, в папке assets вспомогательные файлы, index.html просто кладем в src. В assets поддержим темизацию и разобьем папки для удобной работы со шрифтами, картинками, стилями.

В нашей компании мы используем БЭМ методологию, немного переработанную и более оптимальную, на наш взгляд. base.less – агрегирующий .less файл для base темы:

Заметим, что, на наш взгляд, следует разносить функциональную и стилевую части приложения: это решает ряд проблем как сборки, так и поддержки проекта. Если использовать БЭМ и парадигму один блок – один less файл, то проблем у подхода не обнаруживается. Однако есть куча альтернатив. Более подробно покопаться в assets можно в приложении, к этому посту. Вопросы задавайте в комментариях к статье.

index.html – стал безумно прост в A2+ приложениях

Вздохнем поглубже, все сложное мы уже сделали, теперь остался сам фреймворк)

Создадим структуру в папке app:

На первый взгляд – ребус.

Однако если вы прошли хотя бы Angular 2+ Tutorial, то все это вам уже знакомо. Для остальных же краткие комментарии: все приложение разбито на модули, фреймворк даже предоставляет такую сущность – module. Есть главный модуль – app.module.ts, есть дополнительные модули, расширяющие функционал приложения. Большая часть приложений будет иметь home, lazy и shared модули. Названия модулей, разумеется, опциональны, однако при соблюдении правил наименования у вас не возникнет проблем с расширяемостью приложения.

Про сам фреймворк говорить много не будем, есть отличная документация. Лучше сосредоточимся на тонких моментах:

С него все начинается

Для AoT (Ahead-of-Time Compilation) режима создаем другой главный файл ng-main-aot.ts, так нужно…

HMR, стили нашего приложения (на всякий случай оставил пример подключения картинок) и настройки hammerjs для мобильной разработки подключаем в app.module.ts таким образом:

Lazy loading модулей подключаем в ng-routing.module.ts

После подключения lazy модуля в роутере необходимо в модуле, который мы хотим загружать отложено, сделать (на примере lazy.module.ts) следующее:

Хм… ну вот в принципе и все. Покопаться в app папке можно в приложении к данному посту.

Для разработки с перезагрузкой странички на каждое изменение кода в редакторе, пишем в терминале, находясь папке с package.json: npm run serve То же, но без перезагрузки странички: npm run hmr Делаем prod сборку с AoT: npm run prod Запускаем статический сервер, чтобы посмотреть prod: npm run prodServer Почистить ./dist папку: npm run clean

Всего несколько шагов и у нас работают: webpack сборка с Angular 4, AoT, HMR, Lazy loading. Все, включая шаблоны и стили, аккуратно кладется в бандл и оптимизируется. Разумеется, эту конфигурацию можно расширять, улучшать, менять, однако на мой взгляд, ее вполне достаточно, чтобы смело начать разрабатывать с Angular 2+.

Небольшая реклама АoT: отличный boost к производительности вашего SPA приложения на Angular.