#3 — Локальный сервер, watch

Всем привет! Меня зовут Ковальчук Дмитрий. Вы смотрите Лофтскул. Мы продолжаем изучать Webpack.
Прежде чем мы перейдем к изучению нового раздела, давайте сделаем коммит, чтобы сохранить полученный на предыдущем шаге результат. Вдруг что-то пойдет не так и нам захочется вернуться в исходное состояние. Гит в этом плане остаётся нашим лучшим другом.

1. Локальный сервер для проверки работы Webpack

Установим простой локальный сервер для того, чтобы посмотреть результат работы Webpack в браузере. Называется этот плагин «node-static», и он не имеет никакого отношения непосредственно к Webpack. Это просто удобный инструмент для определённых случаев.

Заглянем в файл package.json, чтобы убедиться, что новая зависимость проекта попала в devDependencies. Мы также добавим новый npm-скрипт, который назовём serv. Он будет запускать локальный сервер в папке build. Именно в этой папке лежит сгенерированный вебпаком html и javascript.

Запустим локальный сервер, набрав команду

В консоли видим сообщение, что сервер запущен по адресу

Теперь, открыв браузер по указанному адресу, мы можем посмотреть на результаты работы Webpack.

2. Webpack —watch

Webpack может следить за изменениями файлов и автоматически пересобрать бандл (javascript-файл, подключаемый в качестве точки входа). Для этого добавим в npm-script ключевое слово “—watch”.

Теперь если мы запустим

то увидим, что терминал будто бы “завис”. На самом деле он перешел в режим отслеживания изменений и вывода результатов. Попробуйте внести какие-либо изменения в ваши javascript-файлы — вы тут же увидите обратную связь в терминале: webpack пересобирает бандл и справляется с этим молниеносно!

В соседней вкладке терминала мы можем запустить сервер

Терминал также “завис” для того, чтобы выдавать нам информацию от локального сервера. К сожалению, у нас пока нет инструмента, позволяющего осуществить живую перезагрузку “livereload” браузера. И перезагружать его нам придется вручную. Кстати, не забудьте выключить кэш браузера в инструментах разработчика (это можно сделать также и в настройка node-static, см. документацию).

В арсенале Webpack есть очень мощное средство для разработчиков, а именно — webpack-dev-server. В нём “из коробки” встроен livereload и много других классных вещей. Но, чтобы ощутить всю прелесть работы с ним, давайте разберёмся сначала с шаблонами pug.

Перед тем, как перейти к следующему шагу, самое время сделать очередной коммит:

На этом подойдет к концу третий видеоурок курса по изучению Webpack.

Приятного всем просмотра! Учитесь с удовольствием!

ツПолезные ссылки к видеоуроку:
✔ Исходники на GitHub
✔ Видеоурок по Yarn
✔ Получить профессию «Веб-разработчик»
✔ Прокачаться на «Продвинутом курсе по веб-разработке»
✔ Подписывайтесь на канал, новые видео выходят каждую неделю.