


#3 — Локальный сервер, watch
Всем привет! Меня зовут Ковальчук Дмитрий. Вы смотрите Лофтскул. Мы продолжаем изучать Webpack.
Прежде чем мы перейдем к изучению нового раздела, давайте сделаем коммит, чтобы сохранить полученный на предыдущем шаге результат. Вдруг что-то пойдет не так и нам захочется вернуться в исходное состояние. Гит в этом плане остаётся нашим лучшим другом.
1. Локальный сервер для проверки работы Webpack
Установим простой локальный сервер для того, чтобы посмотреть результат работы Webpack в браузере. Называется этот плагин «node-static», и он не имеет никакого отношения непосредственно к Webpack. Это просто удобный инструмент для определённых случаев.
1 |
yarn add node-static -D |
Заглянем в файл package.json, чтобы убедиться, что новая зависимость проекта попала в devDependencies. Мы также добавим новый npm-скрипт, который назовём serv. Он будет запускать локальный сервер в папке build. Именно в этой папке лежит сгенерированный вебпаком html и javascript.
1 2 3 4 5 6 7 8 9 10 11 |
{ "scripts": { "start": "webpack", "serv": "static build" }, "devDependencies": { "html-webpack-plugin": "^2.28.0", "node-static": "^0.7.9", "webpack": "^2.2.1" } } |
Запустим локальный сервер, набрав команду
1 |
yarn run serv |
В консоли видим сообщение, что сервер запущен по адресу
1 |
serving "prod" at http://127.0.0.1:8080 |
Теперь, открыв браузер по указанному адресу, мы можем посмотреть на результаты работы Webpack.
2. Webpack —watch
Webpack может следить за изменениями файлов и автоматически пересобрать бандл (javascript-файл, подключаемый в качестве точки входа). Для этого добавим в npm-script ключевое слово “—watch”.
1 2 3 4 5 |
package.json "scripts": { "start": "webpack --watch", "serv": "static build" }, |
Теперь если мы запустим
1 |
yarn run start |
то увидим, что терминал будто бы “завис”. На самом деле он перешел в режим отслеживания изменений и вывода результатов. Попробуйте внести какие-либо изменения в ваши javascript-файлы — вы тут же увидите обратную связь в терминале: webpack пересобирает бандл и справляется с этим молниеносно!
В соседней вкладке терминала мы можем запустить сервер
1 |
yarn run serv |
Терминал также “завис” для того, чтобы выдавать нам информацию от локального сервера. К сожалению, у нас пока нет инструмента, позволяющего осуществить живую перезагрузку “livereload” браузера. И перезагружать его нам придется вручную. Кстати, не забудьте выключить кэш браузера в инструментах разработчика (это можно сделать также и в настройка node-static, см. документацию).
В арсенале Webpack есть очень мощное средство для разработчиков, а именно — webpack-dev-server. В нём “из коробки” встроен livereload и много других классных вещей. Но, чтобы ощутить всю прелесть работы с ним, давайте разберёмся сначала с шаблонами pug.
Перед тем, как перейти к следующему шагу, самое время сделать очередной коммит:
1 2 |
git add . git commit -m "наш коммит" |
На этом подойдет к концу третий видеоурок курса по изучению Webpack.
Приятного всем просмотра! Учитесь с удовольствием!
ツПолезные ссылки к видеоуроку:
✔ Исходники на GitHub
✔ Видеоурок по Yarn
✔ Получить профессию «Веб-разработчик»
✔ Прокачаться на «Продвинутом курсе по веб-разработке»
✔ Подписывайтесь на канал, новые видео выходят каждую неделю.
Оставь комментарий!
One thought on “#3 — Локальный сервер, watch”
Добавить комментарий
Для отправки комментария вам необходимо авторизоваться.
В браузере вместо Главная, Обо мне, Портфолио отображаются квадраты.