Angular создание приложения с Webpack

Автор: | 23.07.2019

Рассмотрим создание простого Angular приложения с использованием инструмента для сборки модулей Webpack

В корне приложения создадим файл package.json:

  • npm init -y

Если вы используете виртуальную машину, то для скрипта "dev" нужно указать еще и ip-адрес виртуальной машины:

, ip-адрес замените на свой. Это нужно потому, что для запуска приложения мы будем использовать webpack-dev-server. Но можно использовать и любой другой веб-сервер.

Далее мы можем произвести установку наших модулей:

  • npm install

, или если запускаете на виртуальной машине (напр. VirtualBox):

  • npm install --no-bin-links

В корне вашего проекта появится папка node_modules, содержащая все необходимые модули.

Создадим файл конфигурации для сборщика модулей webpack.config.js:

Поскольку мы используем TypeScript создадим конфиг и для него tsconfig.json:

Создадим в папке приложения рядом с файлами, которые мы создали выше файл index.html:

В корне проекта создадим папку src в ней будут лежать наши ts-файлы. Поскольку Angular компонентный фреймворк, то начнем с создания компонента src/app/app.component.ts:

Используемые компоненты объявляются в модуле. Создадим его src/app/module.ts:

Для кросс-браузерности используем полифиллы src/polyfills.ts:

И создадим еще один файл, который подгрузит наш модуль src/main.ts:

Все проект готов и теперь запустим сборщик Webpack. Это можно сделать двумя способами. Если вы хотите использовать webpack-dev-server.js, чтобы собрать и запустить свое приложение, то используйте команду:

  • npm run dev

В результате в консоли вы увидите как собирается ваше приложение и запускается веб-сервер. В корне вашего приложения появится папка public, а в ней два файла app.js и polyfills.js

После этого ваше приложение будет доступно по http://localhost:3000. Или если вы используете виртуальную машину, то http://ip-address — подставьте ip-адрес виртуальной машины.

Если же вы хотите использовать любой другой веб-сервер, например Apache или Nginx, то для сборки проекта используйте команду:

  • npm run build

В результате у вас также появится каталог public с двумя js-файлами в нем.

Если все сделано правильно, то на странице своего приложения вы увидите поле ввода и надпись "Добро пожаловать!". И после заполнения поля к надписи будут добавляться введенные вами символы.