В последние годы, в индустрии web-разработки набирают популярность Single Page Application(SPA), приложений, которые размещены на одной странице, которое для работы подгружает необходимый код вместе с загрузкой страницы. Также пользуются спросом веб-приложения, в которых клиент является полнофункциональном, что дает возможность снизить нагрузку на сервер. Это положительно сказывается на скорости работы приложения, особенно если уникальных посетителей больше десяти тысяч в месяц. Логика на стороне создается при помощи javascript и его фреймворков. Сервер просто отдает js-код клиенту, но возникает проблема, связанная с долгой загрузкой и обработкой этого кода. В качестве решения данно проблемы используются сборщики проектов, которые минимизируют код, удаляют комментарии в нем, могут загружать этот код не целиком, а только при необходимости. В данной статье будет рассмотрен сборщик проектов webpack, который позволяет решить большую часть проблем.
Ниже описаны основные проблемы связанные с разработкой сложного приложения:
1) Трудно управлять кодовой базой;
2) Сложность управления порядком загрузки большого количеств файлов или модулей;
3) Трудность с управлением структуры приложения;
4) Управление зависимостями в различных js-файлов.
5) Большое количество файлов в различных расширениях, которые необходимо компилировать и динамически подключать к странице.
На рисунке 1 представлена логика работы webpack.
Рисунок 1 – Логика работы webpack
Основная идея, взять все исходные файлы, css, js, sass,less, png и т.д. и преобразовать их в пакеты, называемые как бандлы. После чего эти бандлы подключаются на страницу приложения и приложение работает. Данные бандлы, зачастую, минифицированы, то есть сжаты по размеру, за счет удаления комментариев в коде и минификации, что приводит к ускорению загрузки этих файлов. Создание бандлов осуществляется при помощи построение графов зависимости.
Каждый раз, когда один файл зависит от другого, то есть в один файл импортируется другой файл, webpack рассматривает это как зависимость. Это позволяет webpack принимать файлы не относящиеся к javascript-коду, например, картинки, шрифты.
Когда webpack обрабатывает приложение, оно начинается с списка модулей, определенных в командной строке или в файле конфигурации. Начиная с этих точек входа, webpack рекурсивно строит график зависимостей, который включает в себя каждый модуль, который требуется вашему приложению, затем упаковывает все эти модули в небольшое количество пакетов - часто, только один - для загрузки браузером.
Основной понятия webpack состоит из четырех элементов, они представлены ниже в таблице 1. Эти понятия являются основой вебпака, зная которые можно его настроить. [1]
Таблица 1 – Основной элементы концепта webpack
|
Название элемента |
Его функции |
|
Entry, точка входа. |
Точка входа показывает webpack, какой модуль он должен использовать для построения граф зависимостей приложения, указывается при помощи пути к файлу, запускающего ваше приложение. Можно передавать несколько точек входа при помощи массива, это необходимо для создания chunk |
|
Output, вывод |
Вывод необходим для сообщения вебпаку куда необходимо разместить готовую сборку проекта. Указывается путь до папки и название файла. |
|
Loaders, лоадеры |
Так сложилось, что webpack может обрабатывать только javascript-файлы, а различные css, sass, png и т.д. он не способен обработать. Именно для решения этйо проблемы были придуманы лоадеры, которые преобразовывают файлы в модули, которые можно добавить в граф зависимостей. Лоадеры по сути, просто указывают вебпаку, каким лоадером обработать незнакомый вебпаку файл.[4] |
|
Plugins, плагины |
В то время как лоадеры выполняют только преобразования, основанные на типе файла, плагины чаще используются для выполнения действий и пользовательских преобразований на этапе компиляции или частей вашей сборки. У вебпака очень мощная и гибко настраиваемая система плагинов. Множество плагинов доступно вместе со стандартной сборкой вебпака. Для использования плагина его необходимо сначала импортировать, и затем добавить его в массив плагинов. |
Для наглядности приведен пример готовой настройки вебпака на рисунке 2.
Рисунок 2 – Настройка вебпака
Помимо создания конфигурационного файла для стартовой работы webpack необходимо для него развернуть специальное окружение. Окружение создается при помощи Node.js, установка вебпака, пакетов, плагинов, лоадеров происходит при помощи утилиты Node.js.[5] На рисунке 2, при подключении лоадера для обработки файлов в формате txt используется raw-loader, который необходимо поставить заранее, все установленные пакеты и плагины для разработки хранятся в специальном конфигурационном файле package.json. Пример файла приведен на рисунке 3. Этот файл хранит в себе настройки приложения, devDependencies это плагины которые необходимы для разработки продукта, dependencies настройки проекта для использования его пользователями, scripts хранит в себе команды для webpack.[2]
Рисунок 3 – Кофигурационный файл package.json
Стоить отметить команду build в scripts с рисунка 3. Эта команда начинает сборку всего проекта, исходя из конфигурации самого webpack и настроек в package.json. После того, как проект будет собран, в директории, которая указана в output с рисунка 1, появятся все бандлы, то есть собранные js-файлы, css, картинки и другие виды файлов. После чего их можно спокойно подключать на страницу приложения. [3]
В заключении стоит отметить, что сборка проекта при помощи webpack достаточно сложна при первом знакомстве. Но разобравшись с основами можно собирать готовые проекты очень быстро. Благодаря тому, что webpack обладает возможностью собирать проект из разных точек входа, это дает возможность создавать модульность приложения, положительно влияет на скорость приложения, и позволяет разбивать приложение на отдельные куски, которые можно продавать отдельно. Webpack обладает удобной и простой расширяемостью, то есть можно легко менять сборку проекта, добавив и включив плагин в конфигурацию webpack. Именно эти причины делают webpack таким популярным.