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

#2 — Установка Webpack, начало работы

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

1. Подготовка проекта

Создадим новую директорию для нашего приложения.

При помощи пакетного менеджера Yarn создадим package.json файл для управления зависимостями проекта.

Инициализируем git-репозиторий и настроим файл .gitignore

В список исключений мы добавим две директории: папку с зависимостями проекта и скрытую папку с рабочими файлами phpstorm.

Перед тем, как начать работать с Webpack, давайте сделаем наш первый коммит. Это отличная практика, которая приучит нас писать код последовательно и аккуратно.

2. Установка Webpack

Согласно документации, Webpack не рекомендуется ставить глобально (чтобы избежать возможной несовместимости версий Webpack для разных приложений на вашем компьютере). Достаточно установить его локально.

Проверим, добавился ли вебпак в «devDependencies»

Отлично. Давайте теперь создадим файл конфигурации для Webpack. Все необходимые инструкции мы будем писать именно в нём.

3. Запуск Webpack при помощи npm-скриптов

Запускать Webpack мы будем при помощи так называемых npm-скриптов — это стандартная рекомендованная практика. При чём в нашем случае мы вместо npm будет пользоваться Yarn. Надеюсь, вы уже освоили этот пакетный менеджер. Если нет — посмотрите соответствующее видео на лофтскул.

Npm-скрипты работают очень просто. В блоке scripts файла package.json мы пишем в формате «ключ» — «значение» слева — название скрипта (оно может быть любое, на наш вкус), а справа то, что должно быть запущено.

Для запуска скрипта используется команда «run»

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

4. Создание первых javascript-модулей

Создадим папку «source» и в ней 2 javascript-файла «index.js» и «menu.js».

В файл menu.js мы поместим функцию, которая будет создавать список пунктов меню. Эта функция принимает 2 параметра: первый — массив пунктов меню, второй — класс, который нужно присвоить тегу ˂ul˃. После вызова данная функция будет возвращать html-элемент, а именно ненумерованный список, правда, без ссылок. Вы можете усовершенствовать эту функцию самостоятельно, однако в наших целях простого списка будет вполне достаточно.

Кстати, перед нами самый настоящий ES6-модуль — изолированный и аккуратный код, который можно использовать из проекта в проект, если будет необходимо. Необходимо отметить, что поддержка ES6-модулей появилась в Webpack начиная со второй версии, т.е. нам нет необходимости подключать babel в данном случае. Всё и так будет работать.

Ключевое слово export, стоящее перед объявлением функции, экспортирует данную функцию в остальную часть приложения. Ключевое слово default говорит о том, что мы экспортируем только одно значение, по умолчанию.
Если это пока для вас сложно, не волнуйтесь. Вы достаточно быстро привыкнете.

Следующий модуль index.js. В него мы импортируем функцию переданную во вне по умолчанию из menu.js и сразу присваиваем ей имя “createMenu”. При этом мы можем не указывать “.js” — webpack и так поймёт, что мы имеем ввиду.

Давайте создадим меню, состоящее из 3х пунктов …. Для удобства стилизации присвоим меню класс «menu».

5. Создаём html-файлы при помощи html-webpack-plugin

Для создания html-файлов и работы с шаблонами мы будем использовать плагин html-webpack-plugin.
Установим плагин при помощи Yarn. Не забудем флаг -D, чтобы зависимость была сохранена в devDependencies файла-манифеста. Туда же, где сохранён вебпак.

В webpack.config.js мы поместим следующий код. Я сэкономлю ваше время, сейчас и далее я не буду тратить время на тайпинг. Вместо этого постараюсь объяснить уже набранный код.

Пояснения:

— “сonst” — это ES6-альтернатива для “var”, указывающая, что переменная не должна быть изменена. Node.js полностью поддерживает эту часть ES6, т.е. в данном случае я также могу обойтись без babel.

— “path” — это базовый модуль node.js, который поможет нашему приложению работать корректно (одинаково) на разных платформах (например, windows или linux), т.к. они по разному определяют пути к файлам.

— “PATH” — объект, в который мы поместили 2 свойства: “source” — исходники приложения и “build” — папка, в которую будут помещаться результаты работы Webpack.

— “module.exports” — экспорт модуля в node.js. Внутри него мы пишем такие настройки Webpack, как entry, output, plugins и пр.

— “entry” — точка входа нашего приложения. Для многостраничного сайта можно сделать отдельные точки входа для каждой страницы. Запомните, что точками входа могут являться только те модули, которые не используются другими модулями вашего приложения. Так, например, наш модуль index.js использует другой модуль — menu.js. Но сам index.js не используется больше никаким модулем.

— “output” — описывает имена файлов и директорию — результат работы Webpack.

— “[name]” — это плейсхолдер, в него автоматически будут подставляться имена точек входа “entry” нашего приложения. А у нас их будет несколько. Но об этом позже.

— “plugins” — в этом разделе перечисляются плагины, которые кастомизируют процесс сборки Webpack. В нашем случае, это всего один плагин, который создает HTML-файл с заданным тайтлом.

6. Запуск приложения

Запустим Webpack и посмотрим на результат.

В консоли мы можем видеть много полезной информации, в том числе:

  • — время сборки,
  • — плагины,
  • — сгенерированные файлы и пр.

Результатом сборки стали 2 файла: main.js и index.html. Файл main.js содержит код обоих модулей: index.js и menu.js, а также рабочий код Webpack.

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

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

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

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

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

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

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