Прынцып работы зборшчыка Webpack у JavaScript

Як правіла, пры распрацоўцы ў нас атрымліваецца шмат JavaScript файлаў, якія змяшчаюць розныя кавалкі коду. Гэта могуць быць часткі нашага коду, альбо староннія бібліятэкі. Атрымліваецца, што кожны такі файл мы павінны падключыць да HTML файла праз тэг script.

Гэта не вельмі добра, так як шмат падключаных файлаў запавольваюць хуткасць загрузкі сайта. Таму для паскарэння загрузкі неабходна ўвесь код скласці ў адзін файл.

Аднак, распрацоўваць код у адным агульным файле таксама не вельмі зручна. Таму ў цяперашні час практуецца наступны падыход: код распрацоўваецца ў асобных файлах, а затым з дапамогай зборшчыка збіраецца ў адзін агульны файл, які і падключаецца да HTML файла.

Асобныя файлы ўяўляюць сабой ES модулі. Гэтыя модулі падключаюцца да іншых файлаў праз каманду import.

Звычайна ствараюць некі асноўны файл, да якога падключаюцца астатнія файлы. Гэты файл называецца кропка ўваходу.

Зборшчык заходзіць у кропку ўваходу, глядзіць якія модулі падключаны да яе. Да гэтых модуляў таксама могуць быць падключаны іншыя модулі. Зборшчык ідзе па ўсіх падключэннях і збірае ўвесь код у адзін файл. Гэты файл называецца бандл.

Як правіла, код, які піша праграміст, размяшчаецца ў папцы src, а сабраны код змяшчаецца ў папку dist.

Зборшчык таксама дазваляе рэгуляваць рэжым зборкі. Рэжым 'development' прызначаны для працэсу распрацоўкі. Ён збірае код зручным для распрацоўкі чынам. Рэжым 'production' прызначаны для выніковага коду, які будзе выкладзены ў работу. У гэтым рэжыме код будзе мініфікаваны, каб паменшыць яго памер і павялічыць хуткасць загрузкі.