Webpack
Что это?
Webpack — это инструмент для сборки проекта состоящего из множества файлов JS, HTML, CSS и других в единый набор файлов, сжатых и готовых для дальнейшего использования в браузере и более эффективной работы с файлами больших программ.
Для чего нужно это знать?
Приложения, написанные на JavaScript, постоянно усложняются за счет большого количества различных модулей, файлов и скриптов, поэтому хорошим выходом является использование сборщика (или бандлера). Подобные инструменты позволяют разработчикам упаковывать, компилировать и в целом организовывать все ресурсы, необходимые для проекта. Можно использовать не только сторонние библиотеки, но и собственные файлы. Подобная модульная система позволяет добиться лучшей организации проекта, так как получается, что он разбит на небольшие модули. Вебпак на данный момент является одним из самых мощных подобных инструментов. Он имеет открытый исходный код и позволяет решать множество разных задач. Помимо самой сборки модулей, Webpack способен выполнять еще большое количество разнообразных операций: мониторить изменения в скриптах; способен «перевести» CoffeeScript в JavaScript; дает возможность использовать дополнительный инструмент для работы с серверной частью приложения — собственный локальный сервер; может разделить собранный «единый файл» на несколько более мелких, чтобы не «перегружать» браузер; применяется при работе с серверной частью приложения, а точнее, c фреймворком Node.JS; и другими.
Какие базовые понятия включает этот навык?
Entry – модуль, который используется для построения внутреннего графа зависимостей.С его помощью webpack определяет, от каких модулей и библиотек зависит точка входа (напрямую и не напрямую). Затем включает их в граф, пока не останется ни одной зависимости. По умолчанию для свойства entry установлено значение ./src/index.js. Но можно указать другой модуль в файле конфигурации сборщика. Output – это свойство указывает, где webpack должен сохранять бандл и как называть его файл (или файлы). Значением по умолчанию является ./dist/main.js для основного бандла и ./dist для других сгенерированных файлов. Загрузчики. По умолчанию webpack понимает только файлы JavaScript и JSON. Чтобы обработать другие типы файлов и конвертировать их в модули, сборщик использует загрузчики. Например, загрузчик может трансформировать файлы из языка CoffeeScript в JavaScript или встроенные изображения в URL-адреса. С помощью загрузчиков можно даже импортировать CSS-файлы прямо из модулей JavaScript. Плагины. Используются для задач, которые не могут выполнять загрузчики. Режимы. Webpack позволяет настроить режим на development, production или none. Благодаря этому он может использовать встроенные оптимизации для каждой среды. По умолчанию установлено значение Режим none означает, что все опции оптимизации по умолчанию будут отключены. Чтобы узнать больше об опциях, которые webpack использует в development и production, посетите страницу конфигурации режимов.
Где я могу освоить этот навык?
Освоить навык «Webpack» ты можешь проходя обучение в нашем менторинге по программе «Web-разработчик». Более подробно навык изучается в проекте JS Multitool.