Webpack-kokoajan toimintaperiaate JavaScriptissä

Yleensä kehityksen aikana meillä on monta JavaScript-tiedostoa, jotka sisältävät erilaisia koodinpätkiä. Nämä voivat olla osia omasta koodistamme tai kolmannen osapuolen kirjastoja. Käytännössä jokainen tällainen tiedosto meidän on liitettävä HTML-tiedostoon script-tagin kautta.

Tämä ei ole kovin hyvä, koska moni liitetty tiedosto hidastaa sivuston latausnopeutta. Siksi latausten nopeuttamiseksi on tarpeen koota kaikki koodi yhteen tiedostoon.

Koodin kehittäminen yhdessä yleisessä tiedostossa ei kuitenkaan myöskään ole kovin kätevää. Siksi nykyään käytetään seuraavaa lähestymistapaa: koodi kehitetään erillisissä tiedostoissa, ja sitten kokoajan avulla se kootaan yhteen yhteiseen tiedostoon, joka liitetään HTML-tiedostoon.

Erilliset tiedostot ovat ES-moduuleja. Nämä moduulit liitetään muihin tiedostoihin import-komennolla.

Yleensä luodaan jokin pääasiallinen tiedosto, johon muut tiedostot liitetään. Tätä tiedostoa kutsutaan entry point.

Kokoaja menee entry pointiin, katsoo mitkä moduulit on liitetty siihen. Näihin moduuleihin voi myös olla liitetty muita moduuleja. Kokoaja seuraa kaikkia yhteyksiä ja kerää kaiken koodin yhteen tiedostoon. Tätä tiedostoa kutsutaan bundlessa.

Yleensä koodi, jonka ohjelmoija kirjoittaa, sijaitsee kansiossa src, ja koottu koodi sijoitetaan kansioon dist.

Kokoaja sallii myös kokoamistilan säätelyn. Tila 'development' on tarkoitettu kehitysprosessia varten. Se kerää koodin kehitykseen kätevällä tavalla. Tila 'production' on tarkoitettu lopullista koodia varten, joka panetaan toimintaan. Tässä tilassa koodi minimoidaan, jotta sen kokoa voidaan pienentää ja latausnopeutta parantaa.