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

Fitxer de Configuració de Webpack

Següent ►
►

En aquest tema, aprendrem a crear i entendre el fitxer de configuració de Webpack, que és essencial per personalitzar el comportament de Webpack segons les necessitats del teu projecte.

Què és el Fitxer de Configuració de Webpack?

El fitxer de configuració de Webpack és un arxiu JavaScript que defineix com Webpack ha de construir el teu projecte. Aquest fitxer permet especificar punts d'entrada, sortides, loaders, plugins i altres opcions de configuració.

Creació del Fitxer de Configuració

Per començar, crea un fitxer anomenat webpack.config.js a l'arrel del teu projecte. Aquest fitxer contindrà la configuració de Webpack.

Estructura Bàsica del Fitxer de Configuració

A continuació, es mostra un exemple bàsic de webpack.config.js:

const path = require('path');

module.exports = {
  entry: './src/index.js', // Punt d'entrada
  output: {
    filename: 'bundle.js', // Nom del fitxer de sortida
    path: path.resolve(__dirname, 'dist') // Directori de sortida
  },
  module: {
    rules: [
      {
        test: /\.css$/, // Expressió regular per identificar fitxers CSS
        use: ['style-loader', 'css-loader'] // Loaders per processar fitxers CSS
      }
    ]
  },
  plugins: [
    // Aquí es poden afegir plugins
  ],
  mode: 'development' // Mode de desenvolupament
};

Explicació del Codi

  1. Importació del Mòdul path:

    const path = require('path');

    Utilitzem el mòdul path de Node.js per treballar amb rutes de fitxers.

  2. Exportació de la Configuració:

    module.exports = {
  // Configuració aquí
};

    Exportem un objecte de configuració que Webpack utilitzarà.

  3. Punt d'Entrada:

    entry: './src/index.js',

    Defineix el fitxer d'entrada principal del teu projecte.

  4. Sortida:

    output: {
  filename: 'bundle.js',
  path: path.resolve(__dirname, 'dist')
},

    Especifica el nom del fitxer de sortida i el directori on es guardarà.

  5. Loaders:

    module: {
  rules: [
    {
      test: /\.css$/,
      use: ['style-loader', 'css-loader']
    }
  ]
},

    Defineix les regles per processar diferents tipus de fitxers. En aquest cas, estem utilitzant style-loader i css-loader per processar fitxers CSS.

  6. Plugins:

    plugins: [
  // Aquí es poden afegir plugins
],

    Aquí es poden afegir plugins per estendre la funcionalitat de Webpack.

  7. Mode:

    mode: 'development'

    Defineix el mode de Webpack (development o production).

Exemple Pràctic

Pas 1: Crear l'Estructura del Projecte

Crea l'estructura següent per al teu projecte:

my-webpack-project/
├── dist/
├── src/
│   └── index.js
├── package.json
└── webpack.config.js

Pas 2: Instal·lar les Dependències

Executa les següents comandes per instal·lar Webpack i els loaders necessaris:

npm install --save-dev webpack webpack-cli style-loader css-loader

Pas 3: Escriure el Codi

src/index.js

import './style.css';

console.log('Hola, Webpack!');

src/style.css

body {
  background-color: lightblue;
}

webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  },
  mode: 'development'
};

Pas 4: Construir el Projecte

Executa la següent comanda per construir el projecte:

npx webpack

Això generarà un fitxer bundle.js al directori dist.

Exercici Pràctic

Exercici

  1. Crea un fitxer webpack.config.js per un projecte que tingui els següents requisits:
    • Punt d'entrada: src/app.js
    • Fitxer de sortida: main.js al directori build
    • Processar fitxers SCSS amb sass-loader, css-loader i style-loader
    • Mode de producció

Solució

const path = require('path');

module.exports = {
  entry: './src/app.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'build')
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader']
      }
    ]
  },
  mode: 'production'
};

Conclusió

En aquesta secció, hem après a crear i configurar un fitxer de configuració de Webpack. Hem vist com definir punts d'entrada, sortides, loaders i el mode de Webpack. Aquest coneixement és fonamental per personalitzar i optimitzar el procés de construcció del teu projecte amb Webpack. En el següent tema, explorarem com realitzar una construcció bàsica amb Webpack.

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