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

Construcció Bàsica amb Webpack

Següent ►
►

En aquesta secció, aprendrem a realitzar una construcció bàsica amb Webpack. Això inclou la creació d'un fitxer de configuració senzill, la definició dels punts d'entrada i sortida, i l'execució de Webpack per generar els fitxers de sortida.

  1. Configuració Inicial

Instal·lació de Webpack i Webpack CLI

Primer, necessitem instal·lar Webpack i Webpack CLI com a dependències de desenvolupament en el nostre projecte. Obre el terminal i executa les següents comandes:

npm install --save-dev webpack webpack-cli

Estructura del Projecte

Crea l'estructura bàsica del projecte amb els següents fitxers i directoris:

my-webpack-project/
├── src/
│   └── index.js
├── dist/
├── package.json
└── webpack.config.js
  • src/index.js: El nostre fitxer d'entrada principal.
  • dist/: El directori on es generaran els fitxers de sortida.
  • webpack.config.js: El fitxer de configuració de Webpack.

  1. Creació del Fitxer de Configuració

El fitxer webpack.config.js és on definirem la configuració bàsica per a Webpack. Crea aquest fitxer a l'arrel del projecte amb el següent contingut:

const path = require('path');

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

Explicació del Codi

  • entry: Defineix el punt d'entrada del nostre projecte. En aquest cas, és ./src/index.js.
  • output: Defineix el fitxer de sortida i el directori on es guardarà. Aquí, filename és bundle.js i path és el directori dist.
  • mode: Estableix el mode de Webpack. En aquest cas, development per a un entorn de desenvolupament.

  1. Creació del Fitxer d'Entrada

Crea el fitxer src/index.js amb el següent contingut:

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

Aquest fitxer simplement imprimeix un missatge a la consola.

  1. Executar Webpack

Ara que tenim la configuració bàsica i el fitxer d'entrada, podem executar Webpack per generar el fitxer de sortida. Afegeix el següent script al fitxer package.json:

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

Després, executa la següent comanda al terminal:

npm run build

Això generarà el fitxer bundle.js dins del directori dist.

  1. Verificar la Construcció

Per verificar que tot funciona correctament, crea un fitxer index.html dins del directori dist amb el següent contingut:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Webpack Basic Build</title>
</head>
<body>
  <script src="bundle.js"></script>
</body>
</html>

Obre aquest fitxer en un navegador i verifica que el missatge "Hello, Webpack!" apareix a la consola del navegador.

Exercici Pràctic

Exercici

  1. Modifica el fitxer src/index.js per incloure una funció que imprimeixi un missatge personalitzat a la consola.
  2. Actualitza el fitxer webpack.config.js per canviar el nom del fitxer de sortida a main.js.
  3. Executa Webpack i verifica que el nou fitxer main.js es genera correctament i que el missatge personalitzat apareix a la consola del navegador.

Solució

  1. Modifica src/index.js:
function printMessage(message) {
  console.log(message);
}

printMessage('Hello, Custom Webpack Build!');
  1. Actualitza webpack.config.js:
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
  mode: 'development',
};
  1. Executa Webpack:
npm run build
  1. Actualitza index.html:
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Webpack Basic Build</title>
</head>
<body>
  <script src="main.js"></script>
</body>
</html>

Obre index.html en un navegador i verifica que el missatge "Hello, Custom Webpack Build!" apareix a la consola.

Conclusió

En aquesta secció, hem après a configurar una construcció bàsica amb Webpack, incloent la creació d'un fitxer de configuració, la definició dels punts d'entrada i sortida, i l'execució de Webpack per generar els fitxers de sortida. Aquest és el primer pas per comprendre com funciona Webpack i com pot ajudar-nos a gestionar les nostres dependències i fitxers en projectes més complexos. En el següent mòdul, explorarem conceptes bàsics addicionals que ens permetran aprofitar al màxim Webpack.

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