¡Hola! Puedes ir dejando las posibles dudas, preguntas o peticiones en los comentarios de abajo. 👇 Intentaré responderlos en el Live Coding y, si no, me los llevo de deberes para próximos vídeos. 👏
Hola Miguel, repasando el video me surgió una duda bastante esencial y aunque han pasado unos días quería aprovechar para preguntar: ¿Por qué necesitamos un server para abrir en el navegador el bundle index.html? Al final es un archivo estático no?
Al principio lo uso, ya que es interesante tener un sistema de reloado de forma que, cada vez que hagamos un cambio, se refresque la página. Además al principio enseño el ejemplo de usar EcmaScript Modules y eso no funciona con el protocolo file:// (el que nos pondría al abrir el archivo estático directamente). Más adelante tiene más ventajas: tener reloading, generar los archivos estáticos en memoria en lugar de disco (más rápido) y al generar el bundle con hashes que el index.html se compile con el hash correcto automáticamente. :)
ya, si eso lo tengo claro. Igual hay algun concepto que no tengo claro. Pero si por ejemplo hicieros una app con create-react-app y depues ejecutaramos el script build, abrimos el index.html generado en la carpeta build. Veremos una pagina en blanco. Si en lugar de abrirlo a mano usamos servor u otro servidor nos mostrará el contenido... porque!!?
¡Hola, Miguel!. Me encanta la forma en la que explicas y compartes tus conocimiento.Este video de webpack estuvo super, sin embargo me gustaria aprender mas de webpack ojala pudieras compartir un video de múltiples entry points en webpack . Gracias. Saludos!!!
Saludos me encanto la clase una sola pregunta donde puedo ver un ejemplo y explicación mas completa para uso de sass o scss por ejemplo cargar fuentes otf svg directo del webpack por ejemplo para proyectos ya un poco mas funcionales
Genial cuándo las explicaciones se centran en el porqué y no en el cómo. Nuestra memoria es limitada (especialmente la mía) para aprender o memorizar configuraciones, pero si, como bien indicas, conocemos los motivos de por qué las cosas son así y no de otro modo, aprenderemos la lección para siempre (algo se me puede pasar, pero para ello he tomado apuntes :D). Gracias. P.D: Si te sacas un vídeo de estos cada 15 días explicando algún concepto complejo (algo así como una "master class" pero en "pequeñito" sin volverse muy loco :D) sobre algún framework o patrones o cualquier otra cosa que este a la orden del día a la hora de desarrollar aplicaciones y te creas una cuenta de Patreon, aquí tienes a uno que se afilia a ti.
Para mí el mejor vídeo para entender Webpack, el "qué" y el "por qué" de lo que pasa al usar la herramienta. Si estás interesado en aprender esta tecnología no lo dudes, fundamental.
4 Meses después... Que genial la forma en como explicas las cosas, nunca había visto un vídeo de tu canal(aunque estaba suscrito), un motivo más para darme una vuelta en tu canal con más frecuencia, muchas gracias por tomarte el tiempo para compartir tus conocimientos, tenía nulas bases en Webpack, pero con lo que enseñas, es un excelente punto de partida para ir y aprender aún mucho más, mi admiración con lo que haces, eres un gran maestro y te sale tan natural la manera en la que explicas. Completamente agradecido, saludos desde Honduras!!.
@@midudev de nada gran maestro, aún me preparo con JS para pasarme a tus videos de React, que igual pienso están cargados de contenido de calidad. Y adelante, aún tratando de lograr conseguir mi primer trabajo de desarrollador, y sé que tus vídeos serán parte de mi crecimiento como programador, nunca se termina de aprender, siempre hay algo nuevo que hacer, espero que siempre seas un ejemplo a seguir para muchos. Saludos maestro, con lo poco que he visto, estoy convencido que eres excelente en lo que haces, sé que con sacrificio y dedicación puedo alcanzar tu nivel a futuro. Mi admiración siempre para tí
Hermano no tenes idea todo el tiempo que he estado buscando como hacer el entorno de desarrollo, lo hacia con webpack server pero nunca me funcionaba, con el servor me anduvo por fin! Mil gracias!
No se porque desde hace tiempo me caias mal jeje, pero despues de ver este video de webpack paso a paso te digo que fue en extremo excelente y el mas detallado y las simplesa con que lo explicaste no tiene comparacion, muchos complican webpack, tu lo hicistes sencillo . Te felicito, sigue asi con ese detalle en explicar las cosas que muy pocos tienen y ya me hago desde hoy tu seguidor.
@@midudev pero explicarte el problema por aca seria dificil, tienes algun correo personal donde pueda enviarte mi problema, se que tu podrias encontrar la solucion y disculpa el abuso de mi parte.
Genial! Este video me ayudó mucho para entender qué es y cómo funciona webpack 📦. Que buena forma de explicar 😎, grandes conocimientos y gran persona. Un saludo desde estas latitudes! y muchas gracias!
Habia tomado dos cursos de Webpack y ninguno habia podido entender a configurarlo, muchas gracias eres un crack. Pd: Ya no demoro horas configurando WebPack, gracias.
Miguel sos un groso., como decimos aca por Argentina. Hablas en un lenguaje accesible para todos y haces que todo sea mucho mas simple de lo que parece ser en un principio. Excelente video y el curso de react gratuito :)
Aunque no lo vi en vivo xq estaba trabajando y no eh visto el recordatorio 😑, me lo vi completo y les digo a todo el que lea este comentario que vea este genial video. Pd: podrías por favor explicar lo de sass? Gracias x enseñarnos. 👇 Like si lo viste completo.
Una maravilla. Quedé medio enredado por tanta info de una. Pero aún así está todo muy bien explicado. PD: Siempre tengo ganas de caer a los lives pero nunca llego, horarios complejos 😫. Saludos desde Argentina, crack!
Me fue de muchisima ayuda tu tutorial ,estaria de lujo que hicieras un video con respecto al public path para la configuracion del favicon y el manifest json
Super bien explicado @midudev - precisamente, instalando storybook con create-react-app, me aparecía un conflicto de versión de babel-loader. La única solución que encontré fue hacer un downgrade del babel-loader para eliminar el conlicto. Gracias a este video, he entendido mejor el origen del problema. En todo caso, storybooks sigue sin resolverlo! A alguien le ha ocurrido lo mismo ?
Hola Cesar! Lo tengo pendiente, a ver si termino de sacar tiempo que ahora mismo estoy de mudanza y no hay manera de terminarla! jajaja Gracias por comentar!
Me ha gustado el video, estaría bueno por ej. un video de como integrar sass con webpack, (soy un noob total y recién estoy aprendiendo js y próximamente react, el backend ufff) los estoy usando pero sin integrar los activo en forma separada en dos terminales y no me parece muy efectivo jajaja
Buen video!! me aclarastes dudas del porque usaba cada que cosa y que hace cada una en que punto jajajaj, uno la usa y ni sabe que a hace a veces.. seria interesante una explicacion sobre los babel-jest y la configuracion para pruebas unitarias, y el tema de configurar y empaquetar todo el scss importado en los componentes de react.. ya que siempre me quedan declarados en el header con al etiqueta jajaja pero buen video!
Muchas gracias Jorge por tu comentario! Me apunto lo que dices para próximos vídeos. Como mucha gente me ha pedido lo de sass, seguramente haga un vídeo sobre la carga de estilos con Webpack muy pronto. :) Y veremos como evitar que queden en la etiqueta style para que se exporten en estáticos. ;)
Hola, muchas gracias por el video, por favor, en el minuto 7:15 indicas sobre servor, y haces referencia a que lo has explicado en el último live, cuál es el link a ese live?
Excelente, gracias por compartir, en serio que se aprende muchísimo con tus explicaciones. Por si te animas más adelante, por ejemplo el uso del css actualmente, muchos devs usan framework css, como tailwind css, bulma, bootstrap, otros devs preprocesadores como sass, stylus y otros css-in-js como styled components, emotion etc. Son gustos, pero ¿que ventajas y desventajas tiene cada estilo de los anteriores a la hora de elegir el modo de emplear css actualmente?, agregalo al checklist de tu lista de videos Miguel jaja un saludo frontender 👍
muy buen material , te hago una consulta , no pude encontrar el video donde hablas sobre mudulos js que mencionas , me interesaria verlo , felicitaciones!!
Saludos me encanto la clase una sola pregunta donde puedo ver un ejemplo y explicación mas completa para uso de sass o scss por ejemplo cargar fuentes otf svg directo del webpack por ejemplo para proyectos ya un poco mas funcionales
Hola! Hice un modulo como explica en 14:28 para exportar una funcion desde otro fichero. Pero esta funcion utiliza a su vez otras funciones, que ponga donde las pongas me salta "funcion indefinida". Alguien me puede decir como resolver esto? Gracias!
Hola Francisco! Sin código es un poco complicado, pero si dice que la función es undefined es que seguro que no la encuentra. ¿Estas importando la función con el nombre correcto? ¿Has mirado la consola por si no encuentra algún archivo? ¡Suerte!
Hola! Tengo la siguiente duda. Qué sería lo correcto a la hora de hacer un deploy a producción con webpack? Hacer un empaquetado cada vez que queremos desplegar? o hacer commit de los ficheros originales y también fichero empaquetado y minificado? Es que no veo mucho sentido hacer esto cada vez que queremos hacer un despliegje a prod. Cuál es la forma correcta de trabajar? Gracias y saludos!
Es posible replicar fragmentos de código en varias páginas con el complemento html-webpack-plugin, pero por lo que entiendo, todo el código debe insertarse en webpack.config.js, creo que sería confuso para códigos grandes. Tiene un video en el que crea una página y replica, por ejemplo, un fragmento de código en otra página? Ejemplo: encabezado o pie de página.
Muchas gracias por compartir conocimiento 😊 Tengo una duda referente a lo que has comentado del entry point. ¿Eso quiere decir que con la configuración por defecto, webpack ignora el "main": "index.js" del package.json?
Un placer Joan! El main del package.json está pensado exclusivamente para la resolución del módulo cuando se importa. Es el entry point, sí, pero a nivel de módulo. Cuando en Webpack hablamos de entry point es a nivel de toda nuestra aplicación. Le estamos diciendo a Webpack "por donde empieza" nuestra aplicación. Luego, al hacer un import de un paquete externo que tengamos en el node_modules, revisará el campo main para saber dónde tiene que encontrar el punto de entrada pero del módulo. ¡Espero que te haya servido la explicación!
Tu video es muy bueno, pero pensé en hablar de archivos parciales. Estoy usando el complemento "html-webpack-partials-plugin" para evitar la repetición del código, pero me equivoco cuando incluyo una imagen en estos archivos. ¿Tiene un video que explique esto?
Hola Alexandre. Me lo apunto. No he usado nunca ese plugin, pero el propio html-webpack-plugin tiene soporte para partials: github.com/jantimon/html-webpack-plugin/blob/master/examples/custom-template/template.html
@@midudev gracias Miguel! aún así veo que en la barra inferior de tu VSCode que tienes prettier instalado. ¿Qué settings.json tienes para que estos dos plugins no entren en conflicto?
tengo un problemita de dos meses con webpack laravel-mix vuetify y no logro cargar scss y nadie tiene un resultado concreto y limpio, si puedes hacer un video de igual veré este haber que pasa.!
Hola Fernando. Sí, tienes razón, al final como lo dejé para lo último lo hice un poco por encima y no me preocupé bien si funcionaba. La cosa es que el código debería ser así: ...(mode === 'production' ? productionPlugins : []), donde el segundo array podría ser el modo desarrollo. ...(mode === 'production' ? productionPlugins : developmentPlugins), Y para ello, tendríamos que tener los arrays definidos, claro: const developmentPlugins = [] const productionPlugins = [ new CompressionPlugin() ]
@@midudev Gracias! Acabo de terminar el video justo ahora, y ver que subiste hace poco el tuto de Webpack 5. ¿Qué nivel debería tener de webpack antes de meterme de lleno con React? Gracias y un abrazo desde Madrid.
Si lo tienes instalado de forma global, cosa que no deberías haber hecho, npm install -g webpack. Si lo tienes en un proyecto, con borrar la carpeta node_modules ya lo tendrías.
Alguien me puede ayudar?, tengo un error, cuando pongo webpack --mode development --watch escrito me dice que tengo necesito webpack-cli (que ya lo tengo descargado) al finalizar la descarga me tira error porque no encuentra el archico webpack-cli en el .json y cuando pongo npm run dev solo se me actualiza el codigo cuendo guardo el .json pero los .js no, no pasa nd tengo que cerrarlo y volverlo abrir, gracias desde ya
Eso debieron pensar de fútbol en su día para no decir balompié. Creo que nos podemos permitir algunos anglicismos, sobretodo en tecnología. Pese a los dientes. 🦷🦷🦷 Jajajaja 😝
tambien para el hash para el filename en output del archivo de configuracion en webpack paso de ser minuscula en lugar de camelcase antes app.[contentHash].js ---> despues app.[contenthash].js
¡Hola! Puedes ir dejando las posibles dudas, preguntas o peticiones en los comentarios de abajo. 👇
Intentaré responderlos en el Live Coding y, si no, me los llevo de deberes para próximos vídeos. 👏
Hola Miguel, repasando el video me surgió una duda bastante esencial y aunque han pasado unos días quería aprovechar para preguntar:
¿Por qué necesitamos un server para abrir en el navegador el bundle index.html? Al final es un archivo estático no?
Al principio lo uso, ya que es interesante tener un sistema de reloado de forma que, cada vez que hagamos un cambio, se refresque la página. Además al principio enseño el ejemplo de usar EcmaScript Modules y eso no funciona con el protocolo file:// (el que nos pondría al abrir el archivo estático directamente).
Más adelante tiene más ventajas: tener reloading, generar los archivos estáticos en memoria en lugar de disco (más rápido) y al generar el bundle con hashes que el index.html se compile con el hash correcto automáticamente. :)
ya, si eso lo tengo claro. Igual hay algun concepto que no tengo claro. Pero si por ejemplo hicieros una app con create-react-app y depues ejecutaramos el script build, abrimos el index.html generado en la carpeta build. Veremos una pagina en blanco. Si en lugar de abrirlo a mano usamos servor u otro servidor nos mostrará el contenido... porque!!?
¡Hola, Miguel!. Me encanta la forma en la que explicas y compartes tus conocimiento.Este video de webpack estuvo super, sin embargo me gustaria aprender mas de webpack ojala pudieras compartir un video de múltiples entry points en webpack . Gracias. Saludos!!!
Saludos me encanto la clase una sola pregunta donde puedo ver un ejemplo y explicación mas completa para uso de sass o scss por ejemplo cargar fuentes otf svg directo del webpack por ejemplo para proyectos ya un poco mas funcionales
Genial cuándo las explicaciones se centran en el porqué y no en el cómo.
Nuestra memoria es limitada (especialmente la mía) para aprender o memorizar configuraciones, pero si, como bien indicas, conocemos los motivos de por qué las cosas son así y no de otro modo, aprenderemos la lección para siempre (algo se me puede pasar, pero para ello he tomado apuntes :D).
Gracias.
P.D: Si te sacas un vídeo de estos cada 15 días explicando algún concepto complejo (algo así como una "master class" pero en "pequeñito" sin volverse muy loco :D) sobre algún framework o patrones o cualquier otra cosa que este a la orden del día a la hora de desarrollar aplicaciones y te creas una cuenta de Patreon, aquí tienes a uno que se afilia a ti.
Uno de los mejores instructores que he visto (para la comunidad hispana y también superando a los de habla inglesa). Gracias!
Para mí el mejor vídeo para entender Webpack, el "qué" y el "por qué" de lo que pasa al usar la herramienta. Si estás interesado en aprender esta tecnología no lo dudes, fundamental.
Muchas gracias por tu comentario José María! Justamente lo que comentas era lo que buscaba con el vídeo, y desmitificar su dificultad! :)
4 Meses después...
Que genial la forma en como explicas las cosas, nunca había visto un vídeo de tu canal(aunque estaba suscrito), un motivo más para darme una vuelta en tu canal con más frecuencia, muchas gracias por tomarte el tiempo para compartir tus conocimientos, tenía nulas bases en Webpack, pero con lo que enseñas, es un excelente punto de partida para ir y aprender aún mucho más, mi admiración con lo que haces, eres un gran maestro y te sale tan natural la manera en la que explicas. Completamente agradecido, saludos desde Honduras!!.
Cristian, te agradezco de corazón semejante comentario! 🤗 Muchísimas gracias! Cosas como esta animan un montón a continuar compartiendo! 🔝
@@midudev de nada gran maestro, aún me preparo con JS para pasarme a tus videos de React, que igual pienso están cargados de contenido de calidad. Y adelante, aún tratando de lograr conseguir mi primer trabajo de desarrollador, y sé que tus vídeos serán parte de mi crecimiento como programador, nunca se termina de aprender, siempre hay algo nuevo que hacer, espero que siempre seas un ejemplo a seguir para muchos. Saludos maestro, con lo poco que he visto, estoy convencido que eres excelente en lo que haces, sé que con sacrificio y dedicación puedo alcanzar tu nivel a futuro. Mi admiración siempre para tí
Hermano no tenes idea todo el tiempo que he estado buscando como hacer el entorno de desarrollo, lo hacia con webpack server pero nunca me funcionaba, con el servor me anduvo por fin! Mil gracias!
No se porque desde hace tiempo me caias mal jeje, pero despues de ver este video de webpack paso a paso te digo que fue en extremo excelente y el mas detallado y las simplesa con que lo explicaste no tiene comparacion, muchos complican webpack, tu lo hicistes sencillo . Te felicito, sigue asi con ese detalle en explicar las cosas que muy pocos tienen y ya me hago desde hoy tu seguidor.
🥺🥺🥺🥺 gracias
@@midudev pero explicarte el problema por aca seria dificil, tienes algun correo personal donde pueda enviarte mi problema, se que tu podrias encontrar la solucion y disculpa el abuso de mi parte.
Excelente video, por fin entendí webpack !!! sin tenerle terror a configurarlo, muy buena explicacion, muchas gracias amigo ....
Un placer Andrés. Me alegro mucho que te haya servido!!!
Me encanta la forma que explicas, cosa que no lo logra cualquier youtuber dev, gracias por tu contenido.
Recién estoy viendo este video y me encantó! Excelente forma de explicar, saludos!
Gracias! 🤗
Hoy a un año del live streaming, me topé con él y me resultó muy útil para introducirme al concepto! Gracias!
Genial Mauricio!!!! 🤩🤩🤩
Yo también tenía mis prejuicios (negativos) hacia Webpack...pero...es...que...lo...explicas....tan....bien..... CRACK. Te has ganado un suscriptor.
Muchas gracias Abelardo!!! 🤗
Genial! Este video me ayudó mucho para entender qué es y cómo funciona webpack 📦. Que buena forma de explicar 😎, grandes conocimientos y gran persona. Un saludo desde estas latitudes! y muchas gracias!
Habia tomado dos cursos de Webpack y ninguno habia podido entender a configurarlo, muchas gracias eres un crack.
Pd: Ya no demoro horas configurando WebPack, gracias.
Claro que sí, si es que la dificultad de Webpack es todo fachada! Me alegro que te haya servido!!! :)
1:04:00
4) Plugins
Un genio!! Que buen video, suscripción y like obviamente! Saludos desde Argentina.
Miguel sos un groso., como decimos aca por Argentina. Hablas en un lenguaje accesible para todos y haces que todo sea mucho mas simple de lo que parece ser en un principio. Excelente video y el curso de react gratuito :)
Muy buen tutorial. Lo mejor es que un año después usando en mi caso Webpack 5 sigue siendo útil.
Aunque no lo vi en vivo xq estaba trabajando y no eh visto el recordatorio 😑, me lo vi completo y les digo a todo el que lea este comentario que vea este genial video.
Pd: podrías por favor explicar lo de sass?
Gracias x enseñarnos.
👇 Like si lo viste completo.
Muchas gracias por tu comentario!! Me apunto lo de sass para un siguiente vídeo. 👍
Excelente, muchas gracias por compartir su conocimiento. En este momento estoy haciendo su curso de React avanzado en Platzi y está genial.
Perfecta Explicación!! Muchísimas gracias por tu tiempo y disposición!!!
Un placer Arturo! 🤩
gracias por compartir tus conocimientos con la comunidad
Exelente explicacion. Estoy estudiando React.js y este video me dio una exelente base. Gracias
Como siempre excelente vídeo, realmente me quitaste el miedo a Webpack.
Saludos y gracias por compartir.
Esa era la idea! Que si se explica bien y poco a poco, no da tanto miedo! :D
Al fin alguien que sabe explicar, gracias!!
Gracias Mario!!!
una perlita este video!! muy claro con todo, gracias! :D
capo midu! muchas gracias por tu aporte
Una maravilla. Quedé medio enredado por tanta info de una. Pero aún así está todo muy bien explicado.
PD: Siempre tengo ganas de caer a los lives pero nunca llego, horarios complejos 😫. Saludos desde Argentina, crack!
Explicas súper bien!!
Gracias!!!!
41:16 poco a poco veo a detalle esto.
Excelente!!! Gracias por tanta info
excelente video me ayuda a reforzar mis conocimientos!!
Buenísimo que te sirva César!!! 💪
dios mio que joven, miduuuuu
Excelente ayuda hermano, infinita gracias, me solucionaste muchísimas dudas! :D
Me fue de muchisima ayuda tu tutorial ,estaria de lujo que hicieras un video con respecto al public path para la configuracion del favicon y el manifest json
Me lo apunto Rodrigo! Gracias por comentar :)
Muy buen live, gracias midudev
Gracias Andrés! Genial que te haya gustado 🙃
Estoy viendo tu vídeo de Webpack para poder hacer tu curso de platzi de React avanzado. Se queda todo en casa.
Jajajaja qué bueno!!
Super bien explicado @midudev - precisamente, instalando storybook con create-react-app, me aparecía un conflicto de versión de babel-loader. La única solución que encontré fue hacer un downgrade del babel-loader para eliminar el conlicto. Gracias a este video, he entendido mejor el origen del problema. En todo caso, storybooks sigue sin resolverlo! A alguien le ha ocurrido lo mismo ?
Muchas gracias, excelente explicación ..... el de distintos loaders estaria muy bien :)
Hola Cesar! Lo tengo pendiente, a ver si termino de sacar tiempo que ahora mismo estoy de mudanza y no hay manera de terminarla! jajaja Gracias por comentar!
Eres un capo!!!
Nuevo suscriptor :D
Me ha gustado el video, estaría bueno por ej. un video de como integrar sass con webpack, (soy un noob total y recién estoy aprendiendo js y próximamente react, el backend ufff) los estoy usando pero sin integrar los activo en forma separada en dos terminales y no me parece muy efectivo jajaja
Buen video!! me aclarastes dudas del porque usaba cada que cosa y que hace cada una en que punto jajajaj, uno la usa y ni sabe que a hace a veces.. seria interesante una explicacion sobre los babel-jest y la configuracion para pruebas unitarias, y el tema de configurar y empaquetar todo el scss importado en los componentes de react.. ya que siempre me quedan declarados en el header con al etiqueta jajaja pero buen video!
Muchas gracias Jorge por tu comentario! Me apunto lo que dices para próximos vídeos. Como mucha gente me ha pedido lo de sass, seguramente haga un vídeo sobre la carga de estilos con Webpack muy pronto. :) Y veremos como evitar que queden en la etiqueta style para que se exporten en estáticos. ;)
@@midudev genial!! A veces no puedo ver los vídeos en vivo porque en chile siempre son las 16:00 y estoy trabajando jajaja pero los veo dsps!
Excelente video
Gracias!
Brasil aqui, Ótimo video,
Paulo! Muito obrigado, desde España. :)
Hola, muchas gracias por el video, por favor, en el minuto 7:15 indicas sobre servor, y haces referencia a que lo has explicado en el último live, cuál es el link a ese live?
Me respondo yo mismo x si a alguien le sirve: ruclips.net/video/f-Mpz_vKx28/видео.html
Excelente video!!!!!
despues de que lo hiciste como funcion me perdí. pero con haber comprendido lo de antes de eso me basta.
Gracias!!
Un placer!!!
Excelente, gracias por compartir, en serio que se aprende muchísimo con tus explicaciones.
Por si te animas más adelante, por ejemplo el uso del css actualmente, muchos devs usan framework css, como tailwind css, bulma, bootstrap, otros devs preprocesadores como sass, stylus y otros css-in-js como styled components, emotion etc. Son gustos, pero ¿que ventajas y desventajas tiene cada estilo de los anteriores a la hora de elegir el modo de emplear css actualmente?, agregalo al checklist de tu lista de videos Miguel jaja un saludo frontender 👍
muy buen material , te hago una consulta , no pude encontrar el video donde hablas sobre mudulos js que mencionas , me interesaria verlo , felicitaciones!!
Aquí lo tienes Facundo! ruclips.net/video/f-Mpz_vKx28/видео.html
@@midudev mil gracias! sldos de argentina!
Puedes presionar control+b para ocultar los archivos de la izquierda! (el explorador de archivos)
Saludos me encanto la clase una sola pregunta donde puedo ver un ejemplo y explicación mas completa para uso de sass o scss por ejemplo cargar fuentes otf svg directo del webpack por ejemplo para proyectos ya un poco mas funcionales
Amo tus videos
1:04:00 para plugins
Hola! Hice un modulo como explica en 14:28 para exportar una funcion desde otro fichero. Pero esta funcion utiliza a su vez otras funciones, que ponga donde las pongas me salta "funcion indefinida". Alguien me puede decir como resolver esto? Gracias!
Hola Francisco! Sin código es un poco complicado, pero si dice que la función es undefined es que seguro que no la encuentra. ¿Estas importando la función con el nombre correcto? ¿Has mirado la consola por si no encuentra algún archivo? ¡Suerte!
si usan webpack-cli 4 o webpack 5, cambiar de webpack-dev-server a webpack serve.
Oye con Webpack puedo automatizar tareas de pug (compilarlo a html pure) como se hacía con Gulp?
Hola! Tengo la siguiente duda. Qué sería lo correcto a la hora de hacer un deploy a producción con webpack? Hacer un empaquetado cada vez que queremos desplegar? o hacer commit de los ficheros originales y también fichero empaquetado y minificado? Es que no veo mucho sentido hacer esto cada vez que queremos hacer un despliegje a prod. Cuál es la forma correcta de trabajar? Gracias y saludos!
Es posible replicar fragmentos de código en varias páginas con el complemento html-webpack-plugin, pero por lo que entiendo, todo el código debe insertarse en webpack.config.js, creo que sería confuso para códigos grandes. Tiene un video en el que crea una página y replica, por ejemplo, un fragmento de código en otra página? Ejemplo: encabezado o pie de página.
54:45 La locura es hacer lo mismo una y otra vez esperando obtener resultados diferentes
Que krak!
Muchas gracias por compartir conocimiento 😊
Tengo una duda referente a lo que has comentado del entry point.
¿Eso quiere decir que con la configuración por defecto, webpack ignora el "main": "index.js" del package.json?
Un placer Joan!
El main del package.json está pensado exclusivamente para la resolución del módulo cuando se importa. Es el entry point, sí, pero a nivel de módulo.
Cuando en Webpack hablamos de entry point es a nivel de toda nuestra aplicación. Le estamos diciendo a Webpack "por donde empieza" nuestra aplicación. Luego, al hacer un import de un paquete externo que tengamos en el node_modules, revisará el campo main para saber dónde tiene que encontrar el punto de entrada pero del módulo.
¡Espero que te haya servido la explicación!
Tu video es muy bueno, pero pensé en hablar de archivos parciales. Estoy usando el complemento "html-webpack-partials-plugin" para evitar la repetición del código, pero me equivoco cuando incluyo una imagen en estos archivos. ¿Tiene un video que explique esto?
Hola Alexandre. Me lo apunto. No he usado nunca ese plugin, pero el propio html-webpack-plugin tiene soporte para partials: github.com/jantimon/html-webpack-plugin/blob/master/examples/custom-template/template.html
Una cosilla Midu, ¿dist debería incluirse en el .gitignore? Gracias de antemano!
Hola Juan Luis! Sí, no deberías subir al repositorio el código empaquetado. 👍
@@midudev Muchas gracias!
No entiendo x q en mi caso al generar los archivos en el dist el script del html se me crea en el encabezado; cómo puedo resolver eso?
cuál es la funcionalidad de los hashes? veo que no lo explico y en mi curso lo usan bastante y tampoco lo explican bien.
Hola Miguel! ¿Cual es el linter que estás utiliando?
Uso standard: standardjs.com/ Es mi favorito y se configura super rápido. :)
@@midudev gracias Miguel! aún así veo que en la barra inferior de tu VSCode que tienes prettier instalado. ¿Qué settings.json tienes para que estos dos plugins no entren en conflicto?
tengo un problemita de dos meses con webpack laravel-mix vuetify y no logro cargar scss y nadie tiene un resultado concreto y limpio, si puedes hacer un video de igual veré este haber que pasa.!
luego de instalar "webpack-dev-server" , en el archivo package.json cambiar a "dev": "webpack serve",
Sí, es posible que haya cosas que han cambiado últimamente. :) Gracias por el comentario!
El modo production da un fallo al hacer el spread operator finalmente lo que queda es un array dentro de otro array no?
Hola Fernando. Sí, tienes razón, al final como lo dejé para lo último lo hice un poco por encima y no me preocupé bien si funcionaba. La cosa es que el código debería ser así:
...(mode === 'production' ? productionPlugins : []),
donde el segundo array podría ser el modo desarrollo.
...(mode === 'production' ? productionPlugins : developmentPlugins),
Y para ello, tendríamos que tener los arrays definidos, claro:
const developmentPlugins = []
const productionPlugins = [
new CompressionPlugin()
]
@@midudev Muchas gracias y muy bien explicado todo, había hecho cosas con webpack antes y este video ha servido para alcarar bien las bases.
1:37:40 Esto ya no pasa. El operador ?. actualmente se encuentra soportado por Babel. (EDIT: era un problema del parseador de Webpack.)
El problema no era Babel, era el parseador de Webpack. Con Babel en el vídeo se ve que funciona.
@@midudev Gracias! Acabo de terminar el video justo ahora, y ver que subiste hace poco el tuto de Webpack 5. ¿Qué nivel debería tener de webpack antes de meterme de lleno con React? Gracias y un abrazo desde Madrid.
minuto 27:40 wooh 154 conectados es un monton
Hola como estas, necesito desisntalar el webpack de mi equipo sabes como ..??? ayúdame lo necesito urgente. Gracias.
Si lo tienes instalado de forma global, cosa que no deberías haber hecho, npm install -g webpack.
Si lo tienes en un proyecto, con borrar la carpeta node_modules ya lo tendrías.
¿Que diferencia hay entre usar webpack y gulp?
¿Qué pasa si la app solo tiene archivos de CSS y HTML, también se puede empaquetar?
Me sale error in main cuando hago npm run build :c
A ver tu archivo json.¿
Minifica y oglificaa demas de transpilar!
Alguien me puede ayudar?, tengo un error, cuando pongo webpack --mode development --watch escrito me dice que tengo necesito webpack-cli (que ya lo tengo descargado) al finalizar la descarga me tira error porque no encuentra el archico webpack-cli en el .json y cuando pongo npm run dev solo se me actualiza el codigo cuendo guardo el .json pero los .js no, no pasa nd tengo que cerrarlo y volverlo abrir, gracias desde ya
46:27 ahi me quede
Y eso? 🤣
"... que podamos deployar ..." he visto los dientes del verbo desplegar desparramados por el piso
Eso debieron pensar de fútbol en su día para no decir balompié. Creo que nos podemos permitir algunos anglicismos, sobretodo en tecnología. Pese a los dientes. 🦷🦷🦷 Jajajaja 😝
Deployar no es un anglicismo, no? Es una palabra inglispanish 😅
37:29 "React no es javascript"
Actualmente el JS Optional Chaining esta soportado sin necesidad de hacer la configuracion
tambien para el hash para el filename en output del archivo de configuracion en webpack paso de ser minuscula en lugar de camelcase
antes app.[contentHash].js ---> despues app.[contenthash].js
35:13 por esto no me gusta react!! "Por que esto no es javascript valido" por que no es javascript!
2021:
npx webpack-dev-server cambiar a
npx webpack server