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

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

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

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

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

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

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

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

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