Configuración de Webpack para Proyectos HTML y Servidor Local

Resumen

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

Joel Campos

student•

Trucazo Si agregas esta configuración a .babelrc:

{
	"presets": [
			"@babel/preset-env",
			["@babel/preset-react", {
				"runtime": "automatic"
			}]
	]
}

Ya no necesitas importar React en los archivos donde utilizas sintaxis jsx:

App.jsx

const App = () => <h2>Hola mundo desde REACT!</h2>

export default App

Rodrigo Martinez

student•

uff BUE NI SI MO

Camilo Victoria

student•

¡Trucazo!

Maximiliano Alfredo Camacho Rios

student•

no me corría webpack server entonces revise la documentación y en lugar de poner

devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 3006
  }
}

Puse

devServer: {
        static: {
            directory: path.join(__dirname, 'dist'),
        },
        compress: true,
        port: 3006
    }

Y todo listo

Christian Beltran

student•

Gracias !

Cristobal Ricardo Matute

student•

Ahora si me funcionó. Gracias

Marcial Ambriz

student•

Si aparece este error, solo tienen que asignar un modo de compilacion (development o production) ya sea en el archivo de configuración de webpack o en el script en el package.json .

Marcial Ambriz

student•

Ej. Script en package.json

"start": "webpack serve --mode development",

Ej. Webpack.config.js

mode: 'development'

Ricardo Ochoa

student•

Graciaaas!

Fernando Quinteros Gutierrez

student•

🎒 Comandos de instalación de la clase

# NPM
npm install -D html-loader html-webpack-plugin
# YARN
yarn add -D html-loader html-webpack-plugin

Rony Porraz Vargas

student•

Tal vez no ayude mucho pero estuve como 10 minutos averiguando el error

ReactDOM.render( App , document.getElementById('app'))

Y solo habia que ponerle las llaves al componente 😅

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

Cristian Blandón

student•

Pero en la clase anterior se le pusieron los paréntesis angulares al componente :thinking:

Daniel Còrdova

student•

AVISO IMPORTANTE:

--si llegaste hasta aqui y la configuracion te arroja error, debes escribir lo siguiente en el script start:

"start": "webpack-dev-server"

--ya que "webpack serve" ya no cumple la funcion como lo hacia antes

Diana Flores

student•

Gracias por el dato fixxer_01, pero a mi si me corrió a la perfección "webpack serve". Siempre es bueno tener alternativas para lograr un mismo fin.

Luis Fernando Morla Mora

student•

a mi me corren los dos scripts, pero no se me actualizan los cambios, no sé por que :(

Camilla Bachna

student•

Hola a todos,

por si alguien tiene este error: "Module parse failed: Unexpected token (5:16) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | import App from “./components/App.jsx”; |

ReactDOM.render(<App />, document.getElementById(“app”)); | "

He cambiado

test: /\.(.js|jsx)$/,

por

test: /\.js$|jsx/,

y ahora funciona bien 😃

https://stackoverflow.com/questions/57924348/you-may-need-an-appropriate-loader-to-handle-this-file-type-currently-no-loader

Julio Loarte Huerto

student•

Gracias, con esto funciono

Silvio Farinas Chamorro

student•

Gracias Camila :)

Edgar Lopez Arroyo

student•

Instalación de dependencias:

npm i -D html-loader html-webpack-plugin

Configuración "webpack.config.js"

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

module.exports = {
	module: {
		rules: [
			{
				test: /\.html$/,
				use: {
					loader: 'html-loader'
				}
			}
		]
	},
	plugins: [
        new HtmlWebpackPlugin({
            template: './src/public/index.html',
            filename: 'index.html'
        })
    ]
}

Andres David Sanchez

student•

Porque si en las clases anteriores solo utilizamos la dependencia html-webpack-plugin ahora con React necesitamos el html-loader tambien?

Héctor Eduardo López Carballo

student•

