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

Configuració de Webpack

Següent ►
►

En aquesta secció, aprendrem com configurar Webpack des de zero. Això inclou la instal·lació de Webpack i la creació d'un fitxer de configuració bàsic. Aquest és un pas fonamental per començar a utilitzar Webpack en els teus projectes.

  1. Instal·lació de Webpack

Prerequisits

Abans de començar, assegura't de tenir instal·lat Node.js i npm (Node Package Manager) al teu sistema. Pots descarregar-los des de nodejs.org.

Instal·lació de Webpack i Webpack CLI

Per instal·lar Webpack i Webpack CLI (Command Line Interface), obre el terminal i executa les següents comandes:

npm install --save-dev webpack webpack-cli

Aquesta comanda instal·larà Webpack i Webpack CLI com a dependències de desenvolupament en el teu projecte.

  1. Creació del Fitxer de Configuració

El fitxer de configuració de Webpack és on definim com volem que Webpack processi els nostres fitxers. Per defecte, Webpack busca un fitxer anomenat webpack.config.js a l'arrel del projecte.

Exemple de Fitxer de Configuració Bàsic

Crea un fitxer anomenat webpack.config.js a l'arrel del teu projecte i afegeix el següent codi:

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
  },
  mode: 'development' // Mode de desenvolupament
};

Explicació del Codi

  • entry: Defineix el punt d'entrada del teu projecte. En aquest cas, és ./src/index.js.
  • output: Defineix el fitxer de sortida i el directori on es guardarà. Aquí, el fitxer de sortida es diu bundle.js i es guardarà en el directori dist.
  • mode: Defineix el mode en què s'executarà Webpack. Pot ser development (desenvolupament) o production (producció).

  1. Estructura del Projecte

Assegura't que la teva estructura de projectes sigui similar a la següent:

my-webpack-project/
├── dist/
├── src/
│   └── index.js
├── package.json
└── webpack.config.js
  • dist/: Directori on es guardarà el fitxer de sortida.
  • src/: Directori que conté el codi font del teu projecte.
  • index.js: Fitxer d'entrada del teu projecte.
  • package.json: Fitxer de configuració de npm.
  • webpack.config.js: Fitxer de configuració de Webpack.

  1. Executar Webpack

Per executar Webpack i generar el fitxer de sortida, afegeix el següent script al teu package.json:

"scripts": {
  "build": "webpack"
}

Ara, pots executar Webpack amb la següent comanda:

npm run build

Aquesta comanda crearà el fitxer bundle.js en el directori dist.

Exercici Pràctic

Objectiu

Configurar Webpack en un projecte nou i generar un fitxer de sortida.

Passos

  1. Crea un nou directori per al teu projecte.
  2. Inicialitza un nou projecte npm amb npm init -y.
  3. Instal·la Webpack i Webpack CLI amb npm install --save-dev webpack webpack-cli.
  4. Crea un fitxer webpack.config.js amb la configuració bàsica.
  5. Crea un directori src i un fitxer index.js dins d'aquest directori.
  6. Afegeix un script build al teu package.json.
  7. Executa npm run build i verifica que el fitxer bundle.js es genera en el directori dist.

Solució

  1. Crear el directori del projecte i inicialitzar npm:
mkdir my-webpack-project
cd my-webpack-project
npm init -y
  1. Instal·lar Webpack i Webpack CLI:
npm install --save-dev webpack webpack-cli
  1. Crear el fitxer webpack.config.js:
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  mode: 'development'
};
  1. Crear el directori src i el fitxer index.js:
mkdir src
echo "console.log('Hello, Webpack!');" > src/index.js
  1. Afegeix el script build al package.json:
"scripts": {
  "build": "webpack"
}
  1. Executar Webpack:
npm run build

Després d'executar aquests passos, hauries de veure el fitxer bundle.js en el directori dist.

Conclusió

En aquesta secció, hem après com instal·lar i configurar Webpack en un projecte nou. Hem creat un fitxer de configuració bàsic i hem generat un fitxer de sortida utilitzant Webpack. Aquest és el primer pas per començar a utilitzar Webpack en els teus projectes de desenvolupament web. En les següents seccions, explorarem més funcions i configuracions avançades de Webpack.

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