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

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

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

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

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

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

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

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