Servidor de desarrollo Webpack con live-reload: Webpack-dev-server

  • Por
Webpack incluye un servidor de desarrollo, webpack-dev-server, con live-reload configurado, que nos resultará muy útil para servir nuestra aplicación web mientras programamos.

Otra de las tareas básicas que necesitaremos hacer en el desarrollo web en general, es disponer de un servidor donde veamos la web que estamos programando. Además, sería estupendo si esa web se actualizase automáticamente cada vez que cambiamos alguna cosa en los archivos de fuente.

Afortunadamente, contar con este servidor de desarrollo en Webpack es más fácil de lo que resultará a un mono pelar una banana. En este artículo del Manual de Webpack te lo vamos a explicar con todo detalle. Seguro que te impresionará la rapidez con la que lo consigues. Para ello usaremos un paquete de npm llamado webpack-dev-server, que realizará toda la tarea prácticamente sin necesitar configuración. Sólo por este detalle merece la pena usar Webpack.

Instalación de Webpack dev server

El primer paso, como siempre, será instalar las dependencias mediante npm. Como casi siempre en todo el flujo de trabajo con Webpack instalaremos la dependencia en modo desarrollo, con el flag "-D".

npm i -D webpack-dev-server
Nota: también podrías instalar webpack-dev-server de manera global con "npm i -g webpack-dev-server". Eso hará que el comando "webpack-dev-server" se encuentre instalado desde cualquier ruta de tu ordenador, pero generalmente no será necesario. Además, al iniciarse el servidor se usará la instalación local de preferencia, antes de la global. Independiente de esto, tal como te vamos a enseñar a continuación a iniciar el servidor de desarrollo (con un script npm) te garantiza que se usará la instalación local de webpack-dev-server.

Ejecución del servidor de desarrollo

Una vez instalado, ya podemos usar nuestro servidor de desarrollo en Webpack. Una de las novedades de Webpack 4 es que no hace falta configurar el servidor de desarrollo, ya que nos ofrece una configuración predeterminada que puede servir en muchos de los casos.

Para ponerlo en marcha vamos a crear primero un script npm. Esto lo hacemos en el package.json, en la propiedad de "scripts".

El conjunto de scripts que podemos tener en nuestro caso podría ser algo como esto, aunque claro que dependerá de cómo hayas ido configurando Webpack.

"scripts": {
  "build": "webpack --mode production",
  "builddev": "webpack --mode development",
  "start": "webpack-dev-server --mode development --open"
},

El script en concreto que inicia Webpack Dev Server es el "start". En él estamos indicando:

  • Que el modo de trabajo es "development" (configurado con "--mode development". Permite también el modo "production").
  • Que se abra automáticamente el navegador predeterminado, con la web que estamos desarrollando (configurado con --open).

Para abrir el servidor tenemos que ejecutar el script que acabamos de realizar. Esto lo hacemos desde el terminal, con el comando:

npm run start

Como hemos configurado con --open el arranque del servidor, se abrirá automáticamente el navegador, mostrando la web que estamos realizando. Además, este servidor de desarrollo está configurado automáticamente con live-reload (información extra más adelante).

Nota: como alternativa a los scripts npm, si quieres asegurarte que se ejecuta la versión local de webpack-dev-server, puedes lanzar el comando: "node_modules/.bin/webpack-dev-server" (desde la raíz de tu proyecto)

Una vez arrancado webpack dev server la ventana del terminal quedará abierta, mostrando cualquier actividad de Webpack en relación al proyecto. Por ejemplo, si se actualizan los archivos de fuente, se mostrará el resultado de la compilación de estos nuevos archivos. La ventana del terminal permanecerá ocupada con este watcher y no podremos operar para lanzar nuevos comandos. Obviamente, no es un problema porque siempre podemos lanzar nuevas ventanas de terminal, pero si queremos detener el servidor es tan sencillo como pulsar CTRL + C.

