L’introduzione di Node.Js e le nuove specifiche definite nello standard ES6 hanno, di fatto, rilanciato il linguaggio Javascript, facendolo, pian piano, concorrere con i bei vecchi e amati linguaggi di programmazione fortemente tipizzati. Il crescere della sua popolarità ha spinto anche all’aumento del suo utilizzo, rendendo sempre più complicato gestire le logiche applicative che pian piano si stavano spostando dal backend al front end.
Queste nuove esigenze fecero nascere il concetto di Modulo di Codice, concetto che andava a sostituire il classico import a cascata dei file JavaScript oppure la scrittura di un singolo file .js che contenesse tutta la logica applicativa.
Il modulo si occupa di dividere il codice in tanti piccoli pezzi richiamabili ovunque come dipendenze.
Tuttavia, al tempo, non avendo ancora JavaScript un meccanismo nativo di gestione delle dipendenze (attraverso keyword come Import ed Export) i moduli venivano implementati attraverso diversi sistemi tra cui le cosiddette closures e anonymous function (IIFE, Immediately-invoked Function Expression).
Fu proprio NodeJs a rivoluzionare tutto
NodeJs, non girando nel browser ma nel server, creò il problema di come gestire queste dipendenze poiché non aveva a disposizione tag html e quant’altro.
Per questo motivo spinse la creazione di CommonJs. Ossia un module pattern che consentiva di richiamare ed esportare pezzi di codice con l’uso di require e exports.
Esempio di export:
- crea un file chiamato prova.js e scrivi una funzione di prova
//prova.js
export.helloWorld = (name) => `Hello ${name}`;
- Ora crea un altro file (nel nostro esempio foo.js) in cui richiami questa funzione
// foo.js
const prova = require('./prova.js');
console.log(prova.helloWord('Giuseppe'));
- Ora, dopo aver verificato di aver installato NodeJs, esegui il file foo.js da terminale digitando node foo.js
node foo.js
potrà sembrare poco ma le funzionalità di require e exports diedero inizio alla rinascita di Javascript!
Commonjs essendo stato concepito per NodeJs, e quindi per lavorare lato Server, gestiva le dipendenze in modo sincrono, quindi non era ottimizzato per lavorare con le moderne web application dove il tutto avviene in modo asincrono. Perciò, venne sviluppato un Fork di commonJS che prese il nome di AMD (Asynchronous Modules Definition).
Questi predecessori di Webpack potevano si gestire le dipendenze, ma avevano un contro: lavoravano solo ed esclusivamente con file Javascript.
Webpack oltre a gestire file Javascript, è in grado di operare anche con Immagini, json, Xml, typescript, Sass… insomma, una moltitudine di altri file con diversi tipi di estensione. Costruendo in maniera automatica un grafo (Dependency Graph), in cui inserire ogni singolo file ricercando le sue dipendenze e collegandole tra di loro.
Data la sua potenza e versatilità, Webpack è usato in moltissime CLI, ossia i comandi da terminale utilizzate per generare progetti nei più popolari framework Javascript che tutti conosciamo, come Angular, React e Vue.js.
I concetti chiave di Webpack sono i seguenti:
- Entry Point: rappresenta il punto di partenza di qualsiasi applicazione Webpack
- Output: sarà la cartella che conterrà la build del progetto
- Loaders: consentono di processare file di diversa estensione
- Plugins. sono la spina dorsale di Webpack, consentono di fare tutto quello che i loaders non possono fare estendendo le funzionalità di Webpack
Un esempio pragmatico e chiaro dell’utilizzo di Webpack riguarda il processo di build di un’applicazione Angular 2+ scritta interamente in Typescript. L’intero processo è trasparente a noi utilizzatori del framework, sotto il cofano è proprio Webpack che fa il gran lavoro.
Infatti, essendo Typescript non compatibile con nessun browser, ci sarà bisogno di gestire questi file con estensione .ts e compilarli in una versione Javascript compatibile con i moderni Browser, come ad esempio ES5 o ES6 a seconda del nostro target di riferimento. Per fare questo, Webpack utilizza degli appositi Loader.
Webpack è sfruttato anche nella costruzione delle build finali del progetto in quanto è possibile riunione centinaia di file in un unico che prende il nome di Bundle, applicando ottimizzazioni in termini di performance e tempi di caricamento.
Inoltre può anche creare i cosiddetti Chunk, ossia piccoli pezzi dell'applicazione in modo da sfruttare il lazy loading (caricamento asincrono), richiamando i componenti a runtime solo nella pagina dove sono utilizzati.
In questa serie di articoli mostreremo come utilizzare Webpack, sfrutteremo i loader per caricare file con diverse estensioni come CSS e file Typescript e mostreremo l’utilizzo di alcuni dei plugin più importanti, come, ad esempio, quello che ci permetterà di avviare un web server locale e attivare il refresh automatico del progetto che, ad ogni modifica salvata, compila e mostra il progetto aggiornato.
L’obiettivo finale è lo sviluppo di una piccola applicazione in linguaggio Javascript, con il supporto di Typescript e la compilazione di file css che potrebbe essere estesa facilmente al supporto di file Sass oppure Scss. Infine, metteremo a disposizione una repository su Github in cui di volta in volta troveremo i sorgenti utilizzanti.
Stay Tuned!
Link repository Github: Corso Webpack.
