Webpack - сборщик модулей JavaScript с открытым исходным кодом

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

Из этого урока вы узнаете:

• Что делает Webpack?
• Как подключить и настроить Webpack для своего проекта?
• Другие возможности Webpack

1) Что делает Webpack?

Этот инструмент разбивает большое количество JavaScript-кода на маленькие модули. Каждый модуль отвечает за свою задачу. Это повышает читабельность кода и снижает вероятность возникновения ошибок. Долгое время Webpack использовался только для этой цели. Однако сейчас он стал более функциональным. Помимо JavaScript-кода, он может обрабатывать HTML- и СSS-код, и даже изображения. Главная особенность Webpack - он позволяет очень быстро создать модульную структуру проекта, где каждый модуль изолирован и не влияет на другие модули. Webpack был разработан ещё 9 лет назад, однако до сих пор является одним из самых популярных и удобных инструментов подобного рода.

2) Как подключить и настроить Webpack для своего проекта?

Необходимо, находясь в папке с вашим проектом, войти в терминал и ввести следующие команды:

Для подключения Webpack у вас должен быть установлен Node.js. Скачать его можно с официального сайта: https://nodejs.org/ru/

Первая команда инициализирует проект, а вторая устанавливает Webpack. Теперь, после ввода двух команд выше, в нашем проекте установлен Webpack. Чтобы он начал что-то делать, необходимо создать конфигурационный файл webpack.config.js. В нем будут храниться все настройки Webpack.

Добавим в проект 2 папки: src и dist. В первой папке будет наш JavaScript-код. Во вторую папку после настройки Webpack будет складывать преобразованный код. В папке src создадим файл index.js. В корне проекта создадим index.html с базовой разметкой с помощью тега script подключим туда файл index.js. В итоге, если вы произвели все описанные действия выше, мы получим такую структуру проекта:

Напишем в файле index.js такой код, чтобы проверить, скрипт подключился:

Если мы запустим страницу, то увидим в консоли результат:

Это значит, что все работает. Но это обычный код, который мы всегда пишем. Займемся преобразованием такого кода в модульный.

Для начала заключим каждый модуль в отдельную функцию:

Здесь мы можем даже не менять имя константы a, потому, что каждая из них находится в своей области видимости и не видна для других модулей.

Результат в консоли аналогичен:

Из файла index.js перенесем код каждого модуля в отдельный файл. Создадим папку modules и все файлы с модулями перенесем туда. Выглядеть это будет так:

Для модуля 2 и 3 действия аналогичны, нужно создать файлы module2.js и module3.js и в них перенести соответствующие функции.

Важно - в самом низу файла с каждым модулем нужно прописать export default module, где module - название вашего модуля.

Файл index.js сейчас будет выглядеть так:

Сверху мы импортировали наши модули, ниже мы их вызвали.

Однако сейчас это работать не будет - вы получите ошибку. Для того, чтобы это работало, нам нужно настроить Webpack. Займёмся этим.

В файле webpack.config.js пропишем такой код:

Разберемся, что здесь произошло.

• В самом начале мы вызвали функцию из Node.js, которая называется path. Эта функция позволит нам манипулировать файловыми путями в нашем проекте - читать, создавать, удалять, переименовывать файлы и папки.
• Далее, внутри module.exports в свойстве entry мы прописываем путь до нашего исходного файла, из которого мы вызываем все модули. В нашем случае это index.js.
• В свойстве output мы задаем выходной файл. filename - это название будущего файла. path - это путь до него. В path мы с помощью одноименной функции из Node.js составляем путь до выходного файла.
• __dirname - это встроенная переменная, которая содержит в себе текущий путь до папки с проектом, функция path.resolve объединяет путь до папки с нашим проектом и путь до папки, в которую мы складываем выходной файл (в нашем случае это папка dist).

Мы настроили конфигурационный файл и нам осталось только запустить этот скрипт. Чтобы упростить процесс запуска в файле package.json внутри scripts создадим скрипт с названием build и запишем туда такую строчку:

webpack --config webpack.config.js

Наш файл package.json будет выглядеть так:

Всё готово! Осталось запустить скрипт с помощью такой команды:

npm run build

После этого вы заметите, что в папке dist появился файл bundle.js. Этот файл будет содержать весь ваш код вместе с модулями. В файле index.html в теге script вместо пути до index.js нужно прописать путь до bundle.js.

То есть, наш HTML-шаблон теперь выглядит так:

Если вы откроете страницу, то в консоли увидите такой результат:

Всё настроено и работает! У нас получилась простейшая модульная структура. Вы можете менять каждый модуль в отдельности, перекомпилировать и на выходе получить объединенный минифицированный код.

3) Другие возможности Webpack

Мы рассмотрели основную возможность Webpack, за которую его чаще всего и используют - модульность. Однако на модульности возможности не заканчиваются.

Очень полезной особенностью является наличие встроенного сервера в Webpack. Как и в Gulp, например, при изменении стилей, JavaScript-кода или верстки, он обновляется с новыми изменениями.

Также очень полезная особенность Webpack - транспиляция. Транспиляция - это перевод кода с одного языка на другой или с одной версии языка на другую. С помощью Babel, Webpack может преобразовывать код с новых стандартов на более поздние стандарты. Это позволяет достигнуть лучшей совместимости с старыми браузерами.

Кроме того, Webpack способен преобразовывать файлы верстки и стилей, работать с изображениями и многое другое. Плагины Webpack постоянно обновляются и развиваются, как и сам Webpack.

Советуем ознакомиться с официальной документацией Webpack, где вы сможете найти максимально подробную информацию о Webpack, его плагинах и тонких настройках: https://webpack.js.org/concepts/

Надеемся, что информация была актуальна и полезна. Изучайте и применяйте изученное в своих проектах.

До скорой встречи!

Ссылка на канал: https://t.me/sitodel