Introducció

Els loaders són una part fonamental de Webpack, ja que permeten transformar fitxers de diferents tipus (com ara CSS, imatges, fonts, etc.) en mòduls que Webpack pot processar. Els loaders actuen com a transformadors de fitxers, convertint-los en mòduls que poden ser inclosos en el bundle final.

Conceptes Clau

Loader: Un mòdul que transforma fitxers d'un format a un altre.
Chain of Loaders: Una seqüència de loaders que es poden aplicar a un fitxer.
Test: Una expressió regular que indica quins fitxers seran processats pel loader.
Use: Especifica quin loader o loaders s'utilitzaran per processar els fitxers que coincideixin amb el test.

Configuració Bàsica

Per configurar un loader, cal afegir una entrada a l'array module.rules del fitxer de configuració de Webpack (webpack.config.js). A continuació es mostra un exemple bàsic de configuració per a un loader que processa fitxers CSS:

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/, // Expressió regular per als fitxers CSS
        use: [
          'style-loader', // Afegeix CSS al DOM injectant un <style> tag
          'css-loader'    // Interpreta @import i url() com a importacions de mòduls
        ]
      }
    ]
  }
};

Explicació del Codi

test: /\.css$/: Aquesta expressió regular indica que tots els fitxers amb extensió .css seran processats per aquest loader.
use: ['style-loader', 'css-loader']: Aquesta és una cadena de loaders. Primer, css-loader processa el fitxer CSS i després style-loader l'injecta al DOM.

Exemples Pràctics

Processar Fitxers d'Imatge

Per processar fitxers d'imatge (com ara .png, .jpg, .gif), podem utilitzar el file-loader:

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/, // Expressió regular per als fitxers d'imatge
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[path][name].[ext]', // Manté el nom i la ruta originals
            },
          },
        ],
      },
    ],
  },
};

Processar Fitxers SCSS

Per processar fitxers SCSS, necessitem sass-loader, css-loader i style-loader:

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/, // Expressió regular per als fitxers SCSS
        use: [
          'style-loader', // Afegeix CSS al DOM
          'css-loader',   // Interpreta @import i url() com a importacions de mòduls
          'sass-loader'   // Compila SCSS a CSS
        ]
      }
    ]
  }
};

Exercicis Pràctics

Exercici 1: Configurar un Loader per a Fonts

Configura un loader per processar fitxers de fonts (.woff, .woff2, .eot, .ttf, .otf).

Solució

module.exports = {
  module: {
    rules: [
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/, // Expressió regular per als fitxers de fonts
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[path][name].[ext]', // Manté el nom i la ruta originals
            },
          },
        ],
      },
    ],
  },
};

Exercici 2: Configurar un Loader per a Fitxers JSON

Configura un loader per processar fitxers JSON.

Solució

module.exports = {
  module: {
    rules: [
      {
        test: /\.json$/, // Expressió regular per als fitxers JSON
        use: [
          {
            loader: 'json-loader',
          },
        ],
      },
    ],
  },
};

Errors Comuns i Consells

Error: "Module not found": Assegura't que el loader està instal·lat correctament. Pots instal·lar loaders amb npm, per exemple: npm install --save-dev css-loader style-loader.
Ordre dels Loaders: L'ordre dels loaders en la cadena és important. Els loaders s'apliquen de dreta a esquerra, així que assegura't que l'ordre sigui correcte.

Resum

Els loaders són essencials per transformar diferents tipus de fitxers en mòduls que Webpack pot processar. Hem vist com configurar loaders per a CSS, imatges, SCSS, fonts i JSON, i hem proporcionat exercicis pràctics per reforçar aquests conceptes. Amb aquesta base, estàs preparat per explorar més loaders i personalitzar la teva configuració de Webpack segons les necessitats del teu projecte.

Loaders

Introducció

Conceptes Clau

Configuració Bàsica

Explicació del Codi

Exemples Pràctics

Processar Fitxers d'Imatge

Processar Fitxers SCSS

Exercicis Pràctics

Exercici 1: Configurar un Loader per a Fonts

Solució

Exercici 2: Configurar un Loader per a Fitxers JSON

Solució

Errors Comuns i Consells

Resum

Curs de Webpack

Mòdul 1: Introducció a Webpack

Mòdul 2: Conceptes Bàsics

Mòdul 3: Configuració Avançada

Mòdul 4: Eines de Desenvolupament

Mòdul 5: Optimització per a Producció

Mòdul 6: Integracions i Tècniques Avançades

Mòdul 7: Projectes del Món Real

Mòdul 8: Resolució de Problemes i Millors Pràctiques