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

Configuració de Sortida

Següent ►
►

En aquest tema, aprendrem com configurar la sortida de Webpack. La configuració de sortida és crucial perquè defineix com i on es generaran els fitxers compilats per Webpack. Això inclou el nom dels fitxers, el directori de sortida i altres opcions relacionades.

Objectius

  • Entendre la configuració bàsica de sortida en Webpack.
  • Aprendre a personalitzar el nom dels fitxers de sortida.
  • Configurar el directori de sortida.
  • Utilitzar plantilles de noms per a una millor gestió dels fitxers.

Configuració Bàsica de Sortida

La configuració de sortida es defineix a l'objecte output del fitxer de configuració de Webpack (webpack.config.js). Aquí teniu un exemple bàsic:

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

Explicació del Codi

  • filename: Defineix el nom del fitxer de sortida. En aquest cas, serà bundle.js.
  • path: Defineix el directori on es guardarà el fitxer de sortida. Utilitzem path.resolve per obtenir una ruta absoluta al directori dist.

Personalització del Nom dels Fitxers

Podem utilitzar plantilles de noms per personalitzar els noms dels fitxers de sortida. Això és especialment útil quan treballem amb múltiples punts d'entrada o quan volem incloure hash per a la gestió de caché.

Exemples de Plantilles de Noms

  • [name]: El nom del punt d'entrada.
  • [hash]: Un hash generat per Webpack.
  • [chunkhash]: Un hash basat en el contingut del chunk.
const path = require('path');

module.exports = {
  entry: {
    app: './src/app.js',
    vendor: './src/vendor.js'
  },
  output: {
    filename: '[name].[chunkhash].js',
    path: path.resolve(__dirname, 'dist')
  }
};

Explicació del Codi

  • entry: Definim dos punts d'entrada, app i vendor.
  • filename: Utilitzem [name].[chunkhash].js per generar noms de fitxers com app.abc123.js i vendor.def456.js.

Configuració del Directori de Sortida

El directori de sortida es defineix amb la propietat path. És important utilitzar una ruta absoluta per evitar errors.

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

Explicació del Codi

  • path.resolve(__dirname, 'dist'): Utilitzem path.resolve per obtenir una ruta absoluta al directori dist.

Exemples Pràctics

Exemple 1: Configuració Bàsica

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

Exemple 2: Utilitzant Plantilles de Noms

const path = require('path');

module.exports = {
  entry: {
    main: './src/main.js',
    vendor: './src/vendor.js'
  },
  output: {
    filename: '[name].[contenthash].js',
    path: path.resolve(__dirname, 'dist')
  }
};

Exemple 3: Configuració Avançada

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: '[name].[chunkhash].js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/assets/'
  }
};

Explicació del Codi

  • publicPath: Defineix el prefix URL per a tots els recursos de sortida. Això és útil quan els fitxers es serveixen des d'un servidor diferent o un CDN.

Exercicis Pràctics

Exercici 1: Configuració Bàsica

  1. Crea un fitxer webpack.config.js.
  2. Defineix un punt d'entrada ./src/index.js.
  3. Configura la sortida perquè el fitxer generat es digui main.js i es guardi al directori build.

Solució

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'build')
  }
};

Exercici 2: Utilitzant Plantilles de Noms

  1. Modifica la configuració anterior per utilitzar [name].[hash].js com a nom de fitxer.
  2. Defineix dos punts d'entrada: app i vendor.

Solució

const path = require('path');

module.exports = {
  entry: {
    app: './src/app.js',
    vendor: './src/vendor.js'
  },
  output: {
    filename: '[name].[hash].js',
    path: path.resolve(__dirname, 'build')
  }
};

Resum

En aquesta secció, hem après com configurar la sortida de Webpack. Hem vist com definir el nom dels fitxers de sortida, el directori de sortida i com utilitzar plantilles de noms per a una millor gestió dels fitxers. També hem practicat amb alguns exemples i exercicis per reforçar els conceptes apresos.

En el següent tema, explorarem els Loaders, que ens permeten transformar fitxers de diferents tipus abans d'incloure'ls en el bundle final.

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