#1 — Введение в Webpack 2

Доказывать человеку необходимость знания — это все равно, что убеждать его в полезности зрения. Горький М.

Всем привет! Меня зовут Ковальчук Дмитрий. Вы смотрите Лофтскул. И прямо сейчас я познакомлю вас с Webpack. Webpack — это инструмент, предназначенный для сборки JavaScript-модулей в вашем приложении. Его ещё называют “Сборщик модулей” (“Module bundler” или просто “Бандлер”).

1 слайд. Webpack, gulp, grunt — в чем разница?

Webpack часто сравнивают с такими инструментами, как Gulp и Grunt, т.е. с менеджерами задач, или, как их ещё называют, “task runners”. Они предназначены для совершенно других целей. Давайте разберемся, чем менеджеры задач отличаются от бандлеров.

2 слайд. Менеджеры задач

Наиболее популярный пример — Gulp. Он предназначен для широкого спектра задач: “linting” (“линтинг”, т.е. проверка кода по заданным критериям), “building” (так называемая “сборка” проекта для продакшена, когда исходные файлы, например, SASS превращаются в CSS, минифицируются, соединяются в один или несколько и пр.), “developing” (под этим термином понимают инструменты, предназначенные исключительно для разработчика, например, локальный сервер с живой перезагрузкой “livereload” и пр.). С помощью Gulp (и огромного числа плагинов) можно сделать практически всё, что может прийти в голову разработчику! В том числе упаковать ваш проект и отправить его по FTP на хостинг.

3 слайд. Бандлеры

К наиболее популярным бандлерам относятся Browserify, Brunch, Rollup и, конечно же, Webpack. Предназначены они для гораздо более специфических целей, таких как сборка и оптимизация JavaScript-модулей. Зачем это нужно? Когда в вашем проекте появится 3, 5, а может и 15 javascript-файлов, вы, наверняка, столкнетесь с самыми разными проблемами, начиная с “управления версиями” (например, один плагин требует jQuery-версии 1.6, а другой jQuery-версии 2.1) и заканчивая “управлением зависимостями” (есть модули самостоятельные, а есть зависящие от пары-тройки других).

В конечном счете на каждой странице вашего приложения должен загружаться только тот код, который действительно нужен для этой страницы. Скрипты должны загружаться быстро и не конфликтовать друг с другом. Общий javascript-код для разных страниц должен грузиться один раз и кэшироваться. Всё это и многое другое для вас сделает Webpack.

4 слайд. Для Webpack — всё что угодно может быть модулем

Модулями могут быть не только JS-файлы, но также и CSS-, HTML-файлы. Более того, отдельно взятая картинка тоже становится модулем!

5 слайд. О Webpack «на пальцах»

Webpack — это бандлер. “Bundle” переводится как “пачка”. Если постараться максимально упростить, то можно сказать, что webpack собирает большое количество ваших разрозненных javascript- (и других) файлов и аккуратно склеивает их в один или несколько файлов.

6 слайд. Webpack может заменить Gulp?

Благодаря энтузиазму сообщества разработчиков появилось огромное количество самых разных плагинов, которые позволяют Webpack работать с препроцессорами (такими, как SASS), шаблонизаторами (такими, как PUG), а также картинками, шрифтами и так далее. На сегодняшний день можно смело заявить, что Webpack может заменить Gulp, по крайней мере, для самых распространенных повседневных задач веб-разработчика.

7 слайд. Чем Webpack лучше, чем Gulp?

Gulp не предназначен для сборки javascript модулей, он этого не умеет. Webpack умеет и справляется с этим отлично.

Четыре базовые концепции Webpack

Рассмотрим базовые концепции Webpack. Их всего четыре.

Entry

Webpack создает граф зависимостей вашего приложения. Стартовая точка в этом графе называется — “точкой входа” (“entry point”). Точка входа указывает вебпаку, где ваше приложение берет начало и далее следует по графу зависимостей, чтобы понять, что включить в бандл. Проще говоря, точка входа — это первый файл, с которого начинается ваше приложение.

Output

После того как вебпак собрал все исходники (“assets”) вашего приложения вместе, ему нужно знать, куда их положить и как назвать.

Loaders

Webpack может работать с любыми файлами, как с модулями. Однако сам он “из коробки” понимает только javascript-файлы. Чтобы вебпак мог работать с CSS, html, jpg и пр. ему понадобится помощь. “Лоадеры” трансформируют все эти файлы ( .css, .html, .scss, .jpg, и пр.) в модули, совершают над ними определённые действия (например компилируют SCSS в CSS) и добавляют их в граф зависимостей.

Рассмотрим пример. Обратите внимание на то, что лоадеры выполняются снизу вверх.

В этом примере мы говорим: “Эй, вебпак, если ты встретишь .scss-файлы в нашем приложении, объявленные как модули, то, сначала, скомпилируй SCSS в CSS (sass-loader), затем помоги вебпаку их загрузить и добавить в граф (css-loader), после чего научи вебпак добавлять стили в DOM-дерево при помощи тега ˂style˃ (style-loader).”

Plugins

Плагины могут влиять непосредственно на процесс сборки (компиляции) бандлов.

Они могут минифицировать javascript или, например, генерировать html-файлы (в том числе работать с шаблонами).

Webpack 2.2.1

Мы будем рассматривать Webpack версии 2.2.1. В новой версии появился ряд важных нововведений, связанных не только с новым функционалом, но и с некоторыми изменениями в синтаксисе.

Будьте осторожны при просмотре видеоуроков и прочтении статей, посвященных первой версии Webpack. Техники, описанные в них, могут быть не только устаревшими, но и ошибочными (применительно ко второй версии Webpack).

Несовместимость

Некоторые плагины Webpack могут быть полностью или частично несовместимы с Webpack 2. Некоторые — с node.js_7. Внимательно читайте документацию!

ES6-модули в Webpack 2

В Webpack 2 встроена поддержка ES6-модулей. Поэтому если мы используем babel, нужно его предупредить, что ES6-модули Webpack не нужно переделывать в CommonJS.

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

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

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