Configuración de HTML-webpack-plugin en Webpack

Resumen

¿Cómo integrar HTML con Webpack?

Para crear proyectos eficientes y bien optimizados, es esencial aprender a integrar HTML con Webpack. Este proceso permite preparar y gestionar adecuadamente nuestros archivos HTML para producción. A continuación, te guío paso a paso sobre cómo lograrlo.

¿Qué necesitas para empezar?

Instalar HTML-webpack-plugin: Este plugin es fundamental para la configuración de Webpack, ya que mejora el manejo de archivos HTML en nuestro proyecto.

Instalación del plugin:
```
npm install html-webpack-plugin --save-dev
```

Configuración en el archivo webpack.config.js: Necesitamos modificar este archivo para incluir el plugin que acabamos de instalar. La idea es que Webpack procese nuestros archivos HTML correctamente.

Añadir el plugin al archivo de configuración:

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // otras configuraciones
  plugins: [
    new HtmlWebpackPlugin({
      inject: true,
      template: './public/index.html',
      filename: 'index.html',
    }),
  ],
};

¿Cómo preparar el archivo HTML?

Con el plugin integrado, debemos asegurarnos de que nuestro archivo HTML base esté bien configurado. Usamos un template que personalizamos y aseguramos que al compilar el proyecto, Webpack automáticamente incluya los scripts necesarios.

Cambios en el archivo index.html:

Eliminar referencias directas a scripts que serán gestionados por Webpack:

<!-- Antes -->
<script src="main.js"></script>

<!-- Después -->
<!-- Webpack se encargará de esto -->

¿Cómo se compila y prueba el proyecto?

Con la configuración completa, ahora compilar y probar el proyecto es sencillo. Podemos hacerlo tanto para entornos de desarrollo como de producción usando diferentes comandos de npm.

Compilar para producción:
```
npm run build
```
Este comando genera la versión optimizada para producción, incluyendo la minificación de archivos.
Compilar para desarrollo:
```
npm run dev
```
Nos ayuda a obtener una versión más legible del código, ideal para depuración.

¿Qué observar después de la compilación?

Una vez realizados los pasos anteriores y ejecutados los comandos, revisamos que:

Nuestro index.html está incluido con scripts automáticamente inyectados.
La versión de producción está minificada.
La versión de desarrollo mantiene un formato más legible para facilitar la depuración.

Con estos pasos, has configurado correctamente tu proyecto para trabajar con HTML y Webpack. ¡Continúa perfeccionando tus habilidades con CSS y preprocesadores para maximizar el potencial de tu proyecto!