Webpack è un "modulo bundler", il suo obiettivo è semplice: trasformare la tua applicazione in file statici.
Come funziona?
Webpack interpreta ogni parte della tua applicazione come un modulo; che si tratti di un modulo JavaScript, di un foglio di stile o di un'immagine.
A partire dal punto di ingresso della tua applicazione, Webpack genererà un albero delle dipendenze. I moduli caricati in memoria consentiranno di generare una distribuzione statica della tua applicazione.
I file così generati possono essere utilizzati direttamente nel browser.
// la creazione delle dipendenze inizia da questo file iscrizione: './src/index.js', produzione: { // il bundle generato conterrà l'intera applicazione percorso: percorso.risolvere(__nomedir, 'distante'), nome del file: 'app.bundle.js' }
Webpack è diverso da Grunt e Gulp?
Gulp e Grunt sono task runner, il loro scopo è consentirti di orchestrare compiti predefiniti. Richiedono l'uso di diverse librerie per renderlo uno strumento di compilazione. Ad esempio, dovrai aggiungere Uglify per minimizzare la tua app, tramite un'attività come codice. L'approccio Webpack favorirà un approccio più statico, la lettura di un file di configurazione permette di avere un'idea complessiva dell'elaborazione effettuata...
Funziona se utilizzo Typescript? ES6/ES7? JSX?
Grazie al suo sistema di caricamento, Webpack può comprendere qualsiasi tipo di file, basta installare e configurare il caricatore giusto. Ogni caricatore aggiunto consente a Webpack di comprendere un nuovo tipo di modulo. Ci sono caricatori per ogni tipo di modulo: Typescript, Babel, LESS/SASS, HTML, images...
modulo: { regole: [
// Carica tutti i moduli con estensione '.ts' o '.tsx' con 'ts-loader'
{test: /\.tsx?$/, caricatore:'ts-loader'} ] }
Caricatore TypeScript
caricatore di babele
Inoltre, il sistema dei plugin consentirà di arricchire le funzionalità offerte dai caricatori aggiungendo alla propria configurazione comportamenti avanzati.
plugin: [
// Abilita l'ottimizzazione del caricamento delle applicazioni suddividendo il pacchetto
nuovo webpack.optimize.CommonsChunkPlugins(opzioni)]
Come lo uso quotidianamente?
Abilita la modalità di visualizzazione o installa il Webpack Dev Server per guardare la modifica dei file e attivare la build incrementale di Webpack. Solo i moduli modificati verranno ricompilati, quindi la build sarà super veloce.
Puoi anche configurare Hot Module Reload che aggiornerà solo i moduli modificati nel browser.
Ad esempio, se cambi un colore in un modulo CSS, gli elementi si aggiorneranno senza ricaricare la pagina. Magico !
Server di sviluppo Webpack
Che aspetto ha in produzione?
Per distribuire la tua applicazione in produzione, devi dividere la tua configurazione per esternalizzare le configurazioni per ambiente (es: prod.webpack.config.js). Questa separazione facilita l'attivazione di funzionalità destinate ad un ambiente mirato (es: mappe di origine).
Prima di distribuire il tuo bundle, puoi sfruttare le funzionalità avanzate.
Il Tree Shaking che consente la rimozione del codice morto o il Code Splitting che genererà il tuo bundle in più parti, alcune delle quali asincrone.
Quali sono le funzionalità in arrivo?
La versione 4 di Webpack attualmente in versione beta arriverà presto con molti miglioramenti. Nel menu: ottimizzazioni delle prestazioni, supporto WASM, supporto JSON, introduzione di moduli standard...
Webpack 4 sarà la prima versione #0CJS (Configurazione zero), come pacco un modulo bundler pronto all'uso.
Questo nuovo approccio semplificherà la distribuzione riducendo la verbosità dei file di configurazione.
Pacchetto Web 4 Beta
Esercitazione Webpack 4
