CONTATTACI

Blog

Introduzione al Webpack

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.

Articoli correlati

Il linguaggio HTML (Hypertext Markup Language) è uno dei più conosciuti e diffusi: lo si trova infatti praticamente in tutte le pagine web esistenti. È una scelta popolare tra i principianti che si…

Seguici su Facebook

Vuoi entrare nel mondo della programmazione?

Scopri di più sui nostri corsi!

Chiamaci al numero verde

Contattaci su WhatsApp

Contattaci senza impegno per informazioni sul corso

Pagamento rateale

Valore della rata: A PARTIRE DA 115 €/mese.

Esempio di finanziamento 

Importo finanziato: € 2440 in 24 rate da € 115 – TAN fisso 9,55% TAEG 12,57% – importo totale del credito € 2841.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

*In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Pagamento rateale

Valore della rata: A PARTIRE DA 210 €/mese.

Esempio di finanziamento  

Importo finanziato: € 4500 in 24 rate da € 210,03 – TAN fisso 9,68% TAEG 11,97% – importo totale del credito € 5146,55.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

* In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Contattaci senza impegno per informazioni sul corso

Scopriamo insieme se i nostri corsi fanno per te. Compila il form e aspetta la chiamata di uno dei nostri consulenti.