Midu me parece extraordinario tus aportes a la comunidad y de antemano decirte que muchas gracias. Pasaba por aquí para preguntarte si podías hacer una serie hablando de patrones de diseño y como implementarlos. Seria hermoso jajajaja un abrazo crack.
¡Excelente video, me quedo todo más claro, gracias , Midu! Para aquellos que le marque error la opción de overlay: true deben hacerlo en el objeto client de la siguiente forma client: { // ... overlay: { warnings: false, errors: true } },
Llevo trabajando con React.js ya por varios años. Y hasta este momento no tenía idea lo importante de un empaquetador en un projecto web. Gracias Midu.
que crack midu!! yo cabezeando con el teclado, y veo lo facil que es, termine cerrando todas las pestañas y viendo el video completo! un genio!!! gracias!!!
MUCHAS GRACIAS. excelente contenido. una explicación excelente. cuando vi el video pensé q se iba a dar muchas vueltas en los mismos puntos... pero no... cada minuto valió la pena. gracias
Soy un desarrollador con experiencia en el desarrollo web y ya tengo bastante tiempo siguiendo tu contenido y personalmente me parece de lo mejor que hay actualmente enserio es increíble el detalle y el cariño que le pones a cada una de tus clases. Generalmente los profesores en diferentes plataformas caen el error de comenzar a aventarte código, e implementar paquetes sin explicar que hacen o para que sirven por alguna razón dan por echo que ya lo sabes, algo tan sencillo como ni si quiera explicar que es la variable __dirname del objeto global de node que tu te tomas el tiempo de explicar de manera breve, si eres alguien que sabe de node probablemente ya lo sepas pero si eres alguien que apenas empieza te deja con dudas respecto al código y esto es algo que a mi personalmente y considero que a otros les frustra demasiado cuando estas empezando en esto. En tu explicaciones te tomas el tiempo de explicar todo a detalle, te detienes a explicar que hace cada parte del código que estas escribiendo con el detalle suficiente para que todo quede claro y el usuario que ve tu contenido no tiene detener el video cada 5 min e ir a google a buscar porque hizo esto el profesor y para mi y para muchas personas ESO ES ORO!!! ❤. Te comparto esto porque hace tiempo intentando profundizar en webpack intenté tomar un curso y al llegar a la parte en la que se configura babel ni siquiera se menciona que es un loader, el curso no es malo pero no es una buena intro para alguien que empieza, el profesor de entrada configura webpack, configura babel sin tomarse el tiempo de explicar a detalle que es un loader, que es el path o que es el __dirname y puedo imaginar lo frustrante que es esto para alguien que apenas empieza, mi expertise es el front pero tengo experiencia con nodejs, y ya había utilizado webpack anteriormente solo intentaba aprender más de la tecnología y sus conceptos para profundizar más, al ver esto recordé tu contenido y pensé seguro que midu tiene video y efectivamente, ahora cada que intento tomar un curso acerca de una tecnología conceptos o intento aprender algo nuevo primero busco en tu contenido y no porque sea gratuito pero la calidad de tu contenido es algo que en ocasiones no encontramos ni en cursos de paga. PD. regresé a este video para recomendarlo a un amigo y por favor no dejes de hacer contenido, lo que le ofreces a la gente que apenas empiezas e incluso a la gente experimentada es invaluable.
Muy bien explicado y conceptos importantes con trucos adicionales. Me parecería interesante que lo complicaras más según casos de uso de proyectos reales.
Muy interesante, no sabía el tema de la nueva manera de transformación de JSX usando el runtime... lo he probado en una de mis apps pequeñitas y creo que algo me falla: TS2686: 'React' refers to a UMD global, but the current file is a module. Consider adding an import instead. La he actualizado según la propia documentación, borrar imports, actualizar react, react dom a 17(aunque creo que ya se puede utilizar en otras), typescript > 4.1 y actualizar el loader. Pero nada, si consigo arreglarlo lo comparto por si acaso. Muy buen vídeo!
Este tipo es un capo, Estaba tomando el curso de webpack de Platzi y llega a un punto en el que el profesor no explica nada y solo narra lo que esta escribiendo en el VS code. Este video con 44 minutos ya es mas productivo que las 2 horas que dura ese curso xdddxd
Muchas gracias por este vídeo. Clarifica muchos conceptos sobre webpack que, si no se tienen claros, generan problemas de comprensión a la larga. Como petición, te diría que revises la configuración del micro o del sonido porque petardea bastante y a veces se hace un poco incómodo de seguir. Sea como sea, sigue así compañero ❤️
Hola, antes que nada muchas gracias Midu, muy completo el contenido. Quise adaptarlo para Typescript, pero no logro configurar el runtime: automatic, por lo tanto debo agregar import React. Si alguien pudo, les agradezco el dato. He googleado sin parar y sin éxito hasta ahora. Saludos
Me encantaría saber como se trabaja de manera correcta y optimizada los media queries en webpack. Podrías hacer un video corto de como hacer algo que simule el comportamiento de la etiqueta link cuando le cargamos los media :) Saludos
Soy al unico que le gusta escribir en los archivos de confugración los valores por defecto? Me refiero a especificar que el entry es el index.js, aunque por defencto vaya a usar ese archivo. Me parecen buenas practicas, aunque sea redundante.
muuuuuy buen video miguel, como siempre! Muchas felicidades 🙌. No he encontrado un video explicando babel, que presets tiene, cuales se usanpara que y todo eso... para mi siempre ha sido una batalla perdida pues nunca me he puesto a mirarlo y tampoco sabria donde mirar. Si no tiene, podrias hacer un video acerca de ello?
En la propiedad overlay hay un error si lo hacemos como se ve en el video: Deben hacer algo asi: devServer: { open: true, port: 3000, compress: true, client: { overlay: true, } } Versiones que tengo instaladas: "webpack": "^5.73.0", "webpack-cli": "^4.9.2", "webpack-dev-server": "^4.9.2"
En un proyecto web antiguo que no se usan módulos javascript, sinó archivos .js con diversas functions que són referenciados desde index.html, ¿se puede usar webpack js para generar una versión destinada a producción con archivos js comprimidos, etc?
Gracias por el video y la clase Midu, me ayudo a complementar y comprender mejor el tema Webpack. Mi pregunta es, que entonces este empaquetador solo se debe usar cuando hagas proyectos grandes o en cualquiera de los contextos es utilizable y eficiente .?
Excelente curso!!! Gracias por tus aportes de gran utilidad. Espero los capítulos de Ract Native que ya no están disponibles en Twitch. Crees que será posible? De antemano, muchísimas gracias! Saludos.
Algo que no me queda claro. Pareciera que el overlay de webpack-dev-server ya viene por defecto, al compilar con overlay me devuelve un error, alguien que me pueda confirmar, gracias!
Están buenos tus cursos, tienes videos relacionados a creación de interfaces con animaciones usando css3, html5, y js? tipo un menú desplegable, cosas así?
Alguien sabe que puede ser necesario para correr el comando "npx server" , intento ejecutarlo y me dice el siguiente error : "npm ERR! could not determine executable to run". Gracias!
Muy buenas amigo tengo una duda, tengo un proyecto hecho con html,css,js y npm, que necesito para buildearla y subirla a producción ? Quizas tengo un error de conceptos pero creo que hay que generar un bundle para mapear las dependencias o algo asi? Muchas gracias desde ya
Cual es la forma de que webpack me redireccione a otro html de mi sitio web sin React? -Por lo que veo lo puedo hacer con un servidor Express que me sirva archivos estaticos de mi directorio public verdad? Me gustaria saber tu opinion acerca de cual es la mejor opcion ! El video ha sido genial!
Hola!Quisiera consultarte si es posible utilizar webpack para empequetar aplicaciones con generadas Express Generator, por ejemplo las que contienen Handlebars o EJS. Mi pregunta surge porque estuve intentando realizar un build, y la verdad no conseguí una salida funcional, y tanto los builds como los estáticos js y css no se empaquetan. Ahora también intenté hacerlo con webpack, pero veo claramente que esta no es la herramienta indicada. Desde ya muchas gracias por la respuesta!
He visto muchos cursos que envuelven y dan vueltas, pero esto... esto es oro! 🥇🥇
Gracias Nicolás! :)
Midu me parece extraordinario tus aportes a la comunidad y de antemano decirte que muchas gracias. Pasaba por aquí para preguntarte si podías hacer una serie hablando de patrones de diseño y como implementarlos. Seria hermoso jajajaja un abrazo crack.
He visto muchos tutoriales de Webpack y este sin duda es el mas conciso y el mejor explica los conceptos claves.
¡Excelente video, me quedo todo más claro, gracias , Midu! Para aquellos que le marque error la opción de overlay: true deben hacerlo en el objeto client de la siguiente forma
client: {
// ...
overlay: {
warnings: false,
errors: true
}
},
muchas gracias!
Llevo trabajando con React.js ya por varios años. Y hasta este momento no tenía idea lo importante de un empaquetador en un projecto web. Gracias Midu.
Dios Santo esto si se ve un poco complicado de entender a la primera. Definitivamente eres un crack y una biblioteca andante.
Me surgió la duda de webpack me puse a investigar y este mini curso ha estado demás de genial!
El video es excelente, la calidad del contenido y forma de simplificarlo es simplemente excelente!
que crack midu!! yo cabezeando con el teclado, y veo lo facil que es, termine cerrando todas las pestañas y viendo el video completo! un genio!!! gracias!!!
La mejor explicación sobre webpack que he visto nunca
MUCHAS GRACIAS. excelente contenido. una explicación excelente.
cuando vi el video pensé q se iba a dar muchas vueltas en los mismos puntos... pero no... cada minuto valió la pena. gracias
Tiene tiempo el vídeo y aún hoy en día con lo rápido que avanza todo sigue siendo 110% útil, gracias por este magnifico tabajo
Gracias 🤗
Midu, sos un crack, todo sto si me tengo que poner a leer y entenderlo yo, estaría en el horno. Muchas gracias por estas clases geniales! Abrazo!
vas al punto y das buenos consejos sin alargar en otros temas que no son del curso. Muy bueno!
Nunca me voy a cansar de agradecerte, genio!
Me alegro que te sirva! 🤗
Es uno de los mejores tutoriales que he visto!!!
Mejor explicado, imposible!
Gracias Ander!!!
Me encanto el pequeño curso, justamente hoy tenía programado estudiar webpack!
Eres un genio!!!!!!!!!!!!, saludos desde Perú.
Soy un desarrollador con experiencia en el desarrollo web y ya tengo bastante tiempo siguiendo tu contenido y personalmente me parece de lo mejor que hay actualmente enserio es increíble el detalle y el cariño que le pones a cada una de tus clases.
Generalmente los profesores en diferentes plataformas caen el error de comenzar a aventarte código, e implementar paquetes sin explicar que hacen o para que sirven por alguna razón dan por echo que ya lo sabes, algo tan sencillo como ni si quiera explicar que es la variable __dirname del objeto global de node que tu te tomas el tiempo de explicar de manera breve, si eres alguien que sabe de node probablemente ya lo sepas pero si eres alguien que apenas empieza te deja con dudas respecto al código y esto es algo que a mi personalmente y considero que a otros les frustra demasiado cuando estas empezando en esto.
En tu explicaciones te tomas el tiempo de explicar todo a detalle, te detienes a explicar que hace cada parte del código que estas escribiendo con el detalle suficiente para que todo quede claro y el usuario que ve tu contenido no tiene detener el video cada 5 min e ir a google a buscar porque hizo esto el profesor y para mi y para muchas personas ESO ES ORO!!! ❤.
Te comparto esto porque hace tiempo intentando profundizar en webpack intenté tomar un curso y al llegar a la parte en la que se configura babel ni siquiera se menciona que es un loader, el curso no es malo pero no es una buena intro para alguien que empieza, el profesor de entrada configura webpack, configura babel sin tomarse el tiempo de explicar a detalle que es un loader, que es el path o que es el __dirname y puedo imaginar lo frustrante que es esto para alguien que apenas empieza, mi expertise es el front pero tengo experiencia con nodejs, y ya había utilizado webpack anteriormente solo intentaba aprender más de la tecnología y sus conceptos para profundizar más, al ver esto recordé tu contenido y pensé seguro que midu tiene video y efectivamente, ahora cada que intento tomar un curso acerca de una tecnología conceptos o intento aprender algo nuevo primero busco en tu contenido y no porque sea gratuito pero la calidad de tu contenido es algo que en ocasiones no encontramos ni en cursos de paga.
PD. regresé a este video para recomendarlo a un amigo y por favor no dejes de hacer contenido, lo que le ofreces a la gente que apenas empiezas e incluso a la gente experimentada es invaluable.
completamente de acuerdo
Suscriptor desde ya!! Explicado así en orden está facilisimo! Gracias!!
Uno de los temas complicados de entender, explicados de una manera sencilla con la info esencial para empezar con webpack
Sin duda uno de los mejores creadores de contenido de desarrollo que valen oro puro
Justamente lo que necesito para un nuevo proyectos en el que estoy trabajando y aprendí un montón
wow, me explotó la cabeza. Muchas gracias Midu!
Y pensar que pensaste que no servias para la programación, a veces me siento así pero tú eres una inspiración para continuar
Muy bien explicado y conceptos importantes con trucos adicionales.
Me parecería interesante que lo complicaras más según casos de uso de proyectos reales.
Cuando lo hice solo me complique mucho,
Porque cuando lo explicas es más fácil :)
excelente video deluxe ojala haya una segunda parte donde implemente mas loaders y plugins
En 3, 2, 1.... Comentarios diciendo "usa vite" jajajajaa. Gracias como siempre midu!
Muy clara tu explicación. Saludos desde Buenos Aires
Sos el mas crack, terrible guia, muchisimas gracias
Justo lo que buscaba 😍😍😍😍
que onda le pones a tus clases midu! asi da ganas aprender todo!
Me encantó la explicación del curso, sigue subiendo cursos así son de mucha ayuda!
Midu, sos un grande loco. Gracias por esta master class
Gracias miduved me sacaste de estar estancada en un tutorial que no esta actualizado. :D
Gracias de todo corazon por el contenido.
Genial, me ha ayudado para entender webpack. Gracias!
Muy interesante, no sabía el tema de la nueva manera de transformación de JSX usando el runtime... lo he probado en una de mis apps pequeñitas y creo que algo me falla: TS2686: 'React' refers to a UMD global, but the current file is a module. Consider adding an import instead. La he actualizado según la propia documentación, borrar imports, actualizar react, react dom a 17(aunque creo que ya se puede utilizar en otras), typescript > 4.1 y actualizar el loader. Pero nada, si consigo arreglarlo lo comparto por si acaso. Muy buen vídeo!
Geniooo!... un crack total
Este tipo es un capo, Estaba tomando el curso de webpack de Platzi y llega a un punto en el que el profesor no explica nada y solo narra lo que esta escribiendo en el VS code. Este video con 44 minutos ya es mas productivo que las 2 horas que dura ese curso xdddxd
Brutal el contenido, muchas gracias Midu!
🙌un placer!!!!
Excelente video. Muy útil.
Excelente! Estaría genial uno de Ts, con configuraciones para optimizar los chunks
Que grande eres Miguel. ❤️
Muchísimas gracias!!
Muy buen video! Muchas gracias por compartir tus conocimientos.
Muchas gracias por este vídeo. Clarifica muchos conceptos sobre webpack que, si no se tienen claros, generan problemas de comprensión a la larga.
Como petición, te diría que revises la configuración del micro o del sonido porque petardea bastante y a veces se hace un poco incómodo de seguir.
Sea como sea, sigue así compañero ❤️
Grande Midu el mejor SIEMPRE
Un capo explicando como siempre . Sigue asi
Alto capo, se agradece el contenido
No entendí nada pero lo vi todo. 10/10
Gracias por el contenido.
Bro muchas gracias, estaba liado con el template para el HtmlWebpackPlugin
Hola, antes que nada muchas gracias Midu, muy completo el contenido. Quise adaptarlo para Typescript, pero no logro configurar el runtime: automatic, por lo tanto debo agregar import React. Si alguien pudo, les agradezco el dato. He googleado sin parar y sin éxito hasta ahora. Saludos
Maestro! Sensei! Teacher!
Gracias. Excelente explicación!
🤓👍 a practicar
Excelente explicación bro, tus vídeos valen bastante :D
Gracias! 😊
Grande miduuuu! siempre!
bien explicado, gracias!
😊😊😊
Genio Migue!
Con Midu todo es mágia =) , a veces negra. Apoyo este contenido!!!
Me encantaría saber como se trabaja de manera correcta y optimizada los media queries en webpack. Podrías hacer un video corto de como hacer algo que simule el comportamiento de la etiqueta link cuando le cargamos los media :) Saludos
Impecable!
Buen video! Han faltado los file-loader y url-loader que es lo que mas problema me da siempre :D
Es que en Webpack 5 ya no se usa ni file, ni raw ni url-loader. 😅 Está integrado en la config a través de los assets.
Ah no lo sabia! Voy a mirarlo, muchas gracias 😁
excelente hermano
Gracias midu, podrías hacer como manejar imágenes en webpack, transformar las imágenes en webp y avif?
Gracias por todo.
Midu, había aprendido en un curso de Sean Larkin que los loaders van de derecha a izquierda
Sería genial que explicarás algo de jeager Tracing
buenisimo
Canela fina!!
excelente
Gracias! 😊
grandeeeeeee, como siempre
Gracias Itziiiii!! 🤗
Soy al unico que le gusta escribir en los archivos de confugración los valores por defecto? Me refiero a especificar que el entry es el index.js, aunque por defencto vaya a usar ese archivo.
Me parecen buenas practicas, aunque sea redundante.
Si eso fuese así, te ibas a volver loco a poner todos los valores por defecto de la config de Webpack.
Grande midu
muuuuuy buen video miguel, como siempre! Muchas felicidades 🙌.
No he encontrado un video explicando babel, que presets tiene, cuales se usanpara que y todo eso... para mi siempre ha sido una batalla perdida pues nunca me he puesto a mirarlo y tampoco sabria donde mirar. Si no tiene, podrias hacer un video acerca de ello?
Super bien explicado, mejor que mi instructor!El link para discord?
discord.gg/midudev
Genial.
En la propiedad overlay hay un error si lo hacemos como se ve en el video:
Deben hacer algo asi:
devServer: {
open: true,
port: 3000,
compress: true,
client: {
overlay: true,
}
}
Versiones que tengo instaladas:
"webpack": "^5.73.0",
"webpack-cli": "^4.9.2",
"webpack-dev-server": "^4.9.2"
igualmente el overlay me parece que esta por defecto en true
En un proyecto web antiguo que no se usan módulos javascript, sinó archivos .js con diversas functions que són referenciados desde index.html, ¿se puede usar webpack js para generar una versión destinada a producción con archivos js comprimidos, etc?
Midu, he usado webpack y compilado en mode --production pero todavia en el navegador no veo el codigo minificado,
Gracias por el video y la clase Midu, me ayudo a complementar y comprender mejor el tema Webpack.
Mi pregunta es, que entonces este empaquetador solo se debe usar cuando hagas proyectos grandes o en cualquiera de los contextos es utilizable y eficiente .?
GENIOOOOOOO!!
Excelente curso!!! Gracias por tus aportes de gran utilidad. Espero los capítulos de Ract Native que ya no están disponibles en Twitch. Crees que será posible? De antemano, muchísimas gracias! Saludos.
¿Qué diferencia hya entre éste curso y el que tienes de casi 1:40 hrs? Excelente contenido. Gracias
Algo que no me queda claro. Pareciera que el overlay de webpack-dev-server ya viene por defecto, al compilar con overlay me devuelve un error, alguien que me pueda confirmar, gracias!
Yo deje webpack por vite ... pero viene bien aprenderlo xD
Una duda... el ene no lo terminamos de declarar en ningún lado? ya al final solo pasamos argv pero env no lo uso
Están buenos tus cursos, tienes videos relacionados a creación de interfaces con animaciones usando css3, html5, y js? tipo un menú desplegable, cosas así?
Qué tema de vscode usas, creo que no lo tengo y me gusta como se renderizan especialmente los parameters en functions
Buen video
Midu! cuando vas a hacer un 50 cosas sobre mi? osea no de mi de ti jaja
Alguien sabe que puede ser necesario para correr el comando "npx server" , intento ejecutarlo y me dice el siguiente error : "npm ERR! could not determine executable to run". Gracias!
Midu una consulta algún sitio en especial donde compras tus dominios, saludos y gracias por los aportes crack!!!!
Yo use porkbun.com
@@midudev está genial!! , gracias bro, dónde puedo comprar los stickers de tu logo 😎👍
Muy buenas amigo tengo una duda, tengo un proyecto hecho con html,css,js y npm, que necesito para buildearla y subirla a producción ? Quizas tengo un error de conceptos pero creo que hay que generar un bundle para mapear las dependencias o algo asi? Muchas gracias desde ya
Cual es la forma de que webpack me redireccione a otro html de mi sitio web sin React?
-Por lo que veo lo puedo hacer con un servidor Express que me sirva archivos estaticos de mi directorio public verdad?
Me gustaria saber tu opinion acerca de cual es la mejor opcion !
El video ha sido genial!
Hola!Quisiera consultarte si es posible utilizar webpack para empequetar aplicaciones con generadas Express Generator, por ejemplo las que contienen Handlebars o EJS.
Mi pregunta surge porque estuve intentando realizar un build, y la verdad no conseguí una salida funcional, y tanto los builds como los estáticos js y css no se empaquetan. Ahora también intenté hacerlo con webpack, pero veo claramente que esta no es la herramienta indicada.
Desde ya muchas gracias por la respuesta!
Se puede integrar en un build node js y react js? un proyecto entero !? Es decir que convivan ambos !