Manual de Webpack

Este es el manual de Webpack, la herramienta más importante para el desarrollo frontend moderno.

Webpack es originalmente un empaquetador de archivos Javascript, aunque a partir de esa idea se ha convertido en una utilidad para realizar todo tipo de tareas en el desarrollo frontend. Desde la creación de los bundles de Javascript, con código compactado, minimizado y traspilado, hasta el preprocesamiento del CSS o la optimización de imágenes.

Es una herramienta fundamental para llevar a producción el código de las aplicaciones frontend, optimizando los archivos y generando las versiones de código adecuadas para cada navegador. Pero también nos facilita mucho el trabajo en la etapa de desarrollo, al evitarnos la realización de tareas repetitivas y facilitar el debug del código Javascript transpilado o el CSS generado con algún preprocesador.

Webpack comenzó como un proyecto del ecosistema de React, pero por su utilidad se ha convertido en una herramienta usada de manera global en cualquier tipo de desarrollo frontend. Los más representativos frameworks Javascript la usan internamente para facilitar el flujo de desarrollo.

En este manual iremos publicando los artículos que te enseñen cómo usar Webpack en proyectos de todo tipo y cómo sacarle el mayor partido a través de sus loaders y plugins.

Ver los capítulos

Si te parece útil este manual ayúdanos compartiendo!! :)

Descargar como libro electrónico

Este texto 'Manual de Webpack' se encuentra disponible para descarga como libro electrónico. Ideal para imprimir o leer en el ordenador personal, dispositivos y eReaders.

Puedes acceder a través de la App de DesarrolloWeb.com

Conocimientos iniciales sobre Webpack

En estos artículos encontrarás una guía esencial para empezar a usar Webpack. A partir de la versión de Webpack 4 es muy sencillo comenzar a usar esta herramienta frontend. Conocerás el uso de Webpack sin la necesidad de usar archivos de configuración y además estudiaremos cómo configurar Webpack de manera básica a través de su archivo webpack.config.js

1.- Primeros pasos con Webpack

Tutorial de Webpack 4. Explicamos de manera práctica cómo comenzar a usar Webpack, el empaquetador frontend más popular.

2.- Configuración Webpack: webpack.config.js

Comenzamos a explicar la configuración de Webpack, a través del archivo webpack.config.js.
Transpilar el código Javascript

Una de las operaciones más importantes que se realizan mediante Webpack, u otros sistemas de empaquetado de código es la traducción / compilación del código Javascript de las aplicaciones. Mediante esta operativa, que abordaremos en los próximos artículos del Manual de Webpack, podrás distribuir tu código Javascript creado usando las últimas características del lenguaje, para que se pueda ejecutar correctamente en todos los navegadores. Podrás usar ES6 o incluso ES7 o TypeScript y una vez transpilado será compatible todos los navegadores. Además te enseñaremos el mecanismo para distribuir un código apropiado para cada navegador (ES5 para los antiguos y ES6 para los navegadores más modernos).

3.- Transpilado de Javascript con Webpack

Cómo hacer el transpilado del código Javascript, ES6 en adelante, con Webpack. De manera que sea compatible con todos los navegadores, incluso los que solo entienden ES5.

4.- Distribuir Javascript transpilado o no (ES5 o ES6) según navegador con Webpack

Configurar Webpack para entrega de código transpilado o no, dependiendo de si el navegador es compatible solo con ES5 o si soporta ES2015 (ES6).
Procesado del código CSS con Webpack

Otra operativa muy común con Webpack es la que nos permite transformar en CSS estándar el código escrito mediante lenguajes de preprocesadores CSS como Sass. La podrás conocer a continuación.

5.- Procesamiento de CSS y Sass con Webpack

Cómo hacer procesamiento de CSS, para ejecutar los preprocesadores necesarios para convertir nuestro código CSS, con Webpack. Usaremos Sass.
Usar Webpack en el ámbito de las aplicaciones front-end

Webpack es la herramienta más extendida para producir y optimizar el código front-end de las aplicaciones web. En estos artículos analizamos y explicamos los flujos de trabajo del desarrollo con Webpack en aplicaciones frontend modernas.

6.- HTML Webpack Plugin: Inyectar bundles en el HTML

Inyectar con Webpack los correspondientes scripts, y otros elementos, en un archivo HTML generado, para instalar el contenido de tus bundles en el proyecto, con HTML Webpack Plugin.

7.- Servidor de desarrollo Webpack con live-reload: Webpack-dev-server

Webpack incluye un servidor de desarrollo, webpack-dev-server, con live-reload configurado, que nos resultará muy útil para servir nuestra aplicación web mientras programamos.
Cómo usar Webpack en sitios web

Podemos distinguir aplicaciones frontend, en las que generalmente nos referimos a las SPA (Single Page Application) y sitios web tradicionales, que son aquellos que están construidos con múltiples URLs con contenido, como los que creas con CMS como WordPress. En este caso vamos a ver técnicas que tienen que ver con el uso de Webpack en los sitios web tradicionales.

8.- Cómo usar Webpack en sitios web tradicionales (Apache, PHP…)

Cómo usar Webpack si estás desarrollando un sitio web que se sirve mediante Apache, u otro servidor web tradicional, con lenguajes como PHP, .Net, Python…
Casos de uso avanzados con Webpack

En los próximos artículos vamos a abordar otros casos de uso de Webpack más avanzados, pero que resultarán especialmente útiles para sacar todo el provecho de esta herramienta frontend y crear sitios más avanzados y optimizados.

9.- Trocear los bundles con Webpack: code splitting

Cómo trocear los bundles con Webpack: hacer paquetes de código Javascript más reducidos, incorporando únicamente el código que necesitas para cada vista de la aplicación.

Compartir