• Contenido

Introducción a Webpack

¿Qué es webpack?

• Es un module blunder (empaquetador de módulos).
• Te permite preparar el código para llevarlo a producción.
• Puedes trabajar con HTML, CSS, JavaScript, archivos estáticos, imágenes y fuentes.
• Te permite tener un modo de desarrollo.
• Gestinas dependencias, ejecutas tareas, conviertes archivos.
• Módulos en JS formato AMD, Common JS, ES15.

Module Blunder

• Herramientas web (frontend y backend) que permiten usar archivos con módulos JavaScript en un solo JS y hace que el navegador pueda entender tu app.
• Lectura.

Conceptos básicos

• Webpack. Un paquete de módulos estáticos para apps de JavaScript modernas.
• Loader. Te permite hacer bundle de cualquier archivo estático más allá de JavaScript.
• Plugins. Extienden las funcionalidades para agregar cosas de recursos externos.

Sobre Webpack

• Crea un gráfico de dependencias. Mapea a todos los módulos para convertirlo en uno o más módulos.
• Desde Webpack 4 ya no dependemos de tener un archivo de configuración, pero debemos tener una entrada (index.js) y una salida (dist).
• En el punto de salida se crea lo que se manda a producción. Generalmente es la carpeta dist. (Suele incluir un index.html, styles.css, main.js).