Статья подготовлена для студентов курса «Разработчик JavaScript» в образовательном проекте OTUS.
Webpack – один из самых быстрых, мощных и гибких сборщиков. На сегодняшний день он обладает также уникальными возможностями. Сравнительно недавно вышла новая версия Webpack и в этой заметке я поделюсь с вами тем, как настроить сборку вашего приложения, а также расскажу про некоторые возможности Webpack.
И чтобы собрать проект, как и любому другому уважающему себя сборщику, Webpack также необходим файл конфигурации:
Разберёмся:
Всё-таки мы в NodeJS окружении и так пишется export.
Режим, в котором webpack собирает ваше приложение:
В зависимости от него включаются или выключаются различные features, например, минификация. Точка входа для сборки, обычно это index.js клиентской части:
Собственно, результат работы webpack:
Туда будет складываться, так называемый бандл (bundle) – результат объединения всех связанных JS, начиная с точки входа.
Помимо JS, туда будут генерироваться HTML и другие файлы, генерируемые плагинами.
Есть секция, где настраивается сам модуль – та часть приложения, которая собирается Webpack:
В этой секции настраиваются правила обработки файлов и import-ов.
Webpack позволяет импортировать не только js-файлы, но и написанные на диалектах TypeScript, JSX, и даже позволяет импортировать картинки!
Вот как раз пример настройки loader-а – обработчика import-ов:
К файлам с данным расширением будет применяться babel-loader (babel) с набором плагинов (уже babel-а), называемых preset-ом, предназначенных для транспайлинга ES2015.
В данной секции вы можете указать, где будут находиться родительские папки импортируемых вами файлов:
Одна из прекрасных возможностей Webpack – дев-сервер в режиме проксирования:
Если вы разрабатываете UI для сложного backend-а, то здесь вы можете указать адрес сервера и все запросы от вашего UI будут проксироваться на этот сервер!
Есть вопросы? Напишите в комментариях!
Торопитесь присоединиться к курсу «Разработчик JavaScript».
Занятия начнутся 28 марта!
ПРИСОЕДИНИТЬСЯ
