Que es Webpack y tus primeros Pasos con esta Herramienta

Frontend

En el día a día es indispensable conocer nuevas herramientas que faciliten nuestra tarea como desarrollador, una de estas herramientas es Webpack, una ves que entendamos que es y para que sirve vamos a poder gestionar nuestros proyectos de manera profesional y con las prácticas ideales para tener los mejores resultados.

Que es Webpack ?

Imagina que creaste un aplicacion SPA (Single Page App) o Página de una Aplicación Simple, te funciona sin problemas, pero con el tiempo decides integrar otras funcionalidades mas avanzadas, decides utilizar tecnologías, como Angular JS, React JS, para darle animaciones a tu Landing(SPA), Trabajar con Rutas, Integrar Formularios y un poco de Node JS para mostrar noticias en tiempo real. Puedes darte cuenta que tu aplicación ha crecido, realiza más peticiones al servidor, es aquí donde entra Webpack, esta herramienta nos ayudará a elegir cargar lo necesario para que funcione nuestra aplicación sin saturar al servidor y evitar la carga lenta de nuestro proyecto.

Cada módulo de tu proyecto puede contener imágenes, librerías Javascript, archivos CSS, pero todo lo podemos minimizar en un simple archivo, así tenemos una aplicacion organizada de manera simple pero muy potente y robusta.

imagen: webpack.js.org

Instalación

Nota: Para trabajar con Webpack es vital que instales Node JS para gestionar comandos y demás acciones. Te recomendamos revisar este tutorial y seguir los pasos correspondientes para que instales Node JS.

Crea o ve a la carpeta de tu proyecto al cual le instalarás Webpack, paso seguido debemos crear un archivo package.json para gestionar nuestro proyecto, para crearlo y configurarlo abre la consola de comandos y ejecuta el siguiente comando

Al terminar de hacer los pasos creamos la configuración del archivo package.json 

Nota: En el dato name no le pongas de nombre webpack, ponle otro nombre que desees pero no le pongas ‘webpack’ si no tendrás problemas con la instalación, nosotros le pusimos name: app

Ahora ejecutamos el siguiente comando para instalar Webpack

Terminada la instalación de Webpack, vamos a instalar el CLI de Webpack, con esto le damos soporte de comandos Webpack a nuestra consola, ejecutamos el siguiente comando

Si abres tu archivo de configuración package.json veras que nos agrego 2 devs dependencias

Despliegue de un proyecto en Webpack

Vamos crear la siguiente estructura de archivos y directorios

Abrimos el archivo src > index.js y agregamos

Volvemos a la carpeta principal de nuestro proyecto y creamos el archivo index.html y agregamos

Ahora vamos a nuestro archivo package.json y quitamos el dato “main”: “index.js” y le agregamos el dato “private”: true, nuestro archivo quedaría así

Cuando eliminamos el dato main, evitamos que se publique de manera accidental nuestro código del proyecto, así mismo con el dato private le damos más seguridad a nuestro código.

Creación de un Webpack y Hola Mundo

Ahora vamos a crear un Parcel Web o Webpack, para ello tenemos la estructura de nuestro proyecto desplegada y cuando generamos un Webpack se nos guarda en la carpeta /dist esta carpeta /dist se crea automáticamente al crear el webpack

Instalamos la biblioteca Lodash para agrupar dependencias con el siguiente comando

Vamos a nuestro archivo index.js e importamos Lodash

Bien ejecutamos el siguiente comando para generar nuestro webpack de depedencias

Ahora vamos a nuestra carpeta /dist y veremos que se ha creado un archivo main.js con las dependencias de nuestro proyecto

Por ello para usar nuestro nuevo archivo generado, abrimos el archivo index.html y cambiamos la etiqueta <script> e importamos el archivo main.js

Si abres tu archivo index.html podemos ve el mensaje Hola Webpack

Cada ves que agregues una nueva dependencia Webpack los agrupa en el archivo main.js, con esto nos olvidamos de tener archivos dispersos por múltiples directorios en tu proyecto.

 

Síguenos en las Redes Sociales para que no te pierdas nuestros próximos contenidos.

 

 

Newsletter

Suscríbete a Nuestro Boletín de Novedades:

(Luego de la suscripción no te va salir ningun mensaje. Solo revisa tu bandeja de Correo para confirmar tu suscripción)
* indicates required