Business & Tech

Tendencias, novedades, noticias y tips del mundo de Business & Tech

Business & Tech

16 Nov 2017
Sé el primero en comentar

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

1 Star2 Stars3 Stars4 Stars5 Stars (1 votes, average: 5,00 out of 5)
Cargando…
Cristina Ponce Torres

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:

Aprende a gestionar recursos en diferentes formatos HTML, CSS o Javascript con #Webpack

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!

Master en Software de Gestión: Open Source, SaaS & Cloud

Descubre una visión integral en términos de negocio, eficiencia, optimización y racionalización de las inversiones, a través de las Enterprise Applications.

¡Apuntarme!

Comparte y comenta este artículo!

Ideas, noticias y mucha formación en tu bandeja de correo
Suscríbete ahora y recibe los mejores contenidos sobre Emprendedores, Marketing, Negocios e Internet

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Regala formación

SUSCRÍBETE AL BLOG

Ideas, noticias y mucha formación en tu bandeja de correo
Sucríbete ahora y recibe todo el contenido de nuestro blog

LO MÁS LEÍDO HOY

BUSCA EN EL BLOG

IEBS EN LAS REDES

Si lo prefieres puedes seguir nuestro RSS:
x
Ideas, noticias y mucha formación en tu bandeja de correo
Suscríbete ahora y recibe los mejores contenidos sobre Emprendedores, Marketing, Negocios e Internet

No gracias, seguir leyendo el post