Introduzione al Webpack parte 1

Al giorno d'oggi è prassi normale quando si costruisce un sito Web in modo da disporre di una sorta di processo di creazione per svolgere le attività di sviluppo e preparare i file per un ambiente live. 

Puoi usare Grunt o Gulp per questo, costruendo una catena di trasformazioni che ti permettono di lanciare il tuo codice da una parte e ottenere un minifoto CSS e JavaScript all'esterno. 

Questi strumenti sono estremamente popolari e molto utili. C'è, tuttavia, un altro modo di fare le cose, ed è quello di usare Webpack.

Che cos'è il Webpack?

Webpack è ciò che è noto come "module bundler". Richiede moduli JavaScript, comprende le loro dipendenze e quindi li concatena nel modo più efficiente possibile, sputando un singolo file JS alla fine. Niente di speciale, giusto? Cose come RequireJS lo fanno da anni. 

Bene, ecco il colpo. Con Webpack, i moduli non sono limitati ai file JavaScript. Usando Loaders, Webpack capisce che un modulo JavaScript può richiedere un file CSS e che il file CSS potrebbe richiedere un'immagine. Le risorse emesse conterranno solo esattamente ciò che è necessario con il minimo sforzo. Prepariamoci così possiamo vederlo in azione.

Installazione

Come con la maggior parte degli strumenti di sviluppo, avrai bisogno di Node.js installato prima di poter continuare. Supponendo che tu abbia impostato correttamente, tutto ciò che devi fare per installare Webpack è semplicemente digitare quanto segue sulla riga di comando.

npm install webpack -g

Questo installerà Webpack e ti permetterà di eseguirlo da qualsiasi punto del tuo sistema. Successivamente, crea una nuova directory e all'interno crea un file HTML di base in questo modo:

La parte importante qui è il riferimento a bundle.js, che è ciò che Webpack creerà per noi. Nota anche l'elemento H2: lo useremo più tardi.

Quindi, crea due file nella stessa directory del tuo file HTML. Dai un nome al primo main.js, che come puoi immaginare è il principale punto di accesso per la nostra sceneggiatura. Quindi chiama il secondo Say-hello.js. Questo sarà un semplice modulo che prende il nome di una persona e l'elemento DOM e inserisce un messaggio di benvenuto in tale elemento.

// say-hello.js module.exports = function (name, element) element.textContent = 'Hello' + name + '!'; ;

Ora che abbiamo un modulo semplice, possiamo richiederlo e chiamarlo da main.js. Questo è facile come fare:

var sayHello = require ('./ say-hello'); sayHello ('Guybrush', document.querySelector ('h2'));

Ora se dovessimo aprire il nostro file HTML, questo messaggio ovviamente non verrebbe mostrato come non abbiamo incluso main.js né compilato le dipendenze per il browser. Quello che dobbiamo fare è ottenere Webpack da guardare main.js e vedere se ha delle dipendenze. Se lo fa, dovrebbe compilarli insieme e creare un file bundle.js che possiamo usare nel browser.

Torna al terminale per eseguire Webpack. Basta digitare:

webpack main.js bundle.js

Il primo file specificato è il file di ingresso in cui vogliamo che Webpack inizi a cercare le dipendenze. Funzionerà se tutti i file richiesti richiedono altri file e continueranno a farlo finché non avrà elaborato tutte le dipendenze necessarie. Al termine, restituisce le dipendenze come singolo file concatenato bundle.js. Se premi return, dovresti vedere qualcosa di simile a questo:

Hash: 3d7d7339a68244b03c68 Versione: webpack 1.12.12 Tempo: 55ms Dimensione oggetto Chunks Chunk Nomi bundle.js 1.65 kB 0 [emesso] main [0] ./main.js 90 byte 0 [costruito] [1] ./say- hello.js 94 byte 0 [costruito]

Ora aperto index.html nel tuo browser per vedere la tua pagina che dice ciao.

Configurazione

