Werksbeginsel van die Webpack-bundelaar in JavaScript

Oor die algemeen, tydens ontwikkeling kry ons baie JavaScript-lêers, wat verskillende stukkies kode bevat. Dit kan dele van ons kode wees, of derdeparty-biblioteke. Dit beteken dat ons elke sodanige lêer aan die HTML-lêer moet koppel deur die script-tag.

Dit is nie baie goed nie, aangesien baie gekoppelde lêers die spoed van die webwerf se laai vertraag. Daarom, om laai te bespoedig, is dit nodig om al die kode in een lêer te plaas.

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 bundelaar in een algemene lêer saamgestel, wat dan aan die HTML-lêer gekoppel word.

Aparte lêers is ES-modules. Hierdie modules word aan ander lêers gekoppel deur die opdrag import.

'n Sekere hoof-lêer word gewoonlik geskep, waaraan die ander lêers gekoppel word. Hierdie lêer word die insypunt genoem.

Die bundelaar gaan na die insypunt, kyk watter modules daaraan gekoppel is. Aan hierdie modules kan ook ander modules gekoppel wees. Die bundelaar volg al die koppelings en versamel al die kode in een lêer. Hierdie lêer word die bundel genoem.

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

Die bundelaar laat ook toe om die boumodus te reguleer. Die modus 'development' is bedoel vir die ontwikkelingsproses. Dit stel kode op 'n gerieflike manier vir ontwikkeling saam. Die modus 'production' is bedoel vir die finale kode, wat uitgeplaas sal word. In hierdie modus word die kode geminifiseer om die grootte daarvan te verminder en die laaispoed te verhoog.