Qué es Webpack: La solución a la eficiencia de tu código

• Qué es Webpack y cómo podemos aprovecharla
• Las ventajas y las desventajas de su uso del Webpack
• ¿Comenzamos a aprender más sobre Webpack?

Los cambios constantes en las nuevas tecnologías han propiciado la aparición de nuevas herramientas que facilitan las tareas de cualquier programador. El Webpack es una herramienta que nos permite generar los recursos finales de nuestro proyecto web a partir del conjunto de recursos que lo conforman. Esto, puede servirnos tanto para generarlos en un entorno de desarrollo como para producción. En definitiva, nos permite contar con una gestión integrada y eficiente de nuestros assets.

Artículos relacionados:

• ¿Qué debo estudiar para ser un experto en Big Data?
• El Machine Learning: La relación entre humanos y tecnología

• Los perfiles falsos en RRSS: un peligro para las empresas

Qué es Webpack y cómo podemos aprovecharla

El webpack es una herramienta que puede ser muy configurable y de la que todos podemos sacar una composición propia en función de nuestras necesidades, a pesar de que, algunas configuraciones son prácticamente obligatorias a día de hoy.

Con Webpack, podremos ser capaces de gestionar recursos de diferentes formatos: HTML, CSS o Javascript directamente. De hecho, se podría decir que Webpack es la evolución de otras herramientas como Grunt o Gulp que nos permiten automatizar ciertas tareas en nuestros proyectos, y es que, con menos código y con una configuración adecuada podremos transpilar ficheros JS escritos en ES7 a ES5/6 para hacerlos compatibles con todos los navegadores que soportamos. Asimismo, tendremos la oportunidad de ejecutar el compilado de nuestros ficheros de SASS, Less, Stylus a CSS con auto prefixes.

Las ventajas y las desventajas de su uso del Webpack

Como en todas las herramientas existentes, es fácil encontrarnos con elementos que nos ayuden y nos faciliten nuestros quehaceres diarios o que nos bloqueen el camino a trazar. Una de las mayores ventajas que nos proporciona Webpack, es la facilidad que nos brinda para configurar en un único fichero todo lo que queremos que conforme la carpeta de assets pública, es decir, ficheros debidamente compilados, minificados y transpilados, que reducen significativamente el peso de dichos archivos y adicionalmente, los hace compatibles con los navegadores que actualmente soportamos.

Por otro lado, es importante contar con su versatilidad, ya que, es posible configurar webpack, tanto para almacenar todo en un único fichero minificado como para gestionar los assets por formatos, funcionalidad, etc. Y así,  modularizar las diferentes secciones del proyecto.

Al reducir el peso de los ficheros que se descarga el navegador de nuestra aplicación web  y la cantidad de archivos reducimos la cuantía de peticiones que el navegador debe realizar al servidor para cargar la página, mejorando así,  la velocidad de carga de la misma.

Otra de las oportunidades que nos brinda la herramienta, es el uso de los módulos, esto es algo que realmente nos brinda ES6, pero que por el momento tendremos que transpilar con ayuda de Webpack. Con ello, podremos crear un sistema de módulos en nuestro proyecto que nos permita exportar funciones y objetos con mayor complejidad desde un archivo JS, el cual, luego nos permitirá reutilizarlo e importarlo todas las veces que sea necesario.

Pero no todo van a ser facilidades, ¿verdad? En lo que se refiere a la curva de aprendizaje, podemos determinar que es pequeña, puesto que,  necesitas tener de partida ciertos conocimientos sobre los formatos que te interesa compilar, para entender cómo funciona webpack y en qué te beneficia utilizarlo. Una vez comprendemos para qué sirve es muy sencillo utilizarlo.  

Lo cierto es que Webpack es interesante cuando el proyecto a abordar tiene una cantidad mínima de assets, es decir, si tenemos un proyecto pequeño solo podremos sacar partido del minificado de recursos, pero también puedes aplicarlo como metodología de trabajo aunque el proyecto de inicio sea pequeño puesto que nunca sabrás la magnitud final del mismo.

Webpack no es como Gulp, un automatizador de tareas, debes tener en cuenta que nació con el objetivo de manipular correctamente ficheros Javascript, es por eso que para poder manipular ficheros CSS, necesita trabajar con ciertos loaders para poder interpretarlos correctamente.

¿Comenzamos a aprender más sobre Webpack?

Para poder iniciarte en el mundo de Webpack deberás tener instalado Node en tu equipo. Con ello ya puedes lanzar el comando de instalación: npm install webpack –g Con esto ya podrás comenzar a trabajar con ello y agilizar tus proyectos.

¿Quieres saber más sobre esta herramienta? Aquí tienes gratis el Webinar «Webpack: modularización y eficiencia en tu código» con el que descubrirás en qué consiste, en qué puede beneficiarte y cómo utilizarlo para agilizar tu trabajo diario. ¿Estás preparad@?Si

¿Te ha gustado esta información? ¿Por qué no compartirla con más usuarios? Y si quieres seguir formándote en este tipo de softwares no dudes en consultar nuestro Master en Software de Gestión: Open Source, SaaS & Cloud ¡No te quedes sin tu plaza!