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

#6 — Production & Development

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

У нас уже 6-ой по счету видеоурок по Webpack. Хочется сказать, что данный видеокурс является дополнением к методическим указаниям курса по продвинутой веб-разработке от школы Лофтскул.

Я хотел бы вас предостеречь. Дальше пойдет информация, предназначенная для опытных разработчиков, достаточно хорошо разбирающихся в javascript. Новичкам наверняка будет не просто всё это прямо сразу понять и переварить. Уже на данном шаге было бы хорошо, чтобы вы решили, хотите ли погружаться в вебпак, или для вас ещё не настало время. Если вы готовы — то пойдём дальше.

Кроме того, хочется сказать, что то, что я буду показывать дальше, основано на официальной документации и на инструкциях, описанных на сайте survivejs.com, на который нас также отсылает официальная документация Webpack.

Разумеется, многое я преломил через своё видение и привёл, местами, к более простому виду, чтобы вы смогли как можно быстрее начать самостоятельно использовать Webpack. Многие моменты я постарался объяснить максимально простым языком, что, возможно, встретит критику со стороны опытных разработчиков. Но я обещаю, что перенесу эту критику. Напомню также, что данный курс не может заменить официальную документацию. Если и с этим проблем нет — тогда вперёд!

По традиции, начнем с коммита, чтобы зафиксировать изменения, сделанные на предыдущем занятии.

Разделение конфига на development и production

На данном шаге нам следует понять, что кроме Webpack Dev Server, для Webpack существует масса модулей и плагинов, ориентированных либо на development (например, WDS), либо на production (например, генератор favicon), либо на development и production одновременно.Таким образом, возникает задача корректного разделения кода внутри конфигурационного файла, либо создания отдельных конфигов. Есть несколько распространённых вариантов решения этой задачи.

Рассмотрим 2 из них:

1) Создать два или более отдельных конфига. Выбор нужного конфига при помощи параметра —config

2) Использовать 1 главный конфигурационный файл webpack.config.js и уже внутри него определять, какие задачи к какому окружению будут относиться, используя параметр —env.

Запуская start, мы будем говорить node.js, что данный скрипт относится к разработке.
Запуская build, мы будем говорить node.js, что этот скрипт относится к продакшену.
Скрипт серв остаётся в прежнем виде.

Внесем изменения в config.

Вынесем общий для продакшена и для разработки код в отдельный объект “common”.

Вынесем код, описывающий работу WDS, в объект «developmentConfig».

Как мы уже знаем, в module.exports должен быть помещен объект, который будет содержать настройки Webpack.

Для продакшена мы будем возвращать один объект, а для разработки — другой.

Каждый такой объект будет состоять из нескольких объектов. Для продакшена это пока будет только common, а для разработки это будет common и developmentConfig. Таким образом, перед нами встаёт задача склейки объектов. В JavaScript это делается при помощи метода Object.assign.

Чтобы всё получилось, в качестве первого параметра мы должны указать пустой объект, а затем объекты, которые должны быть «склеены». Если быть более точным, Object.assign копирует свойства объекта, грубо говоря, клонирует объект. Первым аргументом передается объект, в который будут скопированы свойства. Этот же объект и будет возвращен.

Давайте изменим порт, на котором будет запущен вебпак дев сервер, чтобы избежать возможных конфликтов при одновременном запуске с node static.

Проверим, корректно ли работает wds.

В браузере откроем отслеживаемый localhost и поменяем заголовок у pug-файла. Отлично, livereload срабатывает.

Сейчас папка build у нас удалена. Давайте вновь соберем проект и запустим ноде статик.

В отдельной вкладке браузера откроем локальный сервер node static, чтобы проверить сборку.

Отлично, всё работает, как и раньше.

Сделаем коммит. Кстати, не удивляйтесь, что мы коммитим папку build. На данном этапе это совершенно нормально. Когда доведем нашу сборку до ума окончательно, можно будет исключить папку build и написать хороший readme.md-файл с пояснениями по установке и работе приложения.

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

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

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

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

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

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

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