Non è molto divertente specificare i nostri file di input e di output ogni volta che eseguiamo Webpack. Fortunatamente, Webpack ci consente di utilizzare un file di configurazione per salvarci il problema. Crea un file chiamato webpack.config.js nella radice del tuo progetto con i seguenti contenuti:

module.exports = entry: './main.js', output: filename: 'bundle.js';

 Ora possiamo solo digitare webpack e nient'altro per ottenere gli stessi risultati.

Server di sviluppo

Cos'è quello? Non puoi nemmeno preoccuparti di scrivere webpack ogni volta che cambi un file? Non lo so, la generazione di oggi ecc. Ecc. Ok, impostiamo un piccolo server di sviluppo per rendere le cose ancora più efficienti. Al terminale, scrivi:

npm installa webpack-dev-server -g

Quindi esegui il comando webpack-dev-Server. Ciò avvierà un semplice server Web in esecuzione, utilizzando la directory corrente come posizione da cui fornire i file. Aprire una nuova finestra del browser e visitare http: // localhost: 8080 / webpack-dev-server /. Se tutto va bene, vedrai qualcosa sulla falsariga di questo:

Ora, non solo abbiamo un piccolo server web qui, ne abbiamo uno che controlla il nostro codice per le modifiche. Se vede che abbiamo modificato un file, eseguirà automaticamente il comando webpack per raggruppare il nostro codice e aggiornare la pagina senza fare nulla. Tutto con configurazione zero.

Provalo, cambia il nome passato al di Ciao funzione e torna al browser per vedere la modifica applicata immediatamente.

caricatori

Una delle funzionalità più importanti di Webpack è Loaders. I caricatori sono analoghi alle "attività" in Grunt e Gulp. Prendono essenzialmente i file e li trasformano in qualche modo prima di essere inclusi nel nostro codice in bundle. 

Diciamo che volevamo usare alcune delle sottigliezze di ES2015 nel nostro codice. ES2015 è una nuova versione di JavaScript che non è supportata in tutti i browser, quindi è necessario utilizzare un caricatore per trasformare il nostro codice ES2015 in un semplice codice ES5 vecchio che è supportato. Per fare questo, usiamo il popolare caricatore Babel che, secondo le istruzioni, installiamo in questo modo:

npm installa babel-loader babel-core babel-preset-es2015 --save-dev

Questo installa non solo il caricatore stesso ma le sue dipendenze e un preset ES2015 come Babel ha bisogno di sapere che tipo di JavaScript sta convertendo.

Ora che il caricatore è installato, dobbiamo solo dire a Babel di usarlo. Aggiornare webpack.config.js così sembra:

module.exports = entry: './main.js', output: nome file: 'bundle.js', modulo: loaders: [test: /\.js$/, exclude: / node_modules /, loader : 'babele', query: preimpostazioni: ['es2015']],;

Ci sono alcune cose importanti da notare qui. Il primo è la linea test: /\.js$/, che è un'espressione regolare che ci dice di applicare questo caricatore a tutti i file con a .js estensione. allo stesso modo escludi: / node_modules / dice a Webpack di ignorare il node_modules elenco.  caricatore e domanda sono abbastanza auto-esplicativi: usa il caricatore Babel con il preset ES2015.

Riavvia il tuo server web premendo Ctrl + C e in esecuzione webpack-dev-Server ancora. Tutto quello che dobbiamo fare ora è usare del codice ES6 per testare la trasformazione. Che ne dici di cambiare il nostro di Ciao variabile per essere una costante?

const sayHello = require ('./ say-hello')

Dopo il salvataggio, Webpack avrebbe dovuto ricompilare automaticamente il codice e aggiornare il browser. Spero che non vedrai alcun cambiamento. Dai un'occhiata bundle.js e vedi se riesci a trovare il const parola chiave. Se Webpack e Babel hanno fatto il loro lavoro, non lo vedrai da nessuna parte, semplicemente il vecchio JavaScript.

Alla parte 2

Nella parte 2 di questo tutorial, vedremo l'uso di Webpack per aggiungere CSS e immagini alla tua pagina, oltre a rendere il tuo sito pronto per l'implementazione.