Webpack: сборка JS-модулей

Всем привет! Как и обещали, выпускаем небольшую вводную статью по сборке JS-проекта с помощью Webpack.

Что такое Webpack

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

Пример удобства Webpack

Создадим простой проект с незамысловатой структурой.

Допустим, мы хотим создать класс Card, который будет иметь некоторые поля и пару удобных методов, а далее мы будем использовать его в main.js . Безусловно, создадим мы файл с этим классом в папке js .

Ниже представлено то, как выглядит этот файл:

Вот так выглядит index.html:

Содержимое файла main.js:

В index.css пропишем следующие стили:

Вся логика достаточно проста: мы создаём экземпляр класса Card, получаем его HTML-представление и вставляем его в документ, к которому будет подключен скрипт. Тут и начинаются первые проблемы. Если мы подключим файлы так, как показано ниже, то произойдёт ошибка.

Так выглядит само сообщение об ошибке:

Ошибка заключается в том, что класс Card, который мы используем в файле main.js, находится в файле card.js, который мы добавляем в тэге script позже. Собственно из-за того, что мы используем ещё не определённый класс Card в main.js и происходит ошибка. Если мы поменяем местами импорты этих файлов, то всё заработает.

А теперь просто вдумайтесь, насколько же трудно было бы следить за порядком файлов в реальном проекте, даже представить трудно, не так ли?

Теперь посмотрим, как Webpack подходит к процессу сборки JS-проектов.

Для начала, необходимо проинициализировать node package manager в корневой директории проекта. Для этого достаточно ввести следующую команду в командной строке npm init -y.

Далее необходимо ввести такую команду: npm i webpack webpack-cli -D . Отлично, у нас всё готово для продолжения работы.

Теперь необходимо создать файл-конфигурацию для Webpack, создать её нужно также в корневой директории проекта. ВАЖНО!!! Он обязательно должен иметь название webpack.config.js . Ниже можете видеть его содержимое, сейчас мы кратко пройдёмся по тому, за что отвечает каждый ключ в объекте конфигурации.

Во-первых, path – модуль из среды исполнения JS на сервере, Node.js. Он нужен для работы с файловой системой. Ключ entry , как можно догадаться по названию, обозначает путь до входного файла, то есть до файла, с которого Webpack начнёт сборку проекта.

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

Посмотрим, как нам теперь нужно модифицировать наши JS-файлы, чтобы это всё отлично работало со сборщиком.

Добавились какие-то странные ключевые слова import и export , заметили? Они пришли к нам вместе с возможностью сборки наших JS-файлов в один финальный бандл. Ключевое слово export даёт возможность использовать нам переменную или функцию в другом файле.

Что же нам нужно, чтобы использовать их в другом файле? Нам нужно импортировать то, что мы хотим, в этот файл с помощью ключевого слова import. По умолчанию, из каждого экспорта какого-либо файла создаётся объект, где каждому ключу соответствует название переменной или функции, экспортируемой с помощью ключевого слова export.

Далее создадим новый npm-скрипт в файле package.json.

Отлично, сделав все эти шаги, необходимо ввести в терминал команду npm run build.

После выполнения этой команды в корне проекта должна была быть создана папка distributive, в которой находится файл main.js .

В index.html нужно прописать в тэге скрипт путь до бандла, который нам построил Webpack.

Теперь открываем наш файл в браузере и УРА, всё работает!

Резюмируя это всё, мы только что поняли, каким образом работает Webpack, увидели разницу между двумя подходами и осознали, насколько же удобен и лёгок для применения Webpack.

Статья подготовлена образовательной организацией JavaScript Academy