Principio di funzionamento del bundler Webpack in JavaScript

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 ogni tale file deve essere collegato al file HTML tramite il tag script.

Questo 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 generale non è molto conveniente. Quindi al momento viene praticato il seguente approccio: il codice viene sviluppato in file separati, e poi tramite un bundler viene assemblato in un unico file generale, che viene collegato al file HTML.

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

Di solito viene creato un file principale, a cui vengono 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 dallo sviluppatore, si trova nella cartella src, mentre il codice assemblato viene posto nella cartella dist.

Il bundler permette anche di regolare la modalità di build. La modalità 'development' è destinata al processo di sviluppo. Assembla il codice in modo conveniente per lo sviluppo. La modalità 'production' è destinata al codice finale, che sarà messo in produzione. In questa modalità il codice sarà minificato, per ridurne le dimensioni e aumentare la velocità di caricamento.