Configuración de Webpack para Proyectos HTML y Servidor Local

¿Cómo configurar un proyecto para probarlo en el navegador?

Para llevar tu proyecto al siguiente nivel, es crucial asegurarte de que pueda ser probado eficientemente en el navegador. En esta guía, te mostraremos cómo agregar plugins y configuraciones esenciales para lograr esto. Sigue leyendo para explorar cómo configurar tu proyecto con las herramientas adecuadas.

¿Qué plugins y loaders necesitamos para trabajar con HTML?

El primer paso es instalar los cargadores (loaders) y plugins necesarios para manejar HTML dentro de tu proyecto. Estos son esenciales para optimizar la estructura del proyecto y facilitar la integración en el navegador.

1. Instalación de dependencias:

   • Abre tu terminal e instala los paquetes necesarios usando el siguiente comando:

     npm install --save-dev html-loader html-webpack-plugin
     

   • Estos serán instalados como dependencias de desarrollo (--save-dev), ya que solo son necesarios durante la fase de desarrollo.

2. Configuración del Webpack:

   • Debes importar el HTMLWebpackPlugin en tu archivo de configuración:

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

   • A continuación, necesitas agregar las reglas para que el HTML loader funcione correctamente:

     module.exports = {
         module: {
             rules: [
                 {
                     test: /\.html$/,
                     use: [
                         {
                             loader: 'html-loader'
                         }
                     ]
                 }
             ]
         }
     }
     

   • En la sección de plugins, crea una nueva instancia de HTMLWebpackPlugin:

     plugins: [
         new HtmlWebpackPlugin({
             template: './public/index.html',
             filename: './index.html'
         })
     ]
     

¿Cómo probar la configuración en el navegador?

Una vez configurados los loaders y plugins, es momento de crear scripts para ejecutar la compilación y servir el proyecto localmente.

1. Scripts en package.json:

   • Abre el archivo package.json y agrega los siguientes scripts en la sección scripts:

     "scripts": {
         "start": "webpack serve",
         "build": "webpack --mode=production"
     }
     

   • El script start inicia un servidor de desarrollo local, mientras que build compilará el proyecto para producción.

2. Ejecución de scripts:

   • Para iniciar el servidor de desarrollo local, vuelve a tu terminal y ejecuta:

     npm run start
     

   • Esto lanzará tu aplicación en el navegador, generalmente en el puerto predeterminado 3006. Podrás ver tu proyecto con todos los recursos compilados correctamente.

3. Comprobación de cambios en tiempo real:

   • Realiza cambios en tu archivo HTML o JavaScript y observa cómo se actualizan automáticamente en el navegador gracias al servidor en modo de desarrollo.

¡Y voilà! Ahora tienes una configuración de desarrollo que te permite realizar pruebas en el navegador de manera eficiente. Experimenta haciendo cambios y ve cómo se refleja instantáneamente en tu entorno. La práctica constante te dará el dominio necesario para manejar proyectos más complejos en el futuro. Sigue aprendiendo y mejora tus proyectos cada día.