Configuración de Webpack para Proyectos HTML y Servidor Local

Contenido del curso

Introducción a Webpack

Proyecto inicial

Loaders y Plugins en Webpack

Deploy del proyecto

Herramientas de desarrollo complementarias

Integración básica de React.js

Próximos pasos

28
Configuración y Uso de Webpack con React
00:48 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:005:22

Configuración de Webpack para Proyectos HTML y Servidor Local

Curso de Webpack

Clase 24 de 28

Clase 24 / 28

Recursos

¿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.

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.

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.

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.
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.
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.

Felipe de Jesus Ramirez Rodriguez

Hace 4 años

Tuve problemas para visualizar la información Lo resolvi con esto Index

import App from './components/App';
import { createRoot } from 'react-dom/client';

createRoot(document.getElementById('app')).render(<App />)

App

import React from 'react';

function App() {
  return <h2>Hello world!</h2>
}
export default App;

webpack

const path = require('path');
const htmlPlugin = require('html-webpack-plugin')
module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  resolve: {
    extensions: ['.js', '.jsx']
  },
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: 'html-loader'
          }
        ]
      }
    ]
  },
  plugins: [
    new htmlPlugin({
      // CONFIGURACIÓN DEL PLUGIN
      // INYECTA EL BUNDLE AL TEMPLATE HTML
      template: './public/index.html',
      filename: './index.html'
    })
  ],
  devServer: {
    static: {
      directory: path.join(__dirname, "dist/"),
    },
    compress: true,
    port: 3006,
    open: true,

  }
}

package

 "start": "webpack serve --mode development --config webpack.config.js",

Angel David Contreras Barrios

Hace 4 años

Muchas gracias, mi error fue: no colocar el return, en el Hello React.

Comentarios (107)107 comentarios

Joel Campos

Hace 6 años

Rodrigo Martinez

Camilo Victoria

Maximiliano Alfredo Camacho Rios

Hace 5 años

Christian Beltran

Cristobal Ricardo Matute

Marcial Ambriz

Ricardo Ochoa

Fernando Quinteros Gutierrez

Rony Porraz Vargas

Cristian Blandon

Daniel Còrdova

Diana Flores

Luis Fernando Morla Mora

Camilla Bachna

Julio Loarte Huerto

Silvio Farinas Chamorro

Edgar Lopez Arroyo

Andres David Sanchez

Héctor Eduardo López Carballo

Cristian David Josué Say Yax

Andrés Ulises Alberto Gaete Vega

Diana Florez

Cindy Carolina Campos Navarro

Belman Alexis Marin Franco

Cristian Pisco Intriago

Omar Maldonado Villanueva

Anfernee Valera

Irving Juárez

Luis Rafael Dávila Castro

Jose Ever Muñoz Muñoz

Hace 3 años

Alonso Ugalde Aguilar

JUAN CAMILO CAMPO TANGARIFE

Gustavo Andres Eraso Fernandez

Diego Cáceres Cardoza

Sofía Celis

Introducción a Webpack

Curso Avanzado de Webpack para Producción Web

Configuración y uso de Webpack para proyectos JavaScript modernos

Proyecto inicial

Configuración y Uso de Webpack en Proyectos JavaScript

Optimización de Proyectos Web con Webpack para Producción

Configuración básica de Webpack para proyectos JavaScript

Loaders y Plugins en Webpack

Integración de Babel y Webpack para compatibilidad JavaScript

Configuración de HTML-webpack-plugin en Webpack

Configuración de Webpack para CSS y Preprocesadores

Uso de Copy Webpack Plugin para Mover Archivos en Proyectos Node.js

Importación de Imágenes con Webpack Asset Module

Optimización de Fuentes Locales con Webpack

Optimización de Proyectos con Webpack: Minificación y Hashing

Alias en Webpack: Simplifica la Importación de Módulos

Deploy del proyecto

Variables de Entorno en Webpack para Proyectos Seguros

Configuración de Webpack para Modo Desarrollo

Configuración de Webpack para Producción y Limpieza de Builds

Activar Watch Mode en Webpack para Desarrollo y Producción

Despliegue de Proyectos Web con Netlify y GitHub

Herramientas de desarrollo complementarias

Configuración de Webpack Dev Server para Desarrollo Local

Análisis de Dependencias con WebPath Bundle Analyzer

Uso de Source Maps en Webpack para Depuración de Código

Integración básica de React.js

Configuración de Webpack y React desde Cero para Producción

Configuración de Webpack en Proyecto React con Babel y JSX

Configuración de Webpack para Proyectos HTML y Servidor Local

Configurar CSS y SaaS en React con Webpack

Configuración de Webpack para Producción en React

Despliegue de Aplicaciones React en Netlify

Próximos pasos

Configuración y Uso de Webpack con React

Configuración de Webpack para Proyectos HTML y Servidor Local