Webpack - Webpack Dev Server

 Webpack es un empaquetador de módulos (module bundler) para JavaScript. Su función principal es tomar los archivos de tu proyecto (JavaScript, CSS, imágenes, etc.) y convertirlos en uno o más bundles (archivos procesados y optimizados) que se pueden ejecutar eficientemente en navegadores.

Sitio Oficial:   https://webpack.js.org/

• WEBPACK - Cómo funciona https://youtu.be/Y5aX_tm_0dw
  
• Webpack + Babel| Instalación :  https://youtu.be/wFyFpN4z9Nc 
• Babel + Webpack, práctico: https://youtu.be/EU53Lg-DSVM
• WEBPACK 5 con HTML y CSS https://youtu.be/qVfaTdYAQZ0
  

Propósitos principales:

1. Gestión de dependencias: Une múltiples módulos (importaciones y exportaciones) en un solo archivo.
2. Optimización del rendimiento: Minimiza y optimiza los archivos para mejorar tiempos de carga.
3. Integración avanzada: A través de plugins y loaders, puedes procesar archivos (e.g., Babel para JavaScript moderno, estilos CSS, imágenes, etc.).
4. Hot Module Replacement (HMR): Facilita el desarrollo, permitiendo cambios dinámicos sin recargar la página.

 

  HtmlWebpackPlugin

HtmlWebpackPlugin es un plugin para Webpack que facilita la generación de archivos index.html (u otros HTML) en tu proyecto. Es utilizado principalmente para:

1. Crear un archivo HTML automáticamente y vincularlo al archivo bundle.js generado por Webpack.
2. Inyectar dinámicamente otros recursos (como CSS, imágenes, etc.) en el archivo HTML.
3. Simplificar la configuración al evitar que tengas que gestionar manualmente el archivo HTML de salida.

¿Para qué sirve?

• Generación automática: Si no tienes un index.html predefinido, el plugin lo crea por ti, asegurándote de que los scripts generados por Webpack se incluyan correctamente.
• Compatibilidad: Funciona bien con configuraciones complejas de Webpack al manejar automáticamente la inyección de archivos generados.
• Personalización: Te permite utilizar plantillas HTML personalizadas e incluso integrar motores de plantillas como Handlebars, Pug o EJS.