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

Современный фронтенд с ростом требований к интерактивности веб-приложений стал достаточно сложным, а работа по подготовке всех его компонентов к использованию — весьма комплексной. Если максимально кратко, то WebPack позволяет в правильном порядке собрать все используемые в проекте модули JS и адаптировать их для работы в браузере, скомпилировать CSS из SASS или LESS и обеспечить совместимость CSS с целевыми браузерами, а также подготовить «статику» (шрифты, изображения) для эффективного использования в приложении.

Теперь же более подробно рассмотрим задачи, решаемые системами сборки и webpak'ом в частности.

Практически любой современный фронтенд-проект «под капотом» использует большое количество JS-библиотек и содержит много JS-кода, а для работы приложения всю эту кодовую базу надо собрать в правильном порядке и подготовить для использования.

Язык программирования JavaScript развивается и в нём появляются новые возможности, которые упрощают разработку и делают код более читаемым. Но новые возможности JS даже современными браузерами часто не поддерживаются (а старыми — и подавно), поэтому код, написанный с использованием новых возможностей языка, необходимо преобразовывать для использованя в браузерах.

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

CSS — это единственный язык описания внешнего вида HTML-документов, который поддерживается браузерами. Но его возможности весьма ограничены, поэтому в разработке чаще используются препроцессоры SASS или LESS, расширяющие возможности разработчика — по сути, препроцессоры позволяют использовать в написании CSS возможности характерные для языков программирования — переменные, циклы, функции и т.д. Код, созданный при помощи расширений SASS или LESS, необходимо преобразовать в CSS для использования в браузере. Также создаваемые CSS-документы целесообразно дополнительно обрабатывать на этапе подготовки к использованию в приложении, например, некоторые новые возможности поддерживаются в браузерах только в «префиксном» режиме и вполне целесообразно установку этих префиксов возложить на автоматику.

Для всех использумых во фронтенд-приложении тектовых файлов (JS, CSS, SVG) полезна базовая минификация (удаление «лишних» пробелов и переносов строк) и сжатие в gzip, так как это ускоряет загрузку этих документов за счёт уменьшения «веса» файлов. Также полезно проставлять в названиях файлов контрольную сумму их содержания, так как это позволяет без проблем использовать браузерное кэширование с максимально агрессивными настройками.

Часто кодовая база всего приложения получается достаточно объёмная и объединять всё в один общий пакет неэффективно, если в отдельных подсистемах используется лишь небольшая часть из общего пакета. В этом случае применяется Code Splitting — техника, позволяющая разделить код приложения на несколько отдельных пакетов, а эти пакеты уже можно загружать в браузер по мере необходимости.

Все описанные выше проблемы и задачи можно решать вручную, каждый раз выполняя набор операций для подготовки исходных кодов к использованию. Но зачем так неэффективно тратить время разработчика, если с этими задачами может справиться автоматическая система сборки. Мы в своей работе используем WebPack, так как по функциональным возможностям и удобству использования WebPack сейчас явный лидер среди имеющихся на рынке ПО систем сборки фронтенда.

TypeScript

Технологии по теме

Начнём проект вместе