CONTATTACI

Blog

Webpack Plugin

Come sempre 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 è webpack_course_004

Puoi switchare nel branch relativo a quest’articolo con il comando: git checkout webpack_course_004

Cosa sono i plugin e perché sono importanti in Webpack

In quest’articolo andremo a vedere cosa sono i plugin e perchè sono così importanti nell’ecosistema di Webpack. Con il loro utilizzo è possibile estendere le funzionalità di Webpack e gestire la fase di compilazione del progetto modificando o aggiungendo nuovi hook. Per ulteriori approfondimenti ti rimandiamo alla pagina ufficiale.

Html-Webpack-Plugin

Uno dei primi plugin che vogliamo mostrarti è Html-Webpack-Plugin: con il suo utilizzo, è possibile creare, automaticamente, la sezione degli import del file index.html.

Se ben ricordi, all' inizio di questa serie di articoli, abbiamo creato un file index.html e inserito un tag script nel body per importare il file Javascript buildato da webpack. 

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>;Corso Webpack Aulab</title>
   </head>
   <body>
       <script src="./bundle.js"></script> <!-- Import scritto manualmente -->
   </body>
</html>

Questo Plugin ci aiuta nella creazione del bundle e inserirà, automaticamente, i file Javascript che avremo inserito nella lista degli entry point all’interno del webpack.config. 

Per partire con il suo utilizzo installiamolo come dipendenza di sviluppo con il seguente comando:

npm install --save-dev clean-webpack-plugin

In seguito bisogna registrarlo all’interno del webpack.config. Per registrare dei Plugin bisogna creare una nuova voce chiamata appunto Plugin. Nell’immagine seguente mostriamo come deve apparire il webpack.config aggiornato con il nuovo plugin:

const path = require('path'); // funzione fornita da Node.js
const HtmlWebpackPlugin = require('html-webpack-plugin'); // Import del Plugin

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    filename: 'bundle.js', // file generato per il bundle
    path: path.resolve(__dirname, 'dist'),
   },
   plugins: [
     new HtmlWebpackPlugin() // Registrazione del Plugin
   ],
   module: {
     rules: [
       {
         test: /\.css$/,
         use: ['style-loader', 'css-loader']
       }
     ]
   }
};

Come puoi vedere, ci è bastato importarlo con un require e, successivamente, registrarlo nella voce plugins! Da questo momento, basterà creare una nuova build per vedere il risultato; quindi, procediamo digitando npm run build nel terminale e andiamo a vedere come diventerà il file index.html:

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>Webpack App</title>
       <meta name="viewport" content=""width=device-width, initial-scale=1">
       <script src="./bundle.js"></script>
   </head>
   <body>
   </body>
</html>

Webpack ha aggiunto, automaticamente, lo script bundle.js e ha messo tutto su una riga per risparmiare un po’ di spazio. Se ci fossero stati entry points multipli, webpack avrebbe gestito automaticamente la creazione di ogni singolo file e il suo successivo import nell’index.html.

Clean-Webpack-Plugin

Un altro plugin molto utile è il Clean-Webpack-Plugin, utilizzato per rimuovere la cartella di distribuzione i file inutilizzati automaticamente. 

Ad esempio, attualmente la nostra cartella di di distribuzione contiene file aggiuntivi inutili; come puoi vedere nell'immagine qui di seguito, l’unico file utilizzato sarà il bundle.js, in quanto è l’unico ad esser stato configurato nel webpack.config.

Ora installiamo come dipendenza di sviluppo il CleanWebpackPlugin con il seguente comando:

npm install --save-dev html-webpack-plugin

e, come tutti gli altri plugin, registriamolo all’interno del webpack.config:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin'); // Import del Plugin

module.exports = {
  mode: 'development,
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  plugins: [
    new HtmlWebpackPlugin(),
    new CleanWebpackPlugin(), // Registrazione del Plugin
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  }
};

Dopo averlo registrato, per testarlo, bisogna avviare una nuova build digitando npm run build: in questo modo, la cartella di distribuzione diventerà come di seguito:

Hai notato che è stato rimosso il file inutilizzato (main.js)?

Webpack-Bundle-Analyzer 

Un altro plugin molto utile è il webpack bundle analyzer: con questo plugin, dopo averlo installato – sempre come dipendenza di sviluppo – e registrato nel webpack.config, potrai accedere ad una mappa interattiva di tutti i file che compongono la build e verificarne il loro peso. Molto utile per capire quanto, effettivamente, incidono le varie dipendenze nel progetto!

Ruolo dei Plugin

I Plugin ricoprono un ruolo estremamente importante nell’ecosistema di Webpack, consentono di manipolare a proprio piacimento le varie fasi del processo di Build personalizzandole anche a basso livello. Immagina di voler cancellare qualsiasi console.log nella build di produzione: per assolvere questo compito si può facilmente creare un plugin che elimini in fase di build finale tutti i console.log.

Inoltre, i plugin creati con Webpack possono essere integrati con qualsiasi altra applicazione partorita da un framework Javascript come Vue.js e React.

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.