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…
Essere uno sviluppatore web vuol dire imparare più linguaggi di programmazione per poter creare diversi tipi di applicazioni.  Per ogni applicazione, la maggior parte delle volte, …
Un buon programmatore, si sa, necessita di un ampio bagaglio di conoscenze per potersi districare tra le difficoltà che questo mestiere comporta. Oggi le richieste sul mercato sono molteplic…
La programmazione JavaScript ha subito un forte cambiamento con l’introduzione di Node.js, che è subito diventato un requisito fondamentale nello sviluppo di un’app in linguaggio JavaScript lato …
Qualsiasi programmatore informatico che si rispetti, ne abbiamo parlato tante volte, possiede una buona conoscenza dello strumento GitHub. Ad oggi, risulta essere un requisito spesso e volentieri nece…
Il frontend è una parte fondamentale dello sviluppo di siti web. Il ruolo dello sviluppatore front end è, ad oggi, una figura sempre più ricercata e diffusa, grazie all’ampio mercato che il web d…

Seguici su Facebook

Scopri di più sul corso Hackademy

Inizia la tua nuova carriera nel mondo digital e tech.

Candidati ora

Scopriamo insieme se i nostri corsi fanno per te. Compila il form e aspetta la chiamata di uno dei nostri consulenti.

Pagamento rateale

Valore della rata: A PARTIRE DA 112 €/mese.

Esempio di finanziamento  

Importo finanziato: € 2440 in 24 rate da € 112 – TAN fisso 9,37% TAEG 12,57% – importo totale del credito € 2788,68.

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/07/2023 al 31/12/2023.

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 183 €/mese.

Esempio di finanziamento 

Importo finanziato: € 3990 in 24 rate da € 183 – TAN fisso 9,37% TAEG 12,57% – importo totale del credito € 4496,56.

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/07/2023 al 31/12/2023.

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.