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

Plugins i Loaders Personalitzats

Següent ►
►

En aquest tema, aprendrem com crear els nostres propis plugins i loaders per a Webpack. Els plugins i loaders personalitzats ens permeten estendre la funcionalitat de Webpack per adaptar-se a les necessitats específiques del nostre projecte.

Continguts

  1. Introducció als Plugins i Loaders
  2. Creació d'un Loader Personalitzat
  3. Creació d'un Plugin Personalitzat
  4. Exemples Pràctics
  5. Exercicis Pràctics
  6. Conclusió

Introducció als Plugins i Loaders

Què són els Loaders?

Els loaders permeten a Webpack processar fitxers que no són JavaScript pur. Per exemple, podem utilitzar loaders per transformar fitxers TypeScript en JavaScript, o per carregar fitxers CSS.

Què són els Plugins?

Els plugins són utilitzats per realitzar tasques més complexes que no poden ser aconseguides només amb loaders. Poden fer qualsevol cosa des de l'optimització de bundles fins a la injecció de variables globals.

Creació d'un Loader Personalitzat

Passos per Crear un Loader

  1. Crear el fitxer del loader: El loader és una funció que rep el contingut del fitxer com a entrada i retorna el contingut transformat.
  2. Configurar Webpack per utilitzar el loader: Afegir el loader a la configuració de Webpack.

Exemple de Loader

// my-loader.js
module.exports = function(source) {
  // Transformar el contingut del fitxer
  const transformedSource = source.replace(/console\.log\(/g, 'console.warn(');
  return transformedSource;
};

Configuració de Webpack

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          {
            loader: path.resolve('path/to/my-loader.js')
          }
        ]
      }
    ]
  }
};

Creació d'un Plugin Personalitzat

Passos per Crear un Plugin

  1. Crear el fitxer del plugin: El plugin és una classe que implementa el mètode apply.
  2. Configurar Webpack per utilitzar el plugin: Afegir el plugin a la configuració de Webpack.

Exemple de Plugin

// my-plugin.js
class MyPlugin {
  apply(compiler) {
    compiler.hooks.done.tap('MyPlugin', (stats) => {
      console.log('Compilació completada!');
    });
  }
}

module.exports = MyPlugin;

Configuració de Webpack

// webpack.config.js
const MyPlugin = require('./path/to/my-plugin.js');

module.exports = {
  plugins: [
    new MyPlugin()
  ]
};

Exemples Pràctics

Loader per Convertir Text a Majúscules

// uppercase-loader.js
module.exports = function(source) {
  return source.toUpperCase();
};

Plugin per Afegir un Banner al Bundle

// banner-plugin.js
class BannerPlugin {
  constructor(options) {
    this.banner = options.banner;
  }

  apply(compiler) {
    compiler.hooks.emit.tapAsync('BannerPlugin', (compilation, callback) => {
      for (const filename in compilation.assets) {
        if (compilation.assets.hasOwnProperty(filename)) {
          const source = compilation.assets[filename].source();
          const banner = `/* ${this.banner} */\n`;
          compilation.assets[filename] = {
            source: () => banner + source,
            size: () => banner.length + source.length
          };
        }
      }
      callback();
    });
  }
}

module.exports = BannerPlugin;

Configuració de Webpack

// webpack.config.js
const BannerPlugin = require('./path/to/banner-plugin.js');

module.exports = {
  module: {
    rules: [
      {
        test: /\.txt$/,
        use: [
          {
            loader: path.resolve('path/to/uppercase-loader.js')
          }
        ]
      }
    ]
  },
  plugins: [
    new BannerPlugin({ banner: 'Aquest és un banner personalitzat' })
  ]
};

Exercicis Pràctics

Exercici 1: Crear un Loader per Minificar HTML

Descripció: Crea un loader que elimini els espais en blanc innecessaris d'un fitxer HTML.

Solució:

// minify-html-loader.js
module.exports = function(source) {
  return source.replace(/\s+/g, ' ').trim();
};

Exercici 2: Crear un Plugin per Registrar el Temps de Compilació

Descripció: Crea un plugin que registri el temps que triga la compilació de Webpack.

Solució:

// time-logger-plugin.js
class TimeLoggerPlugin {
  apply(compiler) {
    compiler.hooks.compile.tap('TimeLoggerPlugin', () => {
      this.startTime = Date.now();
    });

    compiler.hooks.done.tap('TimeLoggerPlugin', () => {
      const endTime = Date.now();
      const time = endTime - this.startTime;
      console.log(`Temps de compilació: ${time}ms`);
    });
  }
}

module.exports = TimeLoggerPlugin;

Conclusió

En aquest tema, hem après com crear loaders i plugins personalitzats per a Webpack. Els loaders ens permeten transformar fitxers abans de ser inclosos en el bundle, mentre que els plugins ens permeten estendre la funcionalitat de Webpack de maneres més complexes. Amb aquests coneixements, podem adaptar Webpack a les necessitats específiques dels nostres projectes, millorant així el nostre flux de treball i la qualitat del nostre codi.

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