Guía básica de Webpack 2

Los empaquetadores, comúnmente llamados en términos anglosajones, bundlers, son ya una herramienta imprescindible en cualquier entorno web moderno que se precie. Con la reciente ganancia de popularidad de Javascript, gracias a Nodejs, estas herramientas han proliferado en forma de utilidad de consola. Nodejs permite crear con gran agilidad este tipo de herramientas, e incluso escribir los propios módulos.
Grunt y Gulp, fueron los que sentaron las bases de lo que son actualmente herramientas como webpack. Tenían por función la ejecución tareas de cualquier tipo, con plugins para ampliar la funcionalidad. Actualmente, están proliferando diferentes soluciones al problema mas específico de agrupar recursos, como puede ser rollup o jspm entre otros. Todos ellos están escritos en Nodejs.

Nodejs, de ahora en adelante, node, ha supuesto un cambio en la forma de desarrollo de la web por lo que el lado del servidor corresponde. De la propia de definición de su página oficial: usa un node ha supuesto un cambio en la forma de desarrollo de la web por lo que el lado del servidor corresponde. De la propia de definición de su página oficial: usa un  modelo de operaciones Entrada/Salida sin bloqueo y orientado a eventos, que lo hace liviano y eficiente y programación funcional. Cuenta con una comunidad muy activa que desarrolla todo tipo de funcionalidades en forma de paquetes que reside en npm. La equivalencia podría ser packagist, en este caso, respecto de paquetes de php.  La proliferación de páginas SPA, con el uso intensivo de red o RTA combinado ha propiciado la amplia expansión y evolución. Además de poder unificar la lógica en  cliente y servidor, y usar el mismo lenguaje de programación para ambos.

¿Qué es Webpack?

Webpack como se define en web oficial: is a module bundler for modern JavaScript applications. When webpack processes your application, it recursively builds a Webpack como se define en web oficial: is a module bundler for modern JavaScript applications. When webpack processes your application, it recursively builds a  dependency graph that includes every module your application needs, then packages all of those modules into a small number of bundles – often only one – to be loaded  by the browser. O lo que es lo mismo, se encarga de generar gráficos de dependencias y empaquetarlos para que la aplicación sea capaz de funcionar correctamente.

La herramienta, nos permite ampliar su funcionalidad a través de una amplia lista de loaders que nos permiten aplicar transformaciones a los archivos que le pasemos.  Entre sus categorías, cuenta con funcionalidades básicas(xml, script, raw), empaquetadores(minificar, modernizr, web-components), específicos(imágenes, svg, base64, etc),  transpilers(coffescript, es6, typescript), plantillas(handlebars, jade, mustache), estilos(less, sass, stylus), traducciones(po, po2mo) o auxiliares(documentación, tests). También cuenta con una sección de plugins, mas limitada, que nos permite extender la funcionalidad mas allá de una simple transformación, pudiendo ejecutar lógica adicional, como es el caso de HotModuleReplacementPlugin, el cual nos permite regenerar los assets generados en función de cambios en los archivos originales.

Beneficios

  • Es una herramienta que nos permite automatizar tareas repetitivas.
  • Modularizar las diferentes secciones de nuestro proyecto.
  • Posibilidad de elección en función del tipo de asset(minificación de imágenes, etc).
  • Tiene una comunidad muy activa, y cuenta con un gran apoyo por parte de empresas como egghead.io, rollbar, etc.
  • Aunque en su primera versión era uno de los principales inconvenientes, en su segunda versión cuenta con una documentación de calidad.
  • Optimiza la velocidad de carga de la web.

Desventajas

  • En proyectos en los que la gestión de los assets no represente un problema, o el proyecto sea pequeño.
  • La separación entre las secciones sea difusa o difícilmente modularizable.
  • La curva de aprendizaje es elevada, necesita mucha configuración y es compleja al principio.

Objetivos del artículo

  • Usar código en ES2015 y transcribirlo a javascript legible para el navegador.
  • Loaders de css.
  • Extraer el css en archivos css.
  • Servidor de webpack Hot-Reloading.