Detalles relevantes del uso de Webpack-dev-server

A continuación vamos a dar algunos detalles de interés sobre este complemento de Webpack, que te pueden venir bien durante la etapa de desarrollo de tu proyecto.

Configuración con Live reload

Este servidor viene configurado inicialmente con el sistema de live reloading, lo que permite que cada vez que se cambian y se guardan los ficheros "fuente" de Webpack, se recargue el navegador automáticamente, mostrando la web con las recientes modificaciones. Esta utilidad acelera el proceso de desarrollo, pero sobre todo permite una experiencia de desarrollo bastante más agradable para el desarrollador

Para probarlo simplemente altera cualquier cosa en tu archivo de Javascript, en tus CSS, en el HTML de tu template… simplemente con guardar el archivo en tu editor se actualizará el proyecto en el navegador, mostrando los cambios realizados inmediatamente, sin tener que recargar y sin que la caché del navegador nos incordie, mostrando código antiguo.

Transpilado automático de los archivos de desarrollo

Ten en cuenta que webpack-dev-server realiza un transpilado automático de los archivos. Esto es una ayuda en la mayoría de los casos, pues así la web que estás desarrollando podrá visualizarse correctamente en navegadores que soportan ES6 y ES5. De manera predeterminada el transpilado se realizará para soportar las últimas dos versiones de los navegadores principales.

Cambiar el puerto del servidor de desarrollo

En ocasiones puede ser necesario cambiar el puerto en el que se arranca el servidor de desarrollo. Esto se puede configurar en el comando de arranque del servidor, con el flag "--port", seguido de un espacio en blanco y el número de puerto que quieras usar.

Por ejemplo, si usas scripts de npm tal como te hemos explicado, el script "start" te podría quedar de la siguiente manera:

"start": "webpack-dev-server --mode development --open --port 8888"

Configuración de webpack-dev-server desde webpack.config.js

Si necesitamos realizar alguna configuración detallada de webpack-dev-server es posible realizarla también desde el archivo de configuración webpack.config.js.

En ese archivo, donde se encuentra el JSON de configuración, igual que tenemos una propiedad para "plugins", "output", "module", etc., podemos colocar otra justamente para definir el objeto de configuración para el arranque de nuestro servidor de desarrollo.

Por ejemplo, el puerto de arranque de webpack-dev-server se podría definir también desde el archivo de configuración de Webpack, con la propiedad siguiente.

devServer: {
  port: 9001
}

Servir contenido estático

Otra configuración muy útil, y necesaria en muchos casos para el servidor de desarrollo es la de indicar la carpeta donde tenemos el contenido estático. Como contenido estático podemos encontrar cualquier archivo que no sea procesado por Webpack pero que queramos que sea entregado también por el servidor de desarrollo.

Por ejemplo, podemos tener imágenes que queramos que se sirvan tal cual (no nos referimos a imágenes que Webpack haya procesado para optimizar, sino imágenes que tengamos en nuestro proyecto y que el servidor de desarrollo tenga que mostrar también), o por ejemplo un archivo JSON estático que queramos leer desde nuestra aplicación en la fase de desarrollo.

Pues bien, en la configuración de Webpack podríamos decirle que determinada carpeta también debe estar disponible desde el servidor de desarrollo. Para ello usamos la propiedad "contentBase", de este modo:

devServer: {
    port: 9001,
    contentBase: path.join(__dirname, 'publicdocs')
  }

Puedes consultar otras opciones de configuración en la documentación de webpack-dev-server.

Conclusión

De momento es todo lo que necesitas saber de webpack-dev-server. Un complemento esencial para Webpack y el desarrollo frontend, que mejorará tu experiencia de desarrollo de una manera sensible. Puedes usarlo prácticamente sin configuración, como has podido comprobar, lo que hace que cualquier persona sea capaz de beneficiarse de esta herramienta en el desarrollo frontend de su proyecto.