Webpack это инструмент для сборки JavaScript модулей. Когда мы используем Webpack для сборки наших JS файлов, он выполняет следующие шаги:
1. Анализ зависимостей: Webpack анализирует ваши JavaScript файлы и определяет зависимости между ними. Например, если у вас есть файл app.js, который импортирует модуль utils.js, то Webpack поймет, что app.js зависит от utils.js.
2. Создание графа зависимостей: Webpack использует информацию о зависимостях для создания графа зависимостей. Это означает, что Webpack определяет порядок, в котором модули должны быть собраны и каким образом они связаны.
3. Транспиляция и объединение файлов: Webpack выполняет транспиляцию и объединение файлов. Он применяет загрузчики (loaders) к файлам, чтобы преобразовать их в понятный браузеру формат (например, Babel для преобразования ES6 в ES5) и объединяет их в один или несколько файлов. Обычно, один из собранных файлов называется "bundle.js".
4. Генерация HTML файла: Webpack генерирует HTML файл, который содержит ссылки на собранные JavaScript файлы. По умолчанию, он генерирует тег <script>, который указывает на "bundle.js" и другие файлы, если таковые есть. Таким образом, при запуске приложения, HTML файл загружается в браузер, и браузер загружает и исполняет JavaScript файлы.
Теперь, почему ссылки идут на отдельные файлы, а не на общий собранный?
Вариант 1: Режим разработки
Когда вы запускаете проект в режиме разработки (mode: 'development'), Webpack будет генерировать отдельные JS файлы для каждого модуля. Это делается для обеспечения удобства отладки - вы можете видеть каждый модуль как отдельный файл и моментально обновлять только тот модуль, который изменился, без необходимости перезагрузки всего приложения. Это также позволяет избежать пересылки ненужного кода при каждом изменении.
Вариант 2: Режим продакшн
Когда вы запускаете проект в режиме продакшн (mode: 'production'), Webpack по умолчанию объединяет все модули в один файл, называемый "bundle.js". Это делается для оптимизации загрузки приложения - браузеру приходится загрузить только один файл, а не множество отдельных файлов. Также, при этом работает кэширование - если пользователь уже загрузил "bundle.js", то при следующем обращении к сайту, браузер будет его брать из кэша, что ускорит загрузку и экономит трафик.
Таким образом, выбор между отдельными файлами и общим сборкой зависит от режима разработки или продакшн, в котором вы запускаете проект. В режиме разработки, удобно иметь отдельные файлы для каждого модуля, в режиме продакшн, удобнее иметь единый файл для оптимизации загрузки. Вы можете настроить это поведение, используя соответствующие параметры в конфигурации Webpack (например, optimization.splitChunks для объединения модулей в отдельные файлы или output.filename для установки имени собранного файла).