Lo sviluppo web in javascript è spesso legato all’utilizzo di molti file. Un pò perchè il numero di righe di codice aumenta con la complessità dell’applicazione da realizzare, un pò per la necessità di aggiungere librerie di terze parti. L’inclusione di questi file avviene normalmente utilizzando tag <script> che il più delle volte richiedono connessioni http per il download. Stiamo parlando dell’inclusione di file provenienti da link esterni e/o CDN.
Ogni file richiesto esternamente dalla nostra applicazione genera, ovviamente, del traffico. Per minimizzare il traffico, sono stati adottati diversi meccanismi, e sicuramente il più diffuso è l’utilizzo di “minificatori” (traduzione non molto felice di minifier ), ovvero strumenti che consentono, in maniera più o meno automatizzata, di compattare il codice (ad esempio, creando una sola riga, e minimizzando la presenza di “a capo”).
In questo scenario vengono posizionati i così detti module loader, il cui compito è proprio quello di eseguire compattazioni di script e file creando un unico file pronto per essere incluso direttamente all’interno delle pagine HTML. I module loader maggiormente diffusi sono RequireJS, Bowserify , SystemJS e Webpack.
Webpack è stato scelto da Angular ed ha funzionalità leggermente differenti rispetto a quelle di un semplice module loader, possiamo dire che si avvicina molto al concetto di bundler. Un bundler consente di unire file differenti in uno unico, solitamente utilizzando un solo comando (a linea di comando). La tipologia di file uniti è di solito la stessa: nel nostro caso si tratta di file javascript. WebPack va ben oltre: consente di includere all’interno di unico file, file differenti come ad esempio css e immagini.