Принцип рада Webpack-а

У принципу, при развоју имамо много JavaScript фајлова, који садрже различите делове кода. То могу бити делови нашег кода, или стране библиотеке. То значи да сваки такав фајл морамо да повежемо са HTML фајлом преко тага script.

То није баш добро, јер много повезаних фајлова успорава брзину учитавања сајта. Зато је за убрзање учитавања неопходно сав код ставити у један фајл.

Међутим, развој кода у једном заједничком фајлу такође није баш погодан. Зато се тренутно практикује следећи приступ: код се развија у одвојеним фајловима, а затим се помоћу сборщика сакупља у један заједнички фајл, који се и повезује са HTML фајлом.

Одвојени фајлови представљају ES модуле. Ови модули се повезују са другим фајловима преко команде import.

Обично се креира неки главни фајл, којем се повезују остали фајлови. Овај фајл се зове тачка улаза.

Сборщик улази у тачку улаза, гледа који модули су повезани са њом. На ове модуље такође могу бити повезани други модули. Сборщик прати све везе и сакупља сав код у један фајл. Овај фајл се зове бандл.

У принципу, код који пише програмер, налази се у фолдеру src, а сакупљени код се ставља у фолдер dist.