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):
|
1 2 3 |
mkdir webpack-project cd webpack-project mkdir src dist config |
Iniciamos repositorio git y creamos nuestro archivo package.json con valores por defecto (-y), posteriormente podemos editarlo facilmente:
|
1 2 3 4 5 6 7 8 9 10 |
# Creamos repositorio vacío git init # Creamos package.json con valores por defecto npm init -y # Creamos archivo .gitignore que ignorara el directorio node_modules, donde # Se instalarán todos los paquetes de nuestra app. # También se puede hacer con el comando touch y editando archivo... echo "node_modules" > .gitignore |
Instalamos el webpack globalmente (-g) y la consola de comandos (webpack-cli):
|
1 |
npm install -g webpack 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.
|
1 |
touch config/webpack.dev.js |
Este será el contenido del archivo webpack.dev.js
|
1 2 3 4 5 6 7 8 9 10 11 12 |
const path = require("path"); module.exports = { entry: { main: "./src/main.js" }, mode: "development", output: { filename: "[name]-bundle.js", path: path.resolve(__dirname, "../dist") } } |
Este será el contenido random de nuestro archivo src/main.js
|
1 |
alert("Hola Mundo"); |
Ahora tan solo quedaría probar si funciona ejecutando el webpack a través de la consola:
|
1 |
webpack --config=config/webpack.dev.js |
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:
|
1 |
touch dist/index.html |
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:
|
1 |
npm install -g webpack-dev-server |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
const path = require("path"); module.exports = { entry: { main: "./src/main.js" }, mode: "development", output: { filename: "[name]-bundle.js", path: path.resolve(__dirmname, "../dist"), publicPath: "/" }, devServer: { contentBase: "dist" } } |
Para poder ejecutarlo ejecutamos este comando:
|
1 |
webpack-dev-server --config=config/webpack.dev.js |
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.
