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

Servidor de Desenvolupament de Webpack

Següent ►
►

El servidor de desenvolupament de Webpack (Webpack Dev Server) és una eina poderosa que facilita el desenvolupament d'aplicacions web. Proporciona un servidor local per servir els teus fitxers, permetent una experiència de desenvolupament més ràpida i eficient. A més, inclou funcionalitats com la recàrrega automàtica de pàgines i el reemplaçament de mòduls en calent (Hot Module Replacement, HMR).

Objectius d'aquest tema

  • Entendre què és el Webpack Dev Server i per què és útil.
  • Aprendre a configurar i utilitzar el Webpack Dev Server.
  • Explorar les funcionalitats clau com la recàrrega automàtica i el HMR.

Què és el Webpack Dev Server?

El Webpack Dev Server és un servidor de desenvolupament que serveix els fitxers generats per Webpack. Proporciona una sèrie de funcionalitats que faciliten el desenvolupament, com ara:

  • Recàrrega Automàtica: Quan es fan canvis en el codi, el servidor recarrega automàticament la pàgina.
  • Reemplaçament de Mòduls en Calent (HMR): Permet actualitzar mòduls específics sense recarregar tota la pàgina.
  • Proxy: Pot redirigir sol·licituds a altres servidors, útil per a API backends.

Configuració del Webpack Dev Server

Instal·lació

Primer, necessitem instal·lar el paquet webpack-dev-server:

npm install webpack-dev-server --save-dev

Configuració Bàsica

Afegim la configuració del servidor de desenvolupament al fitxer de configuració de Webpack (webpack.config.js):

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/'
  },
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 9000
  }
};

Explicació del Codi

  • entry: El punt d'entrada de la teva aplicació.
  • output: On es generarà el fitxer de sortida.
  • devServer: Configuració del Webpack Dev Server.
    • contentBase: El directori des d'on es serviran els fitxers.
    • compress: Habilita la compressió gzip per als fitxers servits.
    • port: El port en què el servidor escoltarà (en aquest cas, 9000).

Executar el Webpack Dev Server

Afegim un script al package.json per executar el servidor de desenvolupament:

"scripts": {
  "start": "webpack serve --open"
}

Ara, podem iniciar el servidor amb:

npm start

Funcionalitats Clau

Recàrrega Automàtica

Per defecte, el Webpack Dev Server recarrega automàticament la pàgina quan detecta canvis en els fitxers. Això és molt útil per veure els canvis en temps real sense haver de recarregar manualment la pàgina.

Reemplaçament de Mòduls en Calent (HMR)

El HMR permet actualitzar mòduls específics sense recarregar tota la pàgina. Això és especialment útil per a aplicacions grans on la recàrrega completa pot ser lenta.

Per habilitar el HMR, només cal afegir hot: true a la configuració del devServer:

devServer: {
  contentBase: path.join(__dirname, 'dist'),
  compress: true,
  port: 9000,
  hot: true
}

Proxy

El Webpack Dev Server pot redirigir sol·licituds a altres servidors, cosa que és útil quan es treballa amb API backends. Per exemple:

devServer: {
  contentBase: path.join(__dirname, 'dist'),
  compress: true,
  port: 9000,
  proxy: {
    '/api': 'http://localhost:3000'
  }
}

Això redirigirà totes les sol·licituds a /api al servidor que escolta al port 3000.

Exercici Pràctic

Objectiu

Configurar un projecte bàsic amb Webpack Dev Server que inclogui recàrrega automàtica i HMR.

Passos

  1. Crea un nou projecte:

    mkdir webpack-dev-server-example
cd webpack-dev-server-example
npm init -y

  2. Instal·la les dependències:

    npm install webpack webpack-cli webpack-dev-server --save-dev

  3. Crea l'estructura de fitxers:

    mkdir src
touch src/index.js
touch webpack.config.js

  4. Configura Webpack (webpack.config.js):

    const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/'
  },
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 9000,
    hot: true
  }
};

  5. Afegeix un script al package.json:

    "scripts": {
  "start": "webpack serve --open"
}

  6. Crea un fitxer HTML (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 Dev Server Example</title>
</head>
<body>
  <script src="bundle.js"></script>
</body>
</html>

  7. Afegeix contingut a src/index.js:

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

  8. Executa el servidor:

    npm start

Solució

Si has seguit els passos correctament, hauries de veure un missatge de "Hello, Webpack Dev Server!" a la consola del navegador. Prova de fer canvis a src/index.js i observa com es recarrega automàticament la pàgina o s'actualitza el mòdul en calent.

Conclusió

El Webpack Dev Server és una eina essencial per a qualsevol desenvolupador web que utilitzi Webpack. Facilita el desenvolupament amb funcionalitats com la recàrrega automàtica i el reemplaçament de mòduls en calent, permetent una experiència de desenvolupament més ràpida i eficient. En el proper tema, explorarem el Reemplaçament de Mòduls en Calent (HMR) en més detall.

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