El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Plugins

Següent ►
►

Els plugins són una part fonamental de Webpack que permeten estendre les seves funcionalitats. Mentre que els loaders transformen els fitxers durant el procés de construcció, els plugins poden fer gairebé qualsevol cosa, des de l'optimització de paquets fins a la gestió d'entorns de desenvolupament.

Conceptes Clau

  1. Què són els plugins?

    • Els plugins són eines que poden intervenir en el procés de construcció de Webpack per realitzar tasques específiques.
    • Poden modificar el resultat final, optimitzar el codi, generar fitxers addicionals, etc.

  2. Com es configuren?

    • Els plugins es configuren dins del fitxer de configuració de Webpack (webpack.config.js).
    • Es defineixen dins de la propietat plugins, que és una matriu d'instàncies de plugins.

Exemples de Plugins Comuns

  1. HtmlWebpackPlugin

Aquest plugin genera un fitxer HTML que inclou automàticament tots els paquets generats per Webpack.

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist'
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ]
};

Explicació:

  • HtmlWebpackPlugin s'instal·la i es requereix al fitxer de configuració.
  • Es crea una nova instància del plugin i es passa un objecte de configuració.
  • template especifica el fitxer HTML de plantilla que s'utilitzarà.

  1. CleanWebpackPlugin

Aquest plugin neteja el directori de sortida abans de cada construcció, assegurant-se que només els fitxers necessaris estiguin presents.

const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist'
  },
  plugins: [
    new CleanWebpackPlugin()
  ]
};

Explicació:

  • CleanWebpackPlugin s'instal·la i es requereix al fitxer de configuració.
  • Es crea una nova instància del plugin sense cap configuració addicional.

  1. MiniCssExtractPlugin

Aquest plugin extreu el CSS en fitxers separats, en lloc d'incloure'ls dins del JavaScript.

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader']
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: '[id].css'
    })
  ]
};

Explicació:

  • MiniCssExtractPlugin s'instal·la i es requereix al fitxer de configuració.
  • Es defineix una regla per als fitxers CSS que utilitza el loader del plugin.
  • Es crea una nova instància del plugin amb configuracions per als noms dels fitxers CSS generats.

Exercicis Pràctics

Exercici 1: Utilitzar HtmlWebpackPlugin

Objectiu: Configurar HtmlWebpackPlugin per generar un fitxer HTML a partir d'una plantilla.

  1. Instal·la html-webpack-plugin:

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

  2. Crea un fitxer webpack.config.js amb la següent configuració:

    const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist'
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ]
};

  3. Crea un fitxer index.html dins de src amb el següent contingut:

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app"></div>
</body>
</html>

  4. Executa Webpack i verifica que el fitxer HTML generat a dist inclou el paquet JavaScript.

Exercici 2: Utilitzar CleanWebpackPlugin

Objectiu: Configurar CleanWebpackPlugin per netejar el directori de sortida abans de cada construcció.

  1. Instal·la clean-webpack-plugin:

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

  2. Modifica el fitxer webpack.config.js per incloure CleanWebpackPlugin:

    const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist'
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ]
};

  3. Executa Webpack diverses vegades i verifica que el directori dist es neteja abans de cada construcció.

Conclusió

Els plugins són una eina poderosa en Webpack que permeten personalitzar i optimitzar el procés de construcció de les aplicacions. Hem vist com configurar alguns dels plugins més comuns i com poden ajudar a millorar el flux de treball. En els següents mòduls, explorarem més plugins i tècniques avançades per treure el màxim profit de Webpack.

◄ Anterior
◄
Següent ►
►
El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats