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

Mode

Següent ►
►

En aquest tema, aprendrem sobre el concepte de "mode" en Webpack, que és una configuració clau per optimitzar el procés de construcció segons l'entorn en què es troba el projecte (desenvolupament o producció).

Què és el Mode en Webpack?

El mode en Webpack és una configuració que permet definir l'entorn en què s'està construint l'aplicació. Webpack ofereix tres modes diferents:

  1. development: Optimitza la construcció per a un entorn de desenvolupament.
  2. production: Optimitza la construcció per a un entorn de producció.
  3. none: No aplica cap optimització específica.

Configuració del Mode

El mode es pot configurar de manera molt senzilla en el fitxer de configuració de Webpack (webpack.config.js). A continuació, es mostra un exemple de com configurar el mode:

// webpack.config.js
module.exports = {
  mode: 'development', // o 'production' o 'none'
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist'
  }
};

Diferències entre Modes

A continuació, es detallen les diferències principals entre els modes de desenvolupament i producció:

Mode Característiques
development - Inclou mapes de fonts per a una millor depuració.
- No minifica el codi, facilitant la lectura i depuració.
- Habilita el hot module replacement per a una experiència de desenvolupament més ràpida.
production - Minifica el codi per reduir la mida dels fitxers.
- Habilita el tree shaking per eliminar codi no utilitzat.
- Inclou optimitzacions per a un millor rendiment.
none - No aplica cap optimització específica.

Exemple Pràctic

Vegem un exemple pràctic de com canviar el mode segons l'entorn:

// webpack.config.js
const path = require('path');

module.exports = (env, argv) => {
  return {
    mode: argv.mode || 'development',
    entry: './src/index.js',
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist')
    },
    devtool: argv.mode === 'development' ? 'source-map' : false,
  };
};

En aquest exemple, el mode es defineix segons l'argument passat a la línia de comandes (argv.mode). Si no es passa cap mode, per defecte serà development. També es configura devtool per habilitar els mapes de fonts només en mode de desenvolupament.

Exercici Pràctic

  1. Configura el mode en el teu projecte Webpack:

    • Crea un fitxer webpack.config.js si encara no el tens.
    • Configura el mode a development i comprova que els mapes de fonts estan habilitats.
    • Canvia el mode a production i comprova que el codi està minificat.

  2. Experimenta amb els diferents modes:

    • Crea un petit projecte amb un fitxer JavaScript senzill.
    • Configura Webpack per a cada mode (development, production, none) i observa les diferències en la sortida.

Solució de l'Exercici

// webpack.config.js
const path = require('path');

module.exports = (env, argv) => {
  return {
    mode: argv.mode || 'development',
    entry: './src/index.js',
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist')
    },
    devtool: argv.mode === 'development' ? 'source-map' : false,
  };
};

Per executar Webpack amb diferents modes, pots utilitzar les següents comandes:

# Mode desenvolupament
npx webpack --mode development

# Mode producció
npx webpack --mode production

# Mode cap
npx webpack --mode none

Conclusió

El mode en Webpack és una configuració essencial que permet optimitzar el procés de construcció segons l'entorn. Utilitzar el mode adequat pot millorar significativament l'experiència de desenvolupament i el rendiment de l'aplicació en producció. En el proper tema, explorarem els "Loaders", que permeten a Webpack processar diferents tipus de fitxers.

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