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

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.

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.- 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.

5.- 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).

6.- 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.

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.

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…

Compartir