Principio di funzionamento del bundler Webpack

Di norma, durante lo sviluppo, otteniamo molti file JavaScript, contenenti vari frammenti di codice. Questi possono essere parti del nostro codice, o librerie di terze parti. Risulta che dobbiamo collegare ciascuno di questi file al file HTML tramite il tag script.

Non è molto buono, poiché molti file collegati rallentano la velocità di caricamento del sito. Pertanto, per accelerare il caricamento, è necessario unire tutto il codice in un unico file.

Tuttavia, sviluppare codice in un unico file comune non è molto conveniente. Quindi al momento si pratica il seguente approccio: il codice viene sviluppato in file separati, e poi con l'aiuto di un bundler viene assemblato in un unico file comune, che viene collegato al file HTML.

I file separati rappresentano moduli ES. Questi moduli sono collegati ad altri file tramite il comando import.

Di solito si crea un file principale, a cui sono collegati gli altri file. Questo file è chiamato punto di ingresso.

Il bundler entra nel punto di ingresso, guarda quali moduli sono collegati ad esso. Anche a questi moduli possono essere collegati altri moduli. Il bundler segue tutte le connessioni e raccoglie tutto il codice in un unico file. Questo file è chiamato bundle.

Di norma, il codice scritto dal programmatore, si trova nella cartella src, mentre il codice assemblato viene posto nella cartella dist.