Beginsel van die Webpack Bondelbouer se werking

Oor die algemeen, tydens ontwikkeling, eindig ons met baie JavaScript-lêers wat verskillende stukke kode bevat. Dit kan dele van ons eie kode wees, of van derdeparty-biblioteke. Dit beteken dat ons elke sodanige lêer via die script-tag in die HTML-lêer moet invoeg.

Dit is nie ideaal nie, aangesien baie ingevoegde lêers die laaityd van die webwerf vertraag. Daarom is dit nodig om alle kode in een lêer te kombineer om die laai te bespoedig.

Dit is egter ook nie baie gerieflik om kode in een algemene lêer te ontwikkel nie. Daarom word die volgende benadering tans toegepas: kode word in aparte lêers ontwikkel, en dan met behulp van 'n bondelbouer in een algemene lêer saamgestel, wat dan in die HTML-lêer ingevoeg word.

Die aparte lêers is ES-modules. Hierdie modules word by ander lêers ingevoeg via die import-opdrag.

'n Hoof-lêer word gewoonlik geskep, waarby die ander lêers ingevoeg word. Hierdie lêer word die toegangspunt genoem.

Die bondelbouer gaan by die toegangspunt in, kyk watter modules daarbij ingevoeg is. By hierdie modules kan ook ander modules ingevoeg wees. Die bondelbouer volg al die verbindings en versamel al die kode in een lêer. Hierdie lêer word die bundel genoem.

Die kode wat die programmeerder skryf, is gewoonlik in die gids src geleë, en die saamgestelde kode word in die gids dist geplaas.