Instalación de la herramienta

Para instalar webpack, debemos tener primero node instalado en el equipo. Puedes encontrar la información sobre cómo instalarlo en el enlace de la página oficial. Ahora que ya tenemos lo tenemos instalado, podemos continuar con la instalación de Webpack desde el terminal. A través del siguiente comando, le indicamos a npm, el gestor de paquetes de node, que queremos instalar en la carpeta actual, y guardarlo como dependencia del entorno de desarrollo:

Con la ejecución de este comando, ya tenemos el entorno preparado para proceder con Webpack.

Utilización

Javascript con ES2015

En primer lugar, vamos a instalar un transpiler para ES2015, aprovechando la implementación de babel, un loader capaz de llevar a cabo tal tarea con la ayuda de webpack.

Esto nos instalará en la carpeta donde lo ejecutemos babel-loader. Ahora creamos un archivo javascript con un ejemplo sencillo de un fragmento de código escrito en ES2015:

Este código javascript, ahora mismo no es funcional en el navegador, porque no entiende las nuevas características que hemos utilizado. Para que webpack empaquete nuestro código y lo reescriba en un estándar compatible con los navegadores, vamos a usar una configuración específica para que antes ejecute el loader de babel con el siguiente archivo de configuración:

En el siguiente enlace, está explicada toda la configuración usada aquí, pero explicaremos brevemente cada apartado. Entry, es el archivo de entrada, output, son todas las opciones referentes a la salida de los recursos, en este caso, usamos el sistema umd, con el nombre bundle.js y lo escribiremos en el directorio /web/js/dist. Por último, le damos la configuración necesaria para que use el loader de babel y nos escriba javascript válido en el  navegador. Si abrimos el archivo(en función de la versión de webpack y de sus loaders puede cambiar el contenido), podemos ver como las primeras lineas,  son las que nos introduce la lógica de webpack. A partir de la línea 86, podemos ver nuestro código, con las porciones de ES2015 reescrito:

Ahora, ya tenemos todos los elementos necesarios para ejecutar webpack, para que genere la salida que estamos buscando, nuestro archivo app.js compilado, con el nombre de bundle.js:

El ejecutable, se encargará de buscar el archivo de configuración(que debe estar donde lo ejecutamos),e interpretarlo para realizar las tareas convenientes.

CSS en javascript

El siguiente paso será usar un loader para parsear el css. Webpack hace uso del concepto de Web Components. Es por ello que su fin es el de empaquetar todos los recursos necesarios para el correcto funcionamiento en un archivo javascript, para su posterior reutilización. Sin entrar en detalles del porque, en el siguiente enlace, se exponen algunos de los motivos por los cuales, existe el concepto de CSS en javascript.

Para poder usar el loader de css, necesitamos instalarlo de la siguiente forma, como hemos hecho anteriormente con el loader de babel:

Acto seguido, cambiamos la configuración de webpack, para que quede así:

Con esta nueva regla, y el nuevo archivo de entrada, le estamos diciendo a webpack que queremos que lea y parsee el css que contiene el archivo style.css. Ahora, si abres el  fuente generado, podrás ver como ha incluido mucha mas lógica encargada de hacer la integración entre el fuente generado y el proyecto, además de los estilos css que contenía el archivo que creamos anteriormente. Podemos seguir ampliando nuestro set de herramientas para ser integradas con webpack, con sass, compresores de imágenes y un largo etcétera. Te aconsejamos que mires la documentación de webpack, para tener una visión mas profunda de el ecosistema.

Extracción del css

Para finalizar, con la sección de loaders y plugins, vamos a explicar como se pueden extraer los archivos css. Puesto que ya hemos visto como incluir el css en el archivo final bundle.js, haremos uso de un plugin que nos permite extraerlo y exportarlo a un archivo css común. Esta vez, lo que haremos no es instalar un loader, como lo hicimos previamente, puesto que necesitamos algo más que transformar las líneas. Ahora vamos a necesitar lógica para evaluar que hacer con los estilos que le indicamos a webpack que cargue, instalando un plugin.  En primer lugar, instalaremos el plugin:

