Webpack Dev Server & Hot Module Replacement

• Como ya te habrás dado cuenta es tedioso tener que lanzar npm run build o similar cada vez que queremos compilar nuestro proyecto con Webpack.
• Aunque podemos utilizar el modo watch que ya conocemos de una lección anterior para actualizar el dependency graph cada vez que hacemos un cambio, en la mayoría de los casos lo más adecueado es usar el servidor Web Node de Webpack, llamado Webpack Dev Server. Sus características principales: live reload y hot module replacement (del que hablaremos luego) son tremendamente útiles.
• Es importante dejar claro que Webpack Dev Server no escribe los archivos tras compilar: los mantiene en memoria. Por eso no los veremos en el acostumbrado directorio /dist.
• Vamos a instalar Webpack Dev Server con npm install --save-dev webpack-dev-server, modificar nuestra configuración de Webpack para especificar que nos encontramos en modo desarrollo e indicarle desde dónde servir los archivos

...
mode: 'development',
devServer: {
	contentBase: './dist',
},

• Por supuesto, existen muchas otras opciones de configuración más allá de lo esencial. Te recomiendo que le eches un vistazo.
• Ahora solo nos queda crear nuestra nueva tarea que inicie todo el proceso en nuestro packcage.json

"scripts": {
  ...
  "serve": "webpack-dev-server --open"
},

• Al lanzar nuestra tarea con npm run serve y hacer cambios en los documentos del proyecto, comprobamos como se recargan los archivos.
• Sin embargo, verás que al hacerlo perdemos el estado de la aplicación. Para conservarlo mientras modificamos los archivos que la componen tenemos la opción de Hot Module Reloading.
• HMR permite actualizar las partes que han cambiado en tu aplicaciones sin necesidad de reiniciar todo el proceso o hacer un full refresh, como indica en la documentación.
• Como pone en la documentación implementarlo puede ser complicado, dependiendo del tipo de proyecto. Por eso la mayororía de frameworks (como Vue) a través de Vue CLI lo tienen auto-implementado, a través de vue-loader y Vue Hot Reload API.
• Aunque volveremos a retomar el tema de hot module reloading cuando implementemos nosotros mismos Vue Loader, vamos a dar los primeros pasos hacer que nuestro proyecto haga uso de esta tecnología.
• Como indica en la documentación debemos añadir la propiedad hot:true a devServer.
• Si volvemos a lanzar la tarea serve y examinamos las Developer Tools comprobarás que Webpack Dev Server indica que HMR está activo y escuchando.

[WDS] Hot Module Replacement enabled.

• A pesar de todo, si hacemos cambios en nuestro documento de entrada añadiendo un console.log, el estado de nuestra aplicación, este se pierde.
• Siguiendo la documentación, debemos indicar a nuestros módulos que sus contenidos y dependencias pueden ser reemplazadas.

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

• Aunque para nuestro sencillo ejemplo esto es suficiente, has de tener en cuenta los efectos secundarios presentes al usar HMR.
• El caso es que si ahora lanzamos de nuevo un serve y hacemos cambios en el documento JavaScript este se actualiza sin perder el estado. Así se nos indica también en los logs de la consola.

[HMR] Updated modules:
log.js:24 [HMR]  -
log.js:24 [HMR]  - ./src/css/main.css
log.js:24 [HMR]  - ./src/js/main.js
log.js:24 [HMR] App is up to date.

• En cuanto a nuestro código CSS, si hacemos cualquier cambio veremos que el módulo HMR es notificado.

[WDS] App updated. Recompiling...

• Pero esos cambios no se aplican. Resulta que debemos adaptar nuestro plugin MiniCssExtractPlugin para que haga uso de HMR. Muchos de los loaders y plugins de Webpack tienen opciones específicas que los hacen compatibles con hot module reloading. Si aplicamos la nueva configuración, hacemos que los cambios CSS se propaguen y reflejen sin perder el estado.

use: [
  {
    loader: MiniCSSExtractPlugin.loader,
    options: {
      hmr: true,
      reloadAll: true,
    },
  },
  "css-loader",
];