WEBPACK 5 - ¡Curso práctico DESDE CERO! 📦

Показать описание

🔥 Aprende a utilizar WEBPACK 5, el empaquetador de aplicaciones web más utilizado del momento. Veremos cómo crear paso a paso una aplicación con React, cómo crear nuestro entorno de desarrollo y optimizarla.

Esta clase es parte del FullStack Bootcamp JavaScript.

Mira todas las clases aquí:

Código fuente del proyecto:

SEGMENTOS 🎬
00:00 - Introducción
00:44 - ¿Qué es WEBPACK?
01:53 - El punto de entrada de tu aplicación
03:18 - Creando aplicación desde cero con Webpack
05:00 - Instalando Webpack y el CLI desde la terminal
07:47 - Creando configuración de Webpack
11:15 - Usando Babel en Webpack. ¿Qué es un Loader?
16:30 - Usando el nuevo jsx runtime de React
18:35 - Refactorizando configuración de Webpack
20:53 - Cargando CSS en nuestra aplicación con Webpack
26:30 - Usando plugins en Webpack para el HTML
29:00 - Creando un entorno de desarrollo en Webpack
34:15 - Activar Source Maps en Webpack
40:45 - Crear configuración de desarrollo y producción
42:00 - Usando hashes en los archivos de Webpack

Рекомендации по теме

Комментарии

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.

VicHouse

He visto muchos cursos que envuelven y dan vueltas, pero esto... esto es oro! 🥇🥇

_niiico

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.

ricardohernandezmendez

He visto muchos tutoriales de Webpack y este sin duda es el mas conciso y el mejor explica los conceptos claves.

javiermadueno

Dios Santo esto si se ve un poco complicado de entender a la primera. Definitivamente eres un crack y una biblioteca andante.

EdisonRivas

¡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
}
},

matiassierra

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

markosmk

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.

jorgebarron

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

victorballarin

El video es excelente, la calidad del contenido y forma de simplificarlo es simplemente excelente!

josemontoyaguzman

vas al punto y das buenos consejos sin alargar en otros temas que no son del curso. Muy bueno!

comatose_e

Me surgió la duda de webpack me puse a investigar y este mini curso ha estado demás de genial!

frako

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!

gonzaloinvernizzi

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

francoXHardCore