Cambiando la configuración, de la siguiente forma, ya podremos incluir el archivo como app.bundle.css, tras la ejecución de webpack, como habíamos hecho anteriormente. Ahora podrás ver como en la carpeta /dist, se ha generado un nuevo archivo de css.

Servidor Web de recursos

Como no podía ser menos, el uso de estas herramientas, se vuelve lento y pesado. Cuando estamos trabajando contínuamente en los mismo recursos, vas a tener que ejecutar en el terminal la herramienta debido a los cambios efectuados y la necesidad de volver a generar el compilado. Antes este problema, con webpack, podemos usar un pequeño servidor que viene integrado, el cual nos compilará los nuevos cambios a través de watchers.

Con el siguiente comando, arrancaremos el servidor local de assets de webpack, que podremos incluir en nuestro proyecto.

En la configuración, añadiremos las siguientes líneas. Por una parte, el path público al que acceda el navegador para solicitar el bundle.js, nombre descrito en el archivo de configuración. Por otra parte, añadiremos en el array de plugins el encargado de comunicar los cambios al navegador. Con la última opción, –hot, le estamos indicando a webpack que queremos que haga uso del hot reloading, el cual, nos refrescará la web automáticamente, cada vez que se lleve a cabo un cambio.

Por último, este pequeño fragmento de código a nuestro app.js para que acepte las conexiones entrantes de hot reloading:

Conclusiones

Webpack es una herramienta muy potente que nos permite empaquetar todo tipo de recursos ya sean estáticos o dinámicos de una forma eficiente a través de sus gráficos de  dependencias. Tener todos los recursos en un mismo archivo de javascript, permite disminuir los tiempos de carga de la web, evitando peticiones innecesarias. Es cierto que al tratarse de javascript, tendremos un retardo en la carga de toda la lógica, pero si gestionamos de forma óptima los recursos, podemos evitar que los tiempos sea superiores respecto a las múltiples peticiones que puede realizar una página hacia el servidor. Así mismo, nos permite regenerar todos los recursos a través de su funcionalidad nombrada anteriormente, para evitar el paso por la consola en tiempo de desarrollo. En este artículo se ha intentado dar una visión básica y funcional de como usar esta herramienta. Asimismo, si estás interesado en la web oficial de webpack, tienes una sección completa de guías.

Herramientas de analítica para Pinterest

Pinterest es una red social que puede resultarte muy útil en tu estrategia de marketing. Su carácter completamente visual la convierte en una red social muy atractiva para los usuarios, ya que se basa estrictamente en compartir imágenes, que se pueden agrupar en carpetas.

Podríamos decir que Pinterest es como un gran corcho en la pared. Los usuarios comparten sus intereses en base a sus pins, algo así como las imágenes que colgarían en su corcho, que sería lo que en esta red social se llama tablero. Cada usuario puede crear tantos tableros como quiera, para agrupar sus imágenes bajo temáticas. Es una forma sencilla y visual de compartir intereses, algo que ha tenido especial éxito en los sectores de moda, cocina, belleza o arte.

Los usuarios pueden tanto subir sus propias imágenes como guardar en sus propios tableros el contenido de otros usuarios, algo que recibe el nombre de repin. El resto, simplemente consiste en seguir cuentas que nos resulten interesantes y conseguir seguidores para que nuestros pines tengan un buen alcance. Pinterest goza de un gran éxito, especialmente entre las mujeres, algo que está estrechamente ligado a las temáticas que se han hecho más populares en esta red social.

pinterest

Para utilizar Pinterest como parte de tu estrategia de marketing online, puedes comenzar creando un perfil de empresa y consultar el manual de Pinterest para empresas, donde encontrarás consejos muy útiles para sacarle el máximo partido a esta red social de cara a dar difusión a tu marca. Recuerda que, para maximizar su impacto, también puedes integrar el botón de Pinterest en tu sitio web, para que los usuarios puedan compartir en este espacio las imágenes o productos de tu página.

