


#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”). Точка входа указывает вебпаку, где ваше приложение берет начало и далее следует по графу зависимостей, чтобы понять, что включить в бандл. Проще говоря, точка входа — это первый файл, с которого начинается ваше приложение.
1 2 3 |
module.exports = { entry: './path/to/my/entry/file.js' }; |
Output
После того как вебпак собрал все исходники (“assets”) вашего приложения вместе, ему нужно знать, куда их положить и как назвать.
1 2 3 4 |
output: { path: path.resolve(__dirname, 'dist'), filename: 'my-first-webpack.bundle.js' } |
Loaders
Webpack может работать с любыми файлами, как с модулями. Однако сам он “из коробки” понимает только javascript-файлы. Чтобы вебпак мог работать с CSS, html, jpg и пр. ему понадобится помощь. “Лоадеры” трансформируют все эти файлы ( .css, .html, .scss, .jpg, и пр.) в модули, совершают над ними определённые действия (например компилируют SCSS в CSS) и добавляют их в граф зависимостей.
Рассмотрим пример. Обратите внимание на то, что лоадеры выполняются снизу вверх.
1 2 3 4 5 6 7 8 9 10 11 |
module: { rules: [{ test: /\.scss$/, include: paths, use: [ 'style-loader', 'css-loader', 'sass-loader' ] }] } |
В этом примере мы говорим: “Эй, вебпак, если ты встретишь .scss-файлы в нашем приложении, объявленные как модули, то, сначала, скомпилируй SCSS в CSS (sass-loader), затем помоги вебпаку их загрузить и добавить в граф (css-loader), после чего научи вебпак добавлять стили в DOM-дерево при помощи тега ˂style˃ (style-loader).”
Plugins
Плагины могут влиять непосредственно на процесс сборки (компиляции) бандлов.
1 2 3 4 |
plugins: [ new webpack.optimize.UglifyJsPlugin(), new HtmlWebpackPlugin({template: './src/index.html'}) ] |
Они могут минифицировать 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.
1 2 3 4 5 |
{ presets: [ ["es2015", { "modules": false }] ] } |
На этом первый видеоурок курса по изучению Webpack 2 завершится.
Приятного всем просмотра! Учитесь с удовольствием!
ツПолезные ссылки к видеоуроку:
✔ Исходники на GitHub
✔ Видеоурок по Yarn
✔ Получить профессию «Веб-разработчик»
✔ Прокачаться на «Продвинутом курсе по веб-разработке»
✔ Подписывайтесь на канал, новые видео выходят каждую неделю.
Оставь комментарий!