Prima di parlare del Webpack Loader, ti ricordiamo che puoi trovare la repository di tutto quello sviluppato al seguente link. Inoltre, i branch saranno numerati in base alla lezione. Il branch relativo a quest’articolo è il seguente: webpack_course_003.
Puoi switchare nel branch relativo a quest’articolo con il comando: git checkout webpack_course_003
Come imparare ad usare i Loader di Webpack
L’obiettivo di questa lezione è imparare ad usare i Loader di Webpack. Possiamo descriverli come delle funzioni che applicano delle trasformazioni al nostro codice. Qui vedremo come sfruttarli per poter usare il linguaggio CSS nel nostro progetto.
Iniziamo con il creare un file chiamato style.css all’interno della cartella src/.
Fatto questo, avremo una struttura delle cartelle identica a questa:
- NOME_PROGETTO
- package.json
- package-lock.json
- .gitignore
- webpack.config.js
- dist/
- index.html
- src/
- index.js
- style.css
All’interno del file style.css creiamo una semplice classe CSS, come nell’immagine sotto:
.yellow {
color: yellow;
}cerchiamo poi di importarla nel file index.js, in questo modo:
import './style.css'; // --> import del file css
function drawComponent() {
// crea un elemento HTML
const element = document.createElement('div');
}Se provassimo ad effettuare una build, riceveremmo un errore in compilazione, come indicato qui di seguito:
ERROR in ./src/style.css 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configure
> .red {
| color: red;
| }L’errore è anche molto chiaro in quanto indica direttamente che serve un particolare Loader per gestire questo tipo di file all’interno di file JavaScript.
Quali Loader installare nei file CSS
Nel caso dei file CSS i loader da installare sono due:
- style-loader
- css-loader
npm install css-loader style-loader --save-devDopo averli installati come dev dependency del progetto, possiamo iniziare ad usarli.
Per poterlo fare occorre modificare il webpack.config aggiungendo la seguente proprietà:
module: {
rules: [
{
test: /\.css$/, // --> Regex per caricare solo file CSS
use: ['style-loader', 'css-loader'] // --> Loader da usare e in che ordine
}
]
}Come puoi vedere abbiamo aggiunto la proprietà module che contiene all’interno delle regole (rules). Le regole conterranno l’elenco dei Loader da utilizzare.
La proprietà test conterrà la regex, che individua i di file da gestire in base alla loro estensione, mentre l’array use conterrà i loader da utilizzare per quei file individuati.
Cosa estremamente importante riguardo i Loader è il loro ordine di esecuzione, il quale è inverso rispetto all’ordine in cui sono elencati.
Per intenderci:
{
test: /\.css$/,
use: [
'style-loader', // verrà eseguito per secondo
'css-loader' // verrà eseguito per primo
]
}L’ordine di lettura dei Loader è importante al fine di un corretto funzionamento; in questo caso il css-loader si occupa di convertire il codice css in codice Javascript, in modo da poterlo importare correttamente dentro il file index.js e, solo successivamente, lo style-loader si occuperà di prendere il codice css prima convertito e iniettarlo nel DOM creando un tag style apposito.
Infatti, se ora provassimo ad assegnare la classe Css nel file index.js in questo modo
// Aggiunge la classe CSS create nel file style.css
element.classList.add('red');e, successivamente, a fare una build, finalmente vedremmo lo stile applicato correttamente e il colore cambiato.
Ora il progetto è configurato per gestire file CSS, ma abbiamo tanti altri Loader disponibili per gestire Immagini, Json, Xml, font e tanti altri! Bisogna solo cercare quelli giusti, installarli (seguendo la procedura spiegata prima) e configurarli nel Webpack.config.
Nel prossimo articolo vedremo cosa sono e come usare i Plugin. Stay Tuned e alla prossima lezione!
