Curso de

Webpack

www.devcode.la

www.devcode.la

INSTRUCTOR

• Enrique Munguía
• Software Engineer @Google
• Twitter: @enrique7mc_
• Blog: enrique7mc.com

www.devcode.la

OBJETIVOS

• Mejorar el proceso de desarrollo front-end con un empaquetador de módulos como Webpack.
• Aprender los conceptos básicos de Webpack como puntos de entrada, loaders y plugins.
• Instalar, configurar y utilizar Webpack con ES6.
• Conocer diferencias entre versiones 3 y 4.

REQUISITOS

• Conceptos de JS/ES6

• Conocimientos básicos de node/npm

• Uso de terminal

• No indispensable: conocimientos de React

www.devcode.la

• Instalar Webpack con npm.

ACTIVIDADES

• Usar distintos loaders, para incluir código CSS, SASS y JSX con React.

• Definir scripts npm y configuraciones de Webpack para simplificar el proceso de desarrollo.

www.devcode.la

• Añadir plugins para optimizar y separar el código fuente.

• Es un static module bundler o  empaquetador de módulos estático.

Webpack

• Estos módulos pueden contener distintos archivos .js, .html, .css, .jpg, etc.

• Webpack resuelve todas las dependencias entre los módulos y genera una salida optimizada.

www.devcode.la

Generando un bundle

www.devcode.la

webpack.js.org

• Optimización y reducción de tamaño del código final.

Beneficios

• Transformación de sintaxis ES6, ES7, JSX a ES5 para máxima compatibilidad.

• Implementar estrategias como tree-shaking o code-splitting es más sencillo.

www.devcode.la

Conceptos Básicos

Punto de entrada

www.devcode.la

• También conocido como entry point.

• Especifica cuál es el módulo inicial de la aplicación.

Salidas y bundles

www.devcode.la

• Indican donde generar los bundles de la aplicación.

• Propiedad output

Loaders

www.devcode.la

• Permiten crear módulos a partir de otro tipo de archivos, por ejemplo CSS.

• Transforman archivos en módulos que se pueden incluir en un bundle.

Plugins

www.devcode.la

• Realizan distintos tipos de operaciones sobre los módulos o el bundle.

• Por ejemplo, optimización y reducción de tamaño de archivo de salida.

Novedades en Webpack 4

www.devcode.la

• Ejecución y generación de bundles hasta 98% más rápida.

• Por ejemplo, optimización y reducción de tamaño de archivo de salida.

• Nueva propiedad mode.

Novedades en Webpack 4

www.devcode.la

• Menos configuración inicial.

• Si no se especifica estos son los valores por default:

entry point = ./src/index.js
output = ./dist/main.js
 

• Ya no es necesario tener dos configuraciones production/development.

Conclusiones

www.devcode.la

• Aprendimos conceptos fundamentales de Webpack.

• Cómo usarlo en un ambiente de desarrollo front-end.

• Documentación de Webpack https://webpack.js.org/