React.js | Configuración con Webpack 5 y Babel 7 - Tutorial Actualizado

Muy buen video! quiero aclarar que en el momento en que estoy haciendo este video el contentBase, ya no se usa sino, que ahora hay que poner
static: {
directory: path.join(__dirname, 'dist')
}.

Gran video 🎊

Excelente video

a la fecha, lo de limpiar la carpeta dist automaticamente no depende de un plugin, podemos añadir clean: true en el output del archivo de configuracion de webpack.
muy buen video

Buenísimo, este contenido, mil gracias, solo por si sirve de algo, el css está embebido en el js import '../public/css/main.css' y el propio style- loader se encarga, de embeberlo dentro del propio js, por tanto el ultimo paso no haría falta ejecutarlo ...

muy bueno aunque me hubiera gustado que lo expliquen con TS, la mayoria de los tutoriales, no incluyen TS

Buenas gracias por tu video, podrias hacer un video pasando variables de .env a un archivo .scss ?
Esto es muy util en caso de tener un cdn de archivos en el cual todas las imagenes o archivos tienen la misma ruta pero con nombres y extensiones diferentes.

Genial.. Profe Yoelvis.. muy agradecido eternamente!.. saludos desde Venezuela (05/08/2022)

Mister Yoelvis Excelente sus enseñanzas.. saludos desde Venezuela (05/08/2022)

Uno de los mejores cursos que tomé sin dudas,
1- directo al grano
2- claro y consiso

3- chevere, copado, buena onda 👏👏
4- super útil !

Hola Yoelvis muchas gracias aprendi mucho, me surge un error, cuando utilizo [content-hash] no me funciona el enrutamiento que realizado con react router dom - y la funcion Router, pero cuando utilizo HashRouter si funciona pero me aparece en la ruta el simbolo #, alguien sabe como puedo evitar el # en la url y manenter el [content-hash] ??

Excelente contenido.. un genio.. es mucho pedir sumarle a esta configuracion Linter y Prettier?. Porfa jaj..

Hola amigo replique tu codigo ...pero la hora de darle npm start marca error contentbase

Joya de canal en buena hora lo descubrí

Amigo contigo estoy aprendiemdo mucho enserio hombre eres un crack gracias te confirmo que te agradezco y premiare cuando tenga mi primer empleo de desarrollador con react. Grandemente lo tendre grqcias a Ti. A tus cursos por que no tengo dinero para pagarme cursos pagados, siento con tus cursos voi caminando a mi nueva vida, del desarrolo espero podamos ser amigos bros

Hola tengo una duda, tengo todo exacto como el video y funciona todo menos el entorno de desarrollo, si hago el comando npm run start o npm start, me lanza el siguiente error [webpack-cli] 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'. These properties are valid: Que podria ser?

Sos crack!

Muchas gracias por este tutorial. Me va a resultar muy útil para un proyecto en el que estoy trabajando actualmente. Me acabo de subscribir al canal. Saludos desde Barcelona

Hola muy informativo, nuevamente gracias!. Para los que tienen problemas con el webpack.common, el contentBase lo tuve que cambiar a "static" : "../dist". No sé si es un update de webpack pero tuve que hacer eso ya que no reconocía contentBase

Que crack, deberías actualizar la parte de devServer, contentBase ya no se usa, se lo remplazó por static, leer docs de webpack 5 para quien tenga problemas ahí

El mejor tutorial que he visto de webpack, qué pedazo de explicación, he entendido todo. Muchísimas gracias, te deseo lo mejor!

Genial!..

Excelente video, muchas gracias por compartir.

Excelente vídeo y me gustaron las buenas prácticas de dividir el "desarrollo" y la "producción"...

Mas tengo una duda parcero.
Hay alguna manera o plugin para no tener que llamar todas las imagenes que se vayan a usar en el proyecto desde el .js??
En el proyecto que estoy trabajando, estoy manejando montones de imagenes y ps es molesto tener que llamarlos uno por uno en el .js de Webpack...

you are Lion, brother

La llave contentBase me da error y tengo que ponerla como 'static', igualmente open no me funciona con 'chrome' y le tengo que poner 'true'. ¿Sabes porque? Mi version de Webpack es 5.55.1, webpack cli 4.8.0, y webpack-dev-server 4.3.0. ¡Gracias por el video!

Muchas gracias por este genial video

Excelente tus cursos

Por qué cuando uso react router con una ruta <Route exact path="/login/user" component={Login} /> es decir con otro slash me sale el error: The resource from was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff). Hay algo mas que se deba configurar?

Increíble mereces mas visitas, es excelente todo!
Seguí este tutorial de la mano a la documentación oficial (por si algunas cosas han cambiado en cada plugin y dependencia que instalabas) Y casi no hay diferencia!La diferencia mas notable es con core-js al instalar babel, en la documentacion de babel sale que lo descontinuaron y lo pasaron a babel transform runtime y que lo hace automatico!
Por todo lo demás se ha entendido muy claro, muchas gracias.

Excelente tutorial, realmente recomendable.
Explicación entendible e importante.
Gracias ⭐

Pero con esa configuracion las pruebas unitarias se caen, pls suibi otro video donde se use webpack con jest y react-testing library

Me salvaste el dia con lo del hot reload, muchas gracias ! +10 y a favoritos :D

Un genio, muchas gracias por esta clase, saludos desde Argentina!!

Muchas gracias por el video, solo lo vi para aprender a usar webpack y babel juntos, pero no interfiró en nada el tema de react. Te ganaste mi suscripcion!! ajjaja felicitaciones para ti!!
Eso si, creo que te olvidaste de mostrar el plugin para vaciar la carpeta dist en cada compilacion! :-)
un saludo!

Hola,
¿cómo haces para que webpack pueda recorrer subdirectorios para empaquetar css que se encuentren dentro de un subdirectorio?

Hola amigo buenisimo tu video y te di manita arriba, como observacion babel desactualizo la libreria core-js y el preset @babel/pollifyl estas dos cosas estan incluidas en el runtime

Videaso bro. De lejos el mejor video sobre webpack que encontré 😊.

Infinitas gracias <3

Que buen video camarada! muy bien explicado, muy muy completo! Tengo ya tiempo trabajando con React pero era solo de las personas que utilizaba create-react-app, ahora con esta explicación se abren los panoramas muchísimo mas y me hace mas sentido las cosas que están sucediendo por detrás del código. Muchísimas gracias.

Por mais que eu não fale o idioma a explicação foi muito boa, eu consegui entender tudo, e isto vai me ajuda muito. Parabéns.

Super util, creo que es la mejor explicación que hay, ni en udemy eh encontrado algo que se le asemeje

excelente video! ando combinando webpack con typescript y me ha ayudado bastante este tutorial gracias

Joder!!! Jamás vi un video donde dieran todos los trucos y tips para mejorar en menos de una hora 😅 lo descargare antes de que lo pongan por pago 👍😎
Gracias muchas gracias por este tipo de contenido, un abrazo desde Perú, eres un grande

¡Hola! Tuve un pequeño problema con mi configuración, cuando ejecuto el comando npm run build el nombre de mi archivo .js es main.contenthash.js no me muestra los números, y tampoco se ha agregado el script defer en mi archivo index.html ¿Hay alguna forma de solucionar esto?

Hay alguna diferencia entre usar babel.config.json y .babelrc?