Porque JSX trabaja con html y el html loader convierte el html en una string que se puede inyectar en el js.

Andres David Sanchez

student•

woo gracias! ahora todo claro

Cristian David Josué Say Yax

student•

Con esta configuración de devServe resolví mi error:

devServer: {
    static: {
      directory: path.join(__dirname, "dist/"),
    },
    port: 3006,
  },

Espero les sirva...

Andrés Ulises Alberto Gaete Vega

student•

gracias, me sirvio.

Diana Florez

student•

"start": "webpack serve", "build": "webpack --mode production"

Cindy Carolina Campos Navarro

student•

Hay demasiadas preguntas sin responder, uno está como a la deriva, creí que algún profesor se dignaba a estar revisando los msjs y ayudar, pero ayuda más google... En serio que decepcionante, esto cada vez me molesta más!

Belman Alexis Marin Franco

student•

Saludos Cindy! Lamentamos mucho tu situación. 🥺 Cuéntanos que inconveniente o duda has tenido para poder apoyarte. 💚

Cristian Pisco Intriago

student•

Si alguien está utilizando la última versión de react y tiene problemas de compatibilidad, ejemplo del mensaje de error que puede aparecer:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree

Cuando instalen las dependencias agreguen al final lo siguiente:

... --legacy-peer-deps

Ejemplo:

npm install -D html-loader html-webpack-plugin --legacy-peer-deps

Omar Maldonado Villanueva

student•

en la configuración del HtmlWebpackPlugin, el archivo de salida por defecto es un index.html, no es necesario poner filename: index.html a menos quieran cambiar el nombre del archivo de salida

Anfernee Valera

student•

Agregando algo al mismo tema. . Si le agregan la propiedad inject: "body", su script cambiará de posición de del head al body.

Irving Juárez

student•

Diferencia entre un plugin y un loader

Es importante saber la diferencia entre un plugin y un loader, ya que estos no son sinónimos. El plugin es código que es capaz de modificar la compilación, como en el caso de Babel, el cual transpila el código, modificando la compilación. . Por otro lado, el loader funciona antes de que se haga la compilación, por lo que no afecta a esta. Sabiendo eso, el plugin es mucho mas difícil de manejar que el loader (en relacion a darle mantenimiento y esas cosas).

Luis Rafael Dávila Castro

student•

Si alguien presenta este Warning:

Es debido que a partir de React 18 el método "ReactDOM.render" no es soportado como lo indica el mensaje, en su lugar el código del archivo index.js debe ser así:

import React from "react";
import ReactDom from "react-dom/client";
import App from "./component/App";

const root = ReactDom.createRoot(document.getElementById("app"));
root.render(<App />);

Jose Ever Muñoz Muñoz

student•

gran aporte compañero, mire la configuracion y no llegaba a ente del todo como se hacia, ahora gracias a ti lo se

Felipe de Jesus Ramirez Rodriguez

student•

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

student•

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

Alonso Ugalde Aguilar

student•

Hola. Si alguien está haciendo este curso con React en versión 18, el archivo index.js debe quedar así:

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

const container = document.getElementById('app')
const root = createRoot(container);
root.render(<App tab="home" />);

JUAN CAMILO CAMPO TANGARIFE

student•

You're my saver great man!

Gustavo Andres Eraso Fernandez

student•

Gracias, no entendi porque tab="home", lo probe sin y funciono igual. Que funcion cumple?

Diego Cáceres Cardoza

student•

Este error :

Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'contentBase'.

se soluciona con esto:

devServer: {
    static: {
      directory: path.join(__dirname, "dist"),
    },
    compress: true,
    port: XXXX,
  },

Sofía Celis

student•

Tuve problemas a la hora de visualizar el "Hello React" pero con esto pude resolverlo por si a alguien le sirve n.n

Felipe de Jesus Ramirez Rodriguez

student•

¿Alguien sabe a que se debe?