Configuración de Hot Reload en Webpack con React

Curso de Webpack con Express.js, React.js y TypeScript

Contenido del curso

Introducción

Webpack en el Backend

Webpack en el Frontend

Despliegue

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0012:06

Configuración de Hot Reload en Webpack con React

Curso de Webpack con Express.js, React.js y TypeScript

Clase 15 de 22

Clase 15 / 22

Recursos

Cuando trabajas con React y webpack, cada cambio en el código puede significar esperar a que todo el proyecto se compile de nuevo. Esto frena el flujo de desarrollo y consume tiempo valioso. Existe una solución práctica que inyecta únicamente las piezas modificadas sin recompilar todo el proyecto: el hot reload. A continuación se explica paso a paso cómo integrarlo y cómo resolver los errores más comunes durante el proceso.

¿Qué es hot reload y por qué acelera tu desarrollo?

Hot reload es un mecanismo que detecta los archivos que han cambiado y los inyecta directamente en la aplicación que se ejecuta en el navegador [0:14]. En lugar de que webpack prepare todo el build desde cero, solamente reemplaza la pieza que fue modificada. El resultado es que los cambios se reflejan casi al instante, lo que mejora notablemente la experiencia durante la creación de proyectos.

Este concepto se apoya en lo que webpack llama Hot Module Replacement (HMR), una funcionalidad que viene incluida en el dev server y que se potencia con paquetes adicionales como react-hot-loader.

¿Cómo instalar y configurar react-hot-loader?

El primer paso es instalar la dependencia desde la terminal [1:05]:

bash npm install react-hot-loader

Una vez instalado, se necesitan tres configuraciones:

¿Qué se agrega en la configuración de Babel?

En el archivo de configuración de Babel, dentro de la sección de plugins, se añade el plugin del paquete [1:40]:

{ "plugins": ["react-hot-loader/babel"] }

Esto permite que Babel reconozca el recurso y no genere conflictos al transpilar el código.

¿Cómo se modifica el componente App?

En el archivo principal de la aplicación (en este caso ubicado en routes), se importa la función hot y se envuelve el componente exportado [2:10]:

javascript import { hot } from 'react-hot-loader/root';

const App = () => { // tu componente };

export default hot(App);

Esta función actúa como un High Order Component (HOC): encapsula la aplicación original y retorna una nueva versión que tiene la capacidad de rastrear qué piezas han cambiado para inyectarlas sin recargar todo [2:30].

¿Qué cambia en webpack para desarrollo?

En el archivo webpack.config.dev se modifican dos cosas importantes [3:15]:

Se agrega un segundo punto de entrada (entry) con la ruta react-hot-loader/patch.
En la configuración del dev server se habilita hot: true.

javascript entry: [ 'react-hot-loader/patch', './src/index.js' ], devServer: { hot: true }

Es fundamental que esta configuración solo exista en desarrollo. En producción no se necesita este tipo de recarga rápida y añadirla generaría peso innecesario al bundle final [3:40].

¿Cómo identificar y resolver errores durante la configuración?

Al ejecutar npm run start por primera vez con la nueva configuración, es común encontrar errores [5:00]. En el ejemplo de la clase aparecieron dos situaciones concretas:

Typo en la configuración: el entry decía react-hot-loader/pat en lugar de react-hot-loader/patch. Un typo es un error tipográfico al escribir una palabra o un identificador [5:20]. Webpack mostró un mensaje claro: "Module not found. Error. Can't resolve", lo que indicó exactamente dónde estaba el problema.
Falta de configuración del import: la documentación oficial del paquete indica que se debe importar desde react-hot-loader/root, no simplemente desde react-hot-loader [7:00].

La recomendación es siempre leer los mensajes de error con atención, buscar en la documentación oficial del paquete y, si es necesario, consultar recursos como Stack Overflow o el repositorio de GitHub del proyecto [6:10].

¿Cómo verificar que hot reload funciona correctamente?

Después de corregir los errores y reiniciar el servidor con npm run start, la consola del navegador muestra el mensaje "Hot Module Replacement enabled" [8:30]. Esto confirma que la configuración está activa.

Al hacer un cambio, por ejemplo modificar el texto del componente Header a "Platzi Store" [9:05], la consola muestra exactamente qué módulos se actualizaron:

Header fue el archivo modificado.
Layout y App se prepararon porque dependen de ese componente.

De esta forma puedes ver en tiempo real qué partes de tu proyecto cambiaron y cuáles fueron afectadas, sin necesidad de un compilado completo.

¿Has tenido problemas configurando hot reload en tus proyectos? Comparte tu experiencia y los errores que encontraste en el camino.

Paolo Joaquin Pinto Perez

Hace 5 años

++Hot Reload++

Nos permite injectar el código sin necesidad de compilar el proceso completo, solo hace un cambio en vez de estar preparando el proyecto completo. 1.- Instalamos la dependencia:

npm install react-hot-loader

2.- en .babelrc actualizamos los plugins:

  "plugins": [
    "babel-plugin-transform-class-properties",
    "@babel/plugin-transform-runtime",
    "react-hot-loader/babel"
  ]

3.- En routes > App.jsx. importamos hot:

import { hot } from 'react-hot-loader/root';

y en la última linea(en la que exportamos), modificamos de la siguiente manera:

export default hot(App);

4.- Y solo en webpack.config.dev.js, ya que no necesitamos el hot reload para producción: Modificamos el entry:

module.exports = {
  entry: ['react-hot-loader/patch', './src/index.js'],
  .....
}

En devServer añadimos hot:

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

y npm run start

Introducción

Migración y Configuración Avanzada de Webpack 5 con TypeScript

Configuración y Optimización de Proyectos con Webpack y TypeScript

Webpack en el Backend

Configuración Básica de Express y Webpack para Proyectos Node.js

Configuración de Webpack para Proyectos con Express

Migración de Aplicaciones Node.js a TypeScript paso a paso

Configuración de API Rest con TypeScript y JSON para Platzi Store

Webpack en el Frontend

Migración y Optimización de Proyectos con Webpack 5

Configuración de Webpack para Desarrollo y Producción en React

Creación de Hooks para Consumo de APIs en React con Axios

"Implementación de Context en React para Gestión de Estado"

Configuración de Alias en Webpack para Proyectos JavaScript

Optimización de Imágenes y Uso de CDN en Proyectos Web

Optimización de Imágenes PNG con Image Minimiser Webpack Plugin

Configuración de TypeScript en React con Webpack

Configuración de Hot Reload en Webpack con React

División de Código con Lazy Loading en React

División de Código con Webpack y Micro Frontend en React

Configuración Avanzada de Webpack para Separar Código y Dependencias

Despliegue

Despliegue de Aplicaciones Web con Netlify y GitHub

Despliegue de API en Heroku con Express y TypeScript

Conexión de un Dominio Personalizado a Netlify y Cloudflare

Migración de Wetpack y Optimización para Producción

Configuración de Hot Reload en Webpack con React

Progreso del curso

Introducción

Webpack en el Backend

Webpack en el Frontend

Despliegue

Recursos

Recursos