Получить бесплатную консультацию
Оставьте свои контакты, и с Вами
свяжутся наши специалисты
Заявка успешно отправлена!
С вами свяжется наш консультант :)
Произошла какая-то ошибка, пожалуйста, обновите страницу и попробуйте снова.
Средний
14 уроков
Курс
Webpack 2
Webpack 2 — один из самых мощных и гибких инструментов для frontend-сборки. В чем его преимущества, какие проблемы он решает и как с ним работать — в практическом видеокурсе от основателя LoftSchool&LoftBlog Дмитрия Ковальчука.

#5 — Webpack-dev-server

Всем привет! Меня зовут Ковальчук Дмитрий. Вы смотрите Лофтскул. Мы продолжаем изучать Webpack.

Для ещё большего удобства разработчиков, в официальной документации Webpack нам предлагается использовать “webpack-dev-server”. В нём встроен локальный сервер и livereload (“живая перезагрузка браузера”). WDS также порадует вас возможностью гибкой настройки. Отдельно хочется выделить 2 момента:

1. Webpack-dev-server работает “в памяти” (“server running in-memory”) — он не создает в каталоге проекта скомпилированных файлов.

2. “Hot Module Replacement (HMR)” — позволяет обновлять отдельные модули страницы, без её полной перезагрузки. Полную мощь можно ощутить при использовании с React.

1. Установка и запуск webpack-dev-server

Установим webpack-dev-server и сохраним его в package.json.

Чтобы интегрировать webpack-dev-server в наш проект, мы должны определить новый npm-скрипт (в package.json файле).
Мы назовём его «start». А скрипт, который запускает Webpack со слежкой заменим на простой запуск Webpack без слежки. Его задача — просто собирать проект, и название ему дадим соответствующее — «build».

Теперь, когда мы будем запускать WDS

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

Так и поступим. В браузере мы увидим наш сайт, подобно тому, как это было со статическим сервером.
Однако теперь в нашем арсенале появился livereload. Попробуем внести изменения в шаблоны или в js-файлы.

Удалите папку build и ещё раз убедитесь — в каталоге вашего проекта нет скомпилированных файлов, т.е. WDS “собирает” проект прямо в память.

WDS не рекомендуется использовать для продакшена, поэтому проверять собранную при помощи Webpack сборку мы можем, как и раньше, при помощи «node-static».

2. Базовая настройка webpack-dev-server

У WDS, как было сказано ранее, есть огромное количество настроек. Все эти настройки необходимо помещать в объект “devServer”, который является свойством модуля, экспортируемого конфигом Webpack. Для нашего примера достаточно будет рассмотреть одно свойство “stats”. Присвоим ему значение ‘errors-only’. Теперь, при запуске webpack-dev-server, в консоли мы увидим гораздо меньше информации (а именно “только ошибки”).

Запустим WDS

и проверим терминал — сообщений стало ощутимо меньше.

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

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

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

Материалы к уроку:
Делись:

Оставь комментарий!

Добавить комментарий

Рекомендуемые курсы