Webpack-kokoajan toimintaperiaate

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 latausnopeuden nopeuttamiseksi kaikki koodi on purettava 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 kerätään se 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 mitä moduuleja sinne on liitetty. Myös näihin moduuleihin voi olla liitetty muita moduuleja. Kokoaja seuraa kaikkia yhteyksiä ja kerää kaiken koodin yhteen tiedostoon. Tätä tiedostoa kutsutaan bundle.

Yleensä koodi, jonka ohjelmoija kirjoittaa, sijaitsee hakemistossa src, ja koottu koodi sijoitetaan hakemistoon dist.