Share
Nel tutorial precedente abbiamo appreso come impostare un progetto Webpack e come utilizzare i caricatori per elaborare il nostro JavaScript. Dove veramente brilla Webpack, tuttavia, è nella sua capacità di raggruppare altri tipi di risorse statiche come CSS e immagini e includerle nel nostro progetto solo quando sono richieste. Iniziamo aggiungendo alcuni stili alla nostra pagina.
Per prima cosa, crea un normale file CSS in una directory di stili. Chiamare main.css e aggiungere una regola di stile per l'elemento di intestazione.
h2 background: blu; colore: giallo;
Quindi, come possiamo ottenere questo foglio di stile nella nostra pagina? Bene, come la maggior parte delle cose con Webpack, avremo bisogno di un altro caricatore. Due in effetti: css-loader e style-loader. Il primo legge tutti gli stili dai nostri file CSS, mentre l'altro inietta detti stili nella nostra pagina HTML. Installali in questo modo:
npm installa il caricatore di stili css-loader
Quindi, diciamo a Webpack come usarli. Nel webpack.config.js, dobbiamo aggiungere un altro oggetto alla serie di caricatori. In esso vogliamo aggiungere un test per abbinare solo i file CSS e specificare quali caricatori usare.
test: /\.css$/, exclude: / node_modules /, loader: 'style! css'
La parte interessante di questo snippet di codice è il '! Css stile' linea. I caricatori vengono letti da destra a sinistra, quindi questo dice a Webpack di leggere prima gli stili di qualsiasi file che termina in .css, e poi iniettare quegli stili nella nostra pagina.
Poiché abbiamo aggiornato il nostro file di configurazione, sarà necessario riavviare il server di sviluppo affinché le modifiche vengano riprese. Uso Ctrl + C per fermare il server e webpack-dev-Server per ricominciare.
Tutto ciò che dobbiamo fare ora è richiedere il nostro foglio di stile all'interno del nostro main.js file. Lo facciamo allo stesso modo di qualsiasi altro modulo JavaScript:
Accentsconagua
const sayHello = require ('./ say-hello'); require (' ./ stili / main.css'); sayHello ('Guybrush', document.querySelector ('h2'));Nota come non abbiamo nemmeno toccato index.html. Apri il browser per vedere la pagina con stile h2. Cambia il colore dell'intestazione nel tuo foglio di stile per vederlo istantaneamente aggiornato senza un aggiornamento. Bello.
"Ma nessuno usa i CSS in questi giorni, nonno! È tutto su Sass". Ovviamente è. Fortunatamente Webpack ha un caricatore per fare proprio la cosa. Installalo insieme alla versione del nodo di Sass usando:
npm installa sass-loader node-sass
Quindi aggiornare webpack.config.js:
test: /\scss$/, exclude: / node_modules /, loader: 'style! css! sass'
Questo ora sta dicendo che per ogni file che termina con .SCSS, converti il Sass in semplice CSS, leggi gli stili dal CSS e poi inserisci gli stili nella pagina. Ricorda di rinominare main.css a main.scss, e richiede invece il file appena nominato. Prima alcuni Sass:
$ background: blu; h2 background: $ background; colore: giallo;
Quindi main.js:
require (' ./ stili / main.scss');Super. È così facile. Nessuna conversione e salvataggio di file o persino la visualizzazione di cartelle. Richiediamo solo nei nostri stili Sass direttamente.
"Allora immagini, caricatori, scommetto?" Ovviamente! Con le immagini, vogliamo usare l'url-loader. Questo caricatore prende l'URL relativo della tua immagine e aggiorna il percorso in modo che sia correttamente incluso nel pacchetto di file. Come al solito:
npm installa url-loader
Ora proviamo qualcosa di diverso nel nostro webpack.config.js. Aggiungi un'altra voce alla serie di caricatori nel solito modo, ma questa volta vogliamo che l'espressione regolare corrisponda alle immagini con diverse estensioni di file:
test: /\.(jpg|png|gif)$/, include: / images /, loader: 'url'
Nota l'altra differenza qui. Non stiamo usando il escludere chiave. Invece stiamo usando includere. Questo è più efficiente in quanto dice a webpack di ignorare tutto ciò che non corrisponde a una cartella chiamata "images".
Di solito utilizzerai una sorta di sistema di template per creare le tue viste HTML, ma lo terremo in ordine e creeremo un tag immagine in JavaScript alla vecchia maniera. Per prima cosa create un elemento immagine, impostate l'immagine richiesta sull'attributo src e quindi aggiungete l'elemento alla pagina.
var imgElement = document.createElement ('img'); imgElement.src = require ('./ images / my-image.jpg'); document.body.appendChild (imgElement);Torna al tuo browser per vedere la tua immagine apparire davanti ai tuoi occhi!
Un altro compito comunemente svolto durante lo sviluppo è la linting. Linting è un modo per cercare potenziali errori nel codice e verificare di aver seguito determinate convenzioni di codifica. Le cose che potresti voler cercare sono "Ho usato una variabile senza prima dichiararla?" oppure "Ho dimenticato un punto e virgola alla fine di una riga?" Applicando queste regole, siamo in grado di estirpare bug stupidi nella fase iniziale.
JSHint è uno strumento popolare per sfilacciare. Questo guarda al nostro codice e mette in evidenza i potenziali errori che abbiamo commesso. JSHint può essere eseguito manualmente dalla riga di comando, ma diventa rapidamente un problema durante lo sviluppo. Idealmente vorremmo che fosse eseguito automaticamente ogni volta che salviamo un file. Il nostro server Webpack sta già controllando i cambiamenti, quindi sì, avete indovinato, un altro caricatore.
Installa il jshint-loader nel solito modo:
npm installa jshint-loader
Ancora una volta dobbiamo dire a Webpack di usarlo aggiungendolo al nostro webpack.config.js. Tuttavia, questo caricatore è leggermente diverso. In realtà non sta trasformando alcun codice: è solo dare un'occhiata. Inoltre, non vogliamo che tutti i nostri caricatori di modifica del codice più pesanti eseguano e falliscano solo perché abbiamo dimenticato un punto e virgola. È qui che entrano i precaricatori. Un preloader è qualsiasi programma di caricamento che specifichiamo di eseguire prima delle nostre attività principali. Sono aggiunti al nostro webpack.conf.js in modo simile ai caricatori.
module: preLoaders: [test: /\.js$/, exclude: / node_modules /, loader: 'jshint'], caricatori: [...]
Ora il nostro processo di sfilacciamento si avvia e fallisce immediatamente se viene rilevato un problema. Prima di riavviare il nostro server web, dobbiamo dire a JSHint che stiamo usando ES6, altrimenti fallirà quando vedrà il const parola chiave che stiamo usando.
Dopo la chiave del modulo nella nostra configurazione, aggiungi un'altra voce chiamata "jshint" e una linea per specificare la versione di JavaScript.
modulo: preLoaders: [...], caricatori: [...], jshint: esversion: 6
Salva il file e riavvia webpack-dev-Server. Funzionando bene? Grande. Questo significa che il tuo codice non contiene errori. Introduciamo uno rimuovendo un punto e virgola da questa linea:
var imgElement = document.createElement ('img')Di nuovo, salva il file e guarda il terminale. Ora otteniamo questo:
ATTENZIONE in ./main.js jshint genera errori Punto e virgola mancante. @ line 7 char 47
Grazie, JSHint!
Ora che siamo felici, il nostro codice è in forma e fa tutto ciò che vogliamo, abbiamo bisogno di prepararlo per il mondo reale. Una delle cose più comuni da fare quando si mette in pratica il codice è di minimizzarlo, concatenando tutti i file in uno e poi comprimendolo nel file più piccolo possibile. Prima di continuare, dai un'occhiata al tuo attuale bundle.js. È leggibile, ha molti spazi bianchi ed ha una dimensione di 32kb.
"Aspetta, non dirmelo, un altro caricatore, giusto?" No! In questa rara occasione, non abbiamo bisogno di un caricatore. Il Webpack ha una minificazione integrata. Quando sei soddisfatto del tuo codice, esegui semplicemente questo comando:
webpack -p
Il -p flag dice a Webpack per ottenere il nostro codice pronto per la produzione. Quando genera il pacchetto, ottimizza il più possibile. Dopo aver eseguito questo comando, apri bundle.js e vedrai che è stato tutto sommato, e che anche con una quantità così piccola di codice abbiamo salvato 10kb.
Spero che questo tutorial in due parti ti abbia dato abbastanza sicurezza per usare Webpack nei tuoi progetti. Ricorda, se c'è qualcosa che vuoi fare nel tuo processo di compilazione, allora è molto probabile che Webpack abbia un caricatore per questo. Tutti i caricatori vengono installati tramite npm, quindi dai un'occhiata qui per vedere se qualcuno ha già realizzato ciò che ti serve.
Divertiti!
