Webpack Plugin

Webpack Plugin

Giuseppe Speranza Di Giuseppe Speranza


webpack plugin corso di programmazione

Come sempre vi ricordo che la repository di tutto quello sviluppato potete trovarla 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 vi rimando alla pagina ufficiale che trovate a questo link.

Html-Webpack-Plugin

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

Se ricordate, a inizio serie, ho 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 mostro 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 potete vedere mi è 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 inoltre 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 nella nostra cartella di di distribuzione contiene file aggiuntivi inutili; come potete 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:

Avete fatto caso 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, potrete 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. Immaginate di voler cancellare qualsiasi console.log nella build di produzione, per assolvere questo compito si può facilmente creare un plugin che elimina 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.

Impara a programmare in 3 mesi con il Corso di Coding Hackademy su Laravel PHP

Diventa Sviluppatore web in 3 mesi

Scopri il coding bootcamp Hackademy

Programma Completo