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.
