# Принцип работы сборщика Webpack в JavaScript

Как правило, при разработке у нас получается много JavaScript файлов, содержащих различные кусочки кода. Это могут быть части нашего кода, либо сторонние библиотеки. Получается, что каждый такой файл мы должны подключить к HTML файлу через тег `script`.

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

Однако, разрабатывать код в одном общем файле тоже не очень удобно. Поэтому в настоящее время практикуется следующий подход: код разрабатывается в отдельных файлах, а затем с помощью сборщика собирается в один общий файл, который и подключается к HTML файлу.

Отдельные файлы представляют собой ES модули. Эти модули подключаются к другим файлам через команду `import`.

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

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

Как правило, код, который пишет программист, располагается в папке `src`, а собранный код помещается в папку `dist`.

Сборщик также позволяет регулировать режим сборки. Режим `'development'` предназначен для процесса разработки. Он собирает код удобным для разработки образом. Режим `'production'` предназначен для итогового кода, который будет выложен в работу. В этом режиме код будет минифицирован, чтобы уменьшить его размер и увеличить скорость загрузки.

Расскажите, что такое бандл.

Расскажите, что такое точка входа.

Расскажите, какие есть режимы сборки.

← →
↑
en ru