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

Reemplaçament de Mòduls en Calent

Següent ►
►

El Reemplaçament de Mòduls en Calent (Hot Module Replacement, HMR) és una característica poderosa de Webpack que permet actualitzar els mòduls d'una aplicació en temps real sense necessitat de recarregar tota la pàgina. Això és especialment útil durant el desenvolupament, ja que permet una experiència de desenvolupament més ràpida i fluida.

Què és el Reemplaçament de Mòduls en Calent?

HMR permet que només els mòduls que han canviat es tornin a carregar, mantenint l'estat de l'aplicació. Això significa que, per exemple, si estàs treballant en una aplicació React, pots modificar un component i veure els canvis immediatament sense perdre l'estat de l'aplicació.

Configuració de HMR

  1. Instal·lació de Webpack Dev Server

Per utilitzar HMR, necessitem el webpack-dev-server, que proporciona un servidor de desenvolupament amb HMR integrat.

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

  1. Configuració del Fitxer webpack.config.js

Afegim la configuració necessària per habilitar HMR en el nostre fitxer de configuració de Webpack.

const path = require('path');
const webpack = require('webpack');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/'
  },
  devServer: {
    contentBase: path.resolve(__dirname, 'dist'),
    hot: true
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ],
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'babel-loader',
        exclude: /node_modules/
      }
    ]
  }
};

  1. Script de Desenvolupament en package.json

Afegim un script per iniciar el servidor de desenvolupament amb HMR.

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

  1. Habilitació de HMR en el Codi de l'Aplicació

Perquè HMR funcioni correctament, hem d'afegir una mica de codi al nostre punt d'entrada (normalment index.js).

if (module.hot) {
  module.hot.accept('./path/to/module', function() {
    // Aquí pots especificar què fer quan el mòdul es reemplaça
    console.log('Mòdul actualitzat!');
  });
}

Exemple Pràctic

Suposem que tenim una aplicació React. Aquí teniu un exemple de com configurar HMR per a un component React.

  1. Estructura del Projecte

/my-app
  /src
    /components
      App.js
    index.js
  webpack.config.js
  package.json

  1. Fitxer index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';

const render = (Component) => {
  ReactDOM.render(<Component />, document.getElementById('root'));
};

render(App);

if (module.hot) {
  module.hot.accept('./components/App', () => {
    const NextApp = require('./components/App').default;
    render(NextApp);
  });
}

  1. Fitxer App.js

import React from 'react';

const App = () => {
  return (
    <div>
      <h1>Hola, Webpack HMR!</h1>
    </div>
  );
};

export default App;

  1. Fitxer webpack.config.js

const path = require('path');
const webpack = require('webpack');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/'
  },
  devServer: {
    contentBase: path.resolve(__dirname, 'dist'),
    hot: true
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ],
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'babel-loader',
        exclude: /node_modules/
      }
    ]
  }
};

  1. Script de Desenvolupament en package.json

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

Exercici Pràctic

Objectiu

Configura HMR en una aplicació simple de JavaScript que mostri un missatge a la pàgina. Quan canviïs el missatge en el codi, hauria d'actualitzar-se automàticament sense recarregar la pàgina.

Passos

  1. Crea un nou projecte amb la següent estructura:

    /my-hmr-app
  /src
    index.js
  webpack.config.js
  package.json

  2. Instal·la les dependències necessàries:

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

  3. Configura el fitxer webpack.config.js per habilitar HMR.

  4. Escriu el codi en index.js per mostrar un missatge a la pàgina.

  5. Afegeix el codi necessari per habilitar HMR en index.js.

  6. Executa el servidor de desenvolupament i comprova que HMR funciona correctament.

Solució

Fitxer webpack.config.js

const path = require('path');
const webpack = require('webpack');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/'
  },
  devServer: {
    contentBase: path.resolve(__dirname, 'dist'),
    hot: true
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ]
};

Fitxer index.js

const message = 'Hola, Webpack HMR!';

document.body.innerHTML = `<h1>${message}</h1>`;

if (module.hot) {
  module.hot.accept();
}

Fitxer package.json

{
  "name": "my-hmr-app",
  "version": "1.0.0",
  "scripts": {
    "start": "webpack serve --open --hot"
  },
  "devDependencies": {
    "webpack": "^5.0.0",
    "webpack-cli": "^4.0.0",
    "webpack-dev-server": "^3.0.0"
  }
}

Conclusió

El Reemplaçament de Mòduls en Calent és una eina essencial per a qualsevol desenvolupador que vulgui millorar la seva eficiència i experiència de desenvolupament. Amb HMR, pots veure els canvis en temps real sense perdre l'estat de l'aplicació, la qual cosa fa que el procés de desenvolupament sigui molt més ràpid i agradable.

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