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

Manual de Webpack
Artículos Descargas

En Manual de Webpack encuentras:

  • Artículos del manual

  • 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 y Babel

    Cómo hacer el transpilado del código Javascript, ES6 en adelante, con Webpack y Babel. 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 Compilar CSS con Webpack 5

    Aprenderemos a compilar el código CSS del proyecto, usando por supuesto Webpack, con los loader de CSS correspondientes. Veremos de qué manera especial debemos lidiar con el CSS y cómo lo podemos extraer con Webpack en los archivos de salida.

  • 6 Compilar Sass con Webpack 5

    Explicaciones detalladas para compilar tu código Sass (SCSS) usando Webpack, en entornos de desarrollo y producción.

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

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

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

  • 10 Copiar assets con copy-webpack-plugin

    Trabajar con copy-webpack-plugin el plugin de Webpack para copiar archivos o directorios completos en la carpeta de destino en el build del proyecto.

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

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

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

  • Descargas

  • Libros electrónicos de Webpack para descarga

    Manual de Webpack completo para descarga en PDF y formatos de libros electrónicos, ePub para eReaders en general y Mobi para Kindle. El manual de Webpack aborda temas básicos y avanzados, para poder llevar Webpack allá donde necesites. En esta descarga dispones del libro completo, que puedes leer en tu ordenador, dispositivo móvil o de lectura.

    Archivos disponibles: PDF, ePup, Mobi (Kindle)

    Páginas: 75 (Referencia por el archivo PDF)

    Ir a la descarga