Una vez estés familiarizado con su uso, debes aprender a monitorizar y analizar el impacto que estás teniendo en esta red social, para conocer qué actuaciones tienen éxito y cuáles pasan más desapercibida, e ir refinando progresivamente tu estrategia en base a estos resultados. Para ello, te recomendamos algunas herramientas que te ayudarán a desempeñar esta tarea y a sacarle el máximo partido a Pinterest:

Pinterest Analytics 

pinterest-analytics

La propia Pinterest, al igual que otras redes sociales como Facebook o LinkedIn, ya te ofrece la posibilidad de monitorizar tus resultados. Utilizando Pinterest Analytics de forma gratuita, podrás obtener información dividida en tres aspectos: perfil de Pinterest, público y sitio web.

Sobre tu perfil, podrás conocer estadísticas sobre impresiones, repins, clicks y cifras históricas desde que comenzaste a usar esta red social, lo que te permite conocer tus contenidos más populares. También podrás conocer el impacto de cada uno de tus pines – impresiones, repins, clicks y likes –. En el aspecto público, Pinterest pone a tu disposición datos demográficos sobre tus seguidores, así como sus intereses. Por último, si verificas tu sitio web, obtendrás información sobre el impacto de los botones de Pinterest en tus contenidos y cómo estos repercuten en tu popularidad en esta red social.

Tailwind

tailwind

Esta aplicación, que puedes probar de forma gratuita, te permite programar pines, monitorizar Pinterest y analizar los resultados – repins, likes, comentarios y tráfico –. También ofrece información sobre cuáles son las tendencias más exitosas entre tus seguidores y qué usuarios son los más influyentes en tu sector. De esta forma, podrás además conocer qué se dice sobre tu marca y analizar los resultados de tus competidores.

Se trata de una herramienta muy completa y sencilla de usar, que permite crear informes teniendo en cuenta desde los aspectos más básicos a los más complejos. Utilizándola, podrás saber qué contenidos compartir, en base tanto a su éxito en tu sector como a las tendencias actuales entre tus seguidores, algo que puede resultar muy útil tanto para mejorar tus resultados en cuanto a interacción como para conseguir nuevos seguidores y aumentar tu popularidad.

Octopin (Cerrada – actualización 2018)

octopin

Esta completa aplicación para gestionar contenidos visuales en la web te permite probar una versión de prueba gratuita (en inglés), y puede utilizarse tanto para monitorizar Pinterest como Instagram. Sus funciones incluyen datos sobre los contenidos visuales más populares, información sobre tus seguidores y los usuarios más influyentes en tu sector, una interesante función para calcular el ROI (retorno sobre la inversión) y detallados informes que comparan tus resultados con los de tus mayores competidores.

Curalate 

curalate

Una aplicación semejante a la anterior, que ofrece los resultados de forma atractiva y muy visual. También puedes probarla de forma gratuita solicitando una versión de prueba (en inglés). Incluye analíticas sobre las redes sociales, campañas, herramientas para la publicación automatizada y otras estadísticas interesantes para tu empresa que te permitirán calcular el ROI de tus campañas en las redes sociales más visuales.

Piqora 

piqora

En la misma línea encontramos Piqora, una aplicación de análisis de marketing visual en la web, que ofrece opciones muy interesantes, como las librerías de imágenes, la opción de compartir los plannings de publicación en redes sociales con todo tu equipo y herramientas para programar pines o publicaciones en Instagram, entre otras. También puedes probar su versión gratuita (en inglés).

¿Tienes alguna incidencia?

Cuéntanos qué ocurre
y nos pondremos con ello lo antes posible.

Este sitio está protegido por reCAPTCHA, y la Política de privacidad y Términos de servicio de Google.
Sucríbete a
nuestra newsletter

para estar al día en el mundo online

¡Cuéntanos tus ideas!
+34 96 653 19 14
+info@acceseo.com
He leído y acepto la política de privacidad

Este sitio está protegido por reCAPTCHA, y la Política de privacidad y Términos de servicio de Google.