Instalación y configuración de Webpack 4 y Webpack Dev Server

Webpack Bundler Guia

Instalación y configuración inicial de Webpack 4 y Webpack Dev Server, una pequeña guía inicial para la creación de la primera “maqueta” a partir de la cual puedes ir añadiendo loaders o plugins como Babel.

¿Qué es Webpack?

Actualmente en su versión 4 es el bundler o agrupador de módulos o archivos javascript más popular que hay. Su principal cometido es convertir múltiples archivos javascript en uno solo. Aunque mediante plugins y loaders es capaz de hacer maravillas con cualquier asset o archivo necesario para el FrontEnd.

Webpack es una compleja y necesaria herramienta cuando te adentras en el mundo JavaScript y que normalmente viene pre configurada por defecto en todo tipo de frameworks, como por ejemplo Laravel en PHP.

Es decir, aunque utilices un backend basado en otro tipo de lenguaje, es posible que utilices Webpack preconfigurado para procesar y agrupar archivos css, sass, less, stylus, typescript, html, el propio javascript e incluso imágenes. En resumen todo tipo de archivos necesarios para FrontEnd.

Instalación y configuración de Webpack

Primero creamos la estructura de directorios, que tendrá src (nuestro código fuente virgen), dist (archivos procesados por webpack o la app funcional en sí) y config (donde guardaremos los archivos de configuración varios):

Iniciamos repositorio git y creamos nuestro archivo package.json con valores por defecto (-y), posteriormente podemos editarlo facilmente:

Instalamos el webpack globalmente (-g) y la consola de comandos (webpack-cli):

Webpack necesita un archivo de configuración por defecto, en su modo básico para indicarle el archivo inicial a procesar (entry), donde guardar el resultado (output) y el modo (producción o desarrollo). Por ello creamos en la carpeta config el archivo webpack.dev.js y el archivo inicial main.js en la carpeta src.

Este será el contenido del archivo webpack.dev.js

Este será el contenido random de nuestro archivo src/main.js

Ahora tan solo quedaría probar si funciona ejecutando el webpack a través de la consola:

Si todo va bien se nos generará un archivo main-bundle.js en el directorio dist y tendríamos cierto feedback en la consola. Mientras no haya ningún error, todo ha ido bien.

Para probarlo tan solo añadimos un archivo index.html que incluya el main-bundle.js:

Este archivo puedes abrir con cualquier navegador y debería de aparecer el mensaje “Hola Mundo”.

Configuración de Webpack Dev Server

Este servidor se utiliza solo en desarrollo y nos proporciona “hot reloading” o recarga de nuestra app en tiempo real. En cuanto detecte cualquier cambio en nuestro código y lo sirve desde la memoria en nuestro navegador. Es decir no actualiza archivos en nuestro directorio dist. El paso previo es instalarlo:

En este caso lo instalo globalmente (-g), también se puede instalarlo todo localmente.

Además es necesario actualizar nuestro archivo de configuración previo, config/webpack.dev.js:

Para poder ejecutarlo ejecutamos este comando:

Aparecerá un montón de información de compilación, entre ella una url que podemos abrir en el navegador: http://localhost:8080. Ahí podremos ver nuestro proyecto.