1. Введение
Webpack — это сборщик JS-модулей, менеджер модульных зависимостей, который анализирует дерево зависимостей и создает один или несколько результирующих файлов, содержащих всю кодовую базу проекта. Выстраивает порядок подключения модулей, собирает, минифицирует, запаковывает и многое другое.
Webpack стал одним из самых важных инструментов веб-разработчика. В первую
очередь - это менеджер модульных зависимостей приложения и сборщик JS-файлов, но
он может трансформировать все ресурсы — HTML и CSS, SASS, LESS и PostCSS,
оптимизировать изображения, компилировать шаблоны, запускать локальный
веб-сервер для разработки и многое другое.
2. Принцип работы
Предположим, у нас есть приложение, которое может выполнять две простые
математические задачи: суммировать и умножать. Мы решили разделить эти функции
на отдельные файлы (модули) для упрощения поддержки кодовой базы. Тогда в
index.html скрипты будут подключены в такой последовательности.
<script src="sum.js"></script>
<script src="multiply.js"></script>
<script src="index.js"></script>
Допустим код из sum.js используется в multiply.js и index.js, а код из
multiply.js используется только в index.js. Покажем иерархию зависимостей на
простой диаграмме.
Если ошибиться в последовательности подключения скриптов в index.html, то есть
если index.js включен перед любой из других зависимостей или если sum.js
включен после multiply.js, будут ошибки.
Теперь представим, что мы масштабируем это до реального, полностью рабочего приложения — могут быть сотни зависимостей. Сохранение порядка подключения станет кошмаром.
Webpack преобразует зависимости в модули и сошьет в один или несколько файлов.
Каждый модуль будет иметь закрытое пространство имен и подключаться в нужное
время, в правильном порядке.
Gulp и Grunt все еще занимают достойное место в инструментарии разработчика
и для некоторых проектов, функционал Webpack не нужен, хотя он может отлично
работать в связке с ними. Тем не менее, несмотря на то. что кривая обучения
может быть выше при более сложных настройках, Webpack незаменим если вы
используете современные библиотеки и фреймворки для разработки, такие как
React, Vue, Angular и т. д.
3. Настройка
По ссылкам ниже вы найдете исчерпывающие руководства с пошаговыми объяснениями настройки Webpack.