CONTATTACI

Blog

Webpack Loader

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-dev

Dopo 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!

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.