Curso de Webpack - jonmircha

En este curso te enseño a configurar Webpack el empaquetador de archivos para aplicaciones JavaScript modernas más popular y usado por los Framewors y librerías Frontend.


📦 RECURSOS



🎥 VIDEOS RECOMENDADOS

🟣 Configuración de VSCode:


📖 CURSOS RECOMENDADOS



📝 ÍNDICE:

1. 0:00:00 - Bienvenida
2. 0:01:08 - Introducción a Webpack
3. 0:06:25 - Documentación
4. 0:08:34 - Instalando Webpack y su CLI
5. 0:12:48 - Webpack sin configuración
6. 0:17:06 - Modos de Webpack
7. 0:20:59 - Diferentes puntos de entrada y salida desde la CLI
8. 0:26:22 - Transpilando JS con Babel
9. 0:37:44 - Inyección de JS en HTML
10. 0:50:13 - Extracción de CSS
11. 0:58:34 - Servidor Web de Desarrollo
12. 1:06:04 - Manejo de archivos
13. 1:22:50 - Haciendo desarrollo web con Webpack
14. 1:36:49 - Manejo de urls en CSS
15. 1:43:58 - Optimizando Imágenes
16. 1:52:01 - Manejo de JSON
17. 2:01:17 - Múltiples puntos de entrada y salida
18. 2:09:29 - Componente Hola Mundo Vanilla JS
19. 2:15:04 - Componente Hola Mundo TypeScript
20. 2:24:11 - Componente Hola Mundo React
21. 2:48:09 - Despedida






#Webpack #AprenderWebpack #WebpackDesdeCero

[patricioandrestoribio]

Qué lujo de canal, Jon!
Siempre que estoy pensando cómo encarar algún proyecto o desafío, de una u otra manera llego a tu contenido. Está hecho realmente para ser profesional.
No me canso de recomendarte porque vale la pena cada segundo.
Otro gran curso! Felicitaciones!

[gabyg]

Que gran profesor! vengo de un curso de webpack en Platzi que se hizo bastante dificil de entender. Pero este profe sin duda es un genio explicando

[josedanielrodriguez]

super agradecido! excelente contenido, es algo complicado de entender al principio pero teniendo a mano la documentacion todo se puede. muchas gracias!!

[thouma-dev]

Excelente poder tener este tipo de contenido disponible, muchas gracias

[estebangabrielgarciasanche]

Excelente curso Jon! me lo vi entero y ya hice el mini sitio web con webpack! impresionante todo lo que se puede hacer...

Dejo una solución por acá para los que le paso lo mismo que a mi:
En el minuto 1:23:00 en adelante por favor no usen el file loader esto => use:["file-loader?name=assets/[name].[ext]"], solamente usen type:"asset" es todo, y con respecto al Css extract plugin, déjenlo todo como en el principio no añadan el path porque como que se acomodó.

De lo contrario a mi me daba error, por allí alguno le pasa igual en el futuro.

Jon muchísimas gracias, saludos!

[gianicolajara]

Muy buena clase profesor, muchas gracias por esta gran ayuda :), por cierto si tienen el error al cambiar el archivo de .js a .ts creando el componente HelloWorld.ts, es porque tienen que instalar unas dependencias extras, el error dice algo así como : "lodash.js is not a module" deben instalar esto: npm install --save @types/html-webpack-plugin, bueno al menos a mi me salió ese error, espero ser el único.

[chalvarenga]

La sencillez con la que explicas es impresionante. Estoy tomando otros cursos (para más es pago) y, la manera en la que explicas es 1.000 veces más digerible. Tremendo tu curso realmente. 👏👏

P.D.: Si hicieses cursos pagos sin dudarlo compraría.

[diegocaceres]

Muchas gracias Jonh la verdad sigo todos tu cursos! Soy Analista de sistemas, y en la facu tuve 1solo profesor como vs me enseñó Java! Y ahora te encontré gratis y con buena disposición! La verdad es una bendición!

[cooldevil-]

Uhhh que buena ondaaa!!! Voy a salir full stack entre tus cursos y la facu.

[vercety]

La verdad que mis felicitaciones porque jamás había visto explicado tan bien webpack. Y lo mismo digo del curso de react que estás haciendo

[CristianPerez-ypyj]

Jon muchas gracias por aportar tus conocimientos para aquellos que necesitan aprender por su cuenta como es mi caso. Muy buena forma de explicar y muy detallado estoy con react ahora mismo despues de haber terminado este curso de webpack que me ha venido como anillo al deo, muchas gracias y si subes mas curso estare encantado por hacerlos, gracias un saludo desde España, que vaya bien la cosa

[carlos]

Muy bien estructurada la explicación, gracias.

[addevmoises]

Ya es momento de verme este curso, ya que estoy en mi último semestre y me están enseñando Ionic con Angular para desarrollo de app móviles híbridas, por lo tanto, typescript también. Además, viéndome este curso me quedaría por ver tu curso de React y la última parte del curso CSS nada más, eso me pone muy contento ya que estaré al día con tus cursos muy pronto para seguir con tus futuros cursos de backend :)

[a_serpent]

muchas gracias, excelente curso, saludos desde Bogotá

[alexdurand]

Chicos para los que tienen problema con Webpack en el file-loader. Deben saber que en la documentacion en Modulos de Activos nos indica que hay nuevos tipos de modulos de activos que son reemplazables en el file-loader, url-loader y raw-loader, uno de ellos son assets-resource.
En conclusion ejecuten esto en su webpack.config.js:
{
test: /\.(jpe?g|png|gif|svg|webp)$/i,
type: "asset/resource"
},
Recordar que estamos en webpack5, si vienes del futuro revisa la documentacion si algo cambio.

[rayito]

Contenido de calidad. Profesor JonMircha eres el mejor explicando y exitos con el canal este año si llegaremos alos 100k

[juanceciliocespedesbatalla]

muchas gracias jon.... por compartir tus conocimientos.... al inicio no tenia ni idea sobre desarrollo web... te agradezco de corazón por guiarnos... en este nuevo de vemos en tus otros contenidos.. mil disculpa si te pregunto....jejejej soy muy preguntón a la hora que no entiendo

[JuanPeñaloza-kh]

Hoy aqui añadiendo esta tecnologia a mi stack, como siempre con el mejor 😁

[estebanoctaviopavezllanca]

Estimado primero que todo, muchas gracias por el curso de webpack, el único inconveniente que tuve fue el capitulo 15 con el loader de optimizador de imagen no logre hacer correr, debe ser porque trabajo desde windows, el resto espectacular muchas gracias

[ivorguzman]

Amigo Gracias exelente curso !, y hablando de otro tema ese look es como más sofisticado y te da un buen porte