¿Qué es Webpack?

🎲 ¿Qué es Webpack?

Module bundlers son herramientas de frontend que nos permiten usar archivos con módulos JavaScript, entre otras características y convertiros a un JavaScript el cual el navegador pueda entender

• Webpack es una herramienta que nos permite preparar nuestro código para llevarlo a producción (module bundler)
• Webpack nos permite trabajar con
  • HTML
  • CSS
  • JavaScript
  • Archivos estáticos
  • Imágenes
  • Fuentes
• Tambien nos permite tener un modo en desarrollo para nuestros proyectos para hacer pruebas
• Nacio en el 2012, desde ese entonces varias empresas lo usan como ser
  • Twitter
  • Instagram
  • PayPal
• También nos permite
  • Gestionar dependencias
  • Ejecutar tareas
  • Conversión de archivos
• Nos permite trabajar en módulos
  • Permitiéndonos tener un código separado en desarrollo, pero en producción en una fuente
  • Webpack permite tener módulos de JS en formato
    • AMD
    • Common JS
    • ES15

RESUMEN: Webpack es un module bundler que nos permite trabajar con una variedad de tecnologías web empezando desde HTML y terminando con JS. Además de tener soporte para archivos estáticos

Les recomiendo esta lectura que habla un poco más en profundidad de los module bundlers y cómo funcionan

• 📖 Lectura

Al parecer el curso esta antes de la hora, mucho éxito a todos!
¿Qué es Webpack?
básicamente webpack es un paquete de módulos y esto lo que hace es que nuestra aplicación puede tener archivos JavaScript o jsx, archivos sass, imágenes y empaquetarlos como si fuera una caja (todo en uno)

Webpack se puede configurar desde la terminal usando un CLI o un archivo de configuración especia llamado webpack.config.js

Apuntes con notas y aporte de compañeros!

¿Qué es Webpack?

Webpack es un module bundler. Los module bundlers son herramientas para frontend devs que suelen usarlo para empaquetar los JS modules en un único archivo de JS que pueda ser ejecutado por el navegador.

Las razones principales por que se usan webpack son:

• Algunos navegadores no soportan el sistema de modulos.
• Te ayudan a manejar las relaciones de dependencias con tu código.
• Ayudan a cargar assets en orden de dependencias, imágenes, css, etc.

Tener en cuenta que webpack es una filosofía que nos va permitir trabajar de forma modular. Es como menter todo lo que vamos a necesitar en un proyecto en una caja y después poder sacar todo listo para producción.

¡Hola, Platzinauta!
A lo largo del curso te encontrarás con varios errores en tu código, eso es porque el curso está un poquito desactualizado, puedes avanzar el curso a la par de leer la documentación de webpack, No te rindas, tanto en la sección de aportes como en la sección de preguntas los demás Platzinautas ya agregaron soluciones a varios de los errores que saldrán en tu código.
Y nunca esta demás una googleada al error que tienes y aportar su solución. Nunca pares de aprender. 🙋🏿‍♂️

Como acotación, Webpack no es exclusivo de Frontend como muchos devs en ocasiones creen, mientras sea un Bundler, su uso puede ser muy genérico, lo vemos por ejemplo para trabajar en el Backend con Serverless y Typescript casi que siempre vamos a utilizar un bundler como webpack o esbuild para facilitar las configuraciones.
Ejemplo:
https://www.serverless.com/plugins/serverless-plugin-webpack

Totalmente de acuerdo, Webpack es una librería que nos permite crear , modificar y co-desplegar multiples tecnologías que, de otra forma, sería engorrozo hacer.

Webpack toma los principios de Gulp ya que podemos determinar aquello elementos que tomarán partido durante el proceso de fusión de códigos en simples archivos entendibles por la mayoría de los navegadores.

Por último, debo comentar que Webpack es una herramienta que posee una curva de aprendizaje complicada y larga, la razón es porque puede resolver múltiples necesidades y extraponerlas a Docker, por ejemplo.

Webpack es muy bueno, pero denle una revisada a vitejs, es super rapido y trabaja con los modulos nativos de js.

En su esencia, webpack es un agrupador de módulos estáticos para aplicaciones modernas de JavaScript. Cuando webpack procesa tu aplicación, construye internamente un gráfico de dependencias que mapea cada módulo que tu proyecto necesita y genera uno o más paquetes.

.
https://webpack.js.org/concepts/

Me encontré con esta frase cuando estaba indagando más sobre la optimización y creo que viene al caso de personas que como yo pensábamos que esto era innecesario;

not learning about bundling early-on or using boilerplate is just setting yourself up for pain down the road.

https://medium.com/@accardo.steven/a-solid-webpack-config-and-the-knowledge-behind-it-78be39f5700d

Webpack me parece un tema complejo, espero que con este curso pueda utilizar todo el poder que tiene.

Esto se va a poner chido

webpack es un module bundler. esto sirve para importar multiples modulos para que el navegador lo entienda y ademas ayuda a manejar las dependencias entre modulos.

Es una herramienta para preparar el código para enviarlo a producción. Nos permite trabajar con JS, CSS, imagenes, fuentes, archivos estáticos. Nació en el 2012. Nos permites separar el código en distintos módulos.

Justo lo que queria 😄.

Buen día, aquí te comparto mis notas sobre el curso, espero te sea de utilidad (Gran crédito a
Fernando Quinteros Gutierrez):

• Notas del curso de Webpack.
• Para activar el modo oscuro presiona CTRL + SHIFT + L.

web-pack-course

Webpack nació a finales de 2012 de la mano de un solo desarrollador (Tobias Koppers, alemán), y en la actualidad es utilizado por miles de proyectos de desarrollo web Front-End: desde frameworks como React o Angular hasta en el desarrollo de aplicaciones tan conocidas como Twitter, Instagram, PayPal o la versión web de Whatsapp.
Webpack se define como un empaquetador de módulos (un bundler en la jerga habitual) pero que hace muchísimas cosas más:

• Gestión de dependencias
• Ejecución de tareas
• Conversión de formatos
• Servidor de desarrollo
• Carga y uso de módulos de todo tipo (AMD, CommonJS o ES2015)

Y esto esto último lo que hace que destaque en especial. Es una herramienta extremadamente útil cuando desarrollas aplicaciones web diseñadas con filosofía modular, es decir, separando el código en módulos que luego se utilizan como dependencias en otros módulos. Una de las cosas que hace realmente bien Webpack es la gestión de esos módulos y de sus dependencias, pero también puede usarse para cuestiones como concatenación de código, minimización y ofuscación, verificación de buenas prácticas (linting), carga bajo demanda de módulos, etc…

Si hubiera buscado que significa la palabra bundler al principio del curso, habría sido más sencillo para mí entender esta herramienta, espero te ayude 😄
 

𝕓𝕦𝕟𝕕𝕝𝕖𝕣

 
1. a person or machine that packages something as or into a bundle. "the bundlers packaged finished yarn for shipment"

 
1. una persona o máquina que empaqueta algo como o en un paquete.
 

me encanta platzi x q nos enseña mucho mas

Webpack - herramienta que nos ayuda a mandar nuestro proyeto a producción, muy importante del lado del Frontend. No solo se puede trabajar con JavaScript. Fue lanzado en 2012 y multiples empresas importantes lo utilizan. Sigue una filosofia en la que se contiene y empaqueta distintos módulos para al final unir todo en un solo elemento.

Tener en cuenta que webpack es una filosofía que nos va permitir trabajar de forma modular. Es como menter todo lo que vamos a necesitar en un proyecto en una caja y después poder sacar todo listo para producción

Llevo mínimo 3 meses esperando comenzar éste curso e actualizarme en el tema. No hay mejor manera que con el gran óscar Barajas. Gracias Platzi.

A seguri el aprendizaje, ahora sigue webpack y seguir expandiendo los conocimientos del entoeno Javascript, ya que este es fundamental en el desarrollo web profesional, con todas las ganas y nunca pares de aprender 💪😎

Curso de webpack

¿Qué es webpack?

Todas las particularidades que se debe considerar antes de llevar un sitio a producción.
es una herramienta que nos permite preparar nuestro código para producción.

• podemos trabajar con todo tipo de archivos y fuentes
• tener un modo en desarrollo que nos permita trabajar con cada particularidad en nuestro proyecto
• Gestiona dependencias, tareas, conversión de formas, habilitar entorno de desarrollo local que te permita hacer tus pruebas en tu computadora
• Webpack es una filosofía que permite trabajar de forma modular con la cuál nosotros dividmos nuestro código en diferentes módulos para dividirlo en uno mismo

No mames!!!
enserio lo sacaron al innombrable???

Pues a darle con todo porque ya quiero entender Webpack de una vez por todas

👌

Hola, antes de continuar con este curso me gustaria agregaran o actualizaran una seccion donde hablaran (en caso de ser asi) el porque debemos estudiar webpack, si todavia es relevante en el mercado o deberiamos migrar a nuevas herramientas como Turbopack o Vite y no estamos aprendiendo algo que en el corto plazo dejara de ser relevante.

Saludos a todos.

Para los que comiencen este curso sin saber nada de Webpack

Este curso es de hace 2 años, creo que más, si bien la mayoría de los conceptos siguen iguales, les recomiendo leer siempre los aportes de los compañeros en cada clase para estar atentos a incompatibilidades entre dependencias y nos va tocar leer mucho la documentación.
Este curso necesita una actualización, y si ven que les cuesta muchísimo webpack, como a mí, tenemos otras alternativas a Webpack y con un uso mas sencillo y práctico, para que no se demotiven.

de los mejores profesores de Platzi!!! Buenisimo

Herramienta para preparar el código que creamos para enviarlo a producción, nos sirve para javascript y otros tipos de archivos. Nos permite tener versiones de desarrollo y producción para trabajar en distintas soluciones.

Trabajamos de manera modular, ayuda mucho del lado frontend.

¿Qué es webpack?

Es un module bundler de Javascript de código abierto hecho principalmente para JavaScript pero puede transformar activos de front-end como HTML, CSS e imágenes.

💡 module bundler es un software que toma nuestro código escrito en módulos y lo empaquetan en un único archivo.

• Nació en el 2012, y variar empresas lo usan desde entonces como:

  • Twiter.
  • Instagram.
  • PayPal.

• Su función principal es preparar nuestro proyecto para ponerlo en producción.

• Tambien nos permite:

  • Gestionar dependecias.
  • Ejecutar tareas.
  • Conversión de archivos.
  • Habilitar un entorno de desarrollo local.
  • Tener módulos de JS en formato:
    • AMD.
    • Common JS.
    • ES15.

¿Qué son los módulos en Javascript? ¿Qué es CommonJS, AMD y ECMAScript 6?

webpack

Ya termine el curso y les digo que van a tener que investigar mucho por su cuenta en cada sección.
Para esta sección les dejo esta pagina donde explica mucho mejor webpack

Recomiendo ver este recurso externo para tener una idea general antes de comenzar más profundo con Oscar. Sobre todo a los que esta comenzando el curso o los que han tenido que volver a empezarlo. Da una explicación clara y general de los temas que se van a tocar en este curso. video

El curso se encuentra desactualziado y el Oscar Barajas va a la velocidad de la luz, no da a entender cada pasa que da y es muy confunzo, terminas investigando la seccion de aportes y paginas para reforzar lo que el profe repite.

Nuevo mes, iniciando un curso nuevo, vamos a con todo!

¿Qué es Webpack?

¿Qué es?

• Una herramienta que nos permite preparar el código para enviarlo a producción.
• Se refiere a una “filosofía” en código que nos permite trabajar de manera modular. Sirve para separar las particularidades del código y luego poder unirlos en un Sistema conjunto.

¿Qué nos permite?

Trabajar con:

• Archivos estáticos.
• CSS.
• Imágenes.
• Fuentes.
• Gestionar las dependencias.
• Ejecutar tareas.
• Conversión de archivos de imagen.
• Habilitar entorno de desarrollo local para hacer pruebas en la computadora.

Suena muy bien el curso. A darle!

Webpack es una herramienta que nos ayudara a preparar el código que escribimos para enviarlo a un ambiente de producción.

He escuchado mucho webpack, como palabra, pero no tenia idea de que era hasta hoy

Promete mucho este curso… vamos a darle.

QUE ES WEBPACK?
Una herramienta que nos va a permitir preparar nuestro código para enviarlo a producción.
Nos permite trabajar con:
JS,archivos estáticos, CSS, imágenes, fuentes. Preparar cada una de las particularidades que viene siendo nuestro proyecto para poderlo poner en PRODUCCIÓN.
++Es tener un modo de trabajar con cada una de las particularidades que tenemos en nuestro PROYECTO. ++
Sirve para gestionar tareas, ejecutar tareas, conversión de formas de imágenes archivos, css.
es una filosofía de trabajo modular.

1.-¿Qué es Webpack?

.

• Es una herramienta que nos permite preparar nuestro código para enviarlo a producción.
• No solo nos permite trabajar con JavaScript, sino también con archivos estáticos, css, imágenes, fuentes, etc. Preparar cada una de las particularidades de nuestro proyecto para poderlo poner en producción.
• Nos brinda un modo en desarrollo que nos permita trabajar con cada una de las particularidades.
• Nace en 2012 y desde ese entonces es usado por empresas como core de sus proyectos, algunas de ellas son Twitter, Instagram, PayPal.
• Permite gestionar dependencias, ejecutar tareas, conversión de formas (archivos de imagen, css, etc.), poder habilitar un entorno de desarrollo local que permita hacer pruebas en mi pc. Se pueden cargar módulos de JS que podemos encontrar como el formato de AMD, Common JS, ECMASCRIPT 2015.
• Es importante tener presente que es una filosofía que nos va a permitir trabajar de forma modular, dividiendo el código en diversos módulos y poderlo unirlo en uno mismo.

Retomando clases 🔥

Les dejo este video de YT de una conferencia donde explican qué es Webpack. Me ha ayuda bastante a entender el funcionamiento interno de la librería, sobre todo para las próximas clases. En la conferencia está el creador de webpack, No es una masterclass o un crash course, pero de una forma desenfadada te explican algunos conceptos clave.

Si te pierde un poco, haz unas clases primero o revisa la documentación para entender los ejemplos que ponen. Tiene subtítulos en castellano.

Comenzando un nuevo reto 😄

¡Ojo! Año 2021 y el profe ahora se llamar Orlando Naipes, repito Orlando Naipes JAJAJA 😃

¡Genial que este curso lo des tu! Empecemos 😃

Es una herramienta que nos va a permitir a nostoros preparar nuestro codigo para enviarlo a produccion.

Nos permite trabajar con JS, con archivos estaticos, con CSS, imagenes, fuentes y las particuladidades de nuestro proyecto para poder ponerlo en produccion.Asi como t ener un modo de desarrollo que nos permita trabajar con las particuladidades de nuestros proyectos.

Podremos gestionar las dependencias, ejecutar tareas con version de formas de archivos de imagenes de css, etc. habilitar un entorno de desarrollo local que nos permita hacer las pruebas en nuestra computadora. Cargar los modulos de JS que podemos encontrar.

Es una filosofia que nos permitira trabajar de forma modular, donde podremos trabajar nuestro codigo en diferentes modulos para poder unirlo en uno mismo. Podremos tener una distinta cantidad de diferentes elementos y prepararlos como si fuera una caja donde guardemos todo y tener un resultado para mandarlo a produccion.

Webpack se a vuelto una herramienta muy importante para el desarrollo web sobre todo para el desarrollo front end que nos permitira usar cualquier framework o libreria.

Webpack es una herramienta que nos permite optimizar y simplificar nuestro codigo, para que pueda ser soportado por todos los navegadores y que nuestra aplicacion sea mas profesional y rapida

Con ganas de saber que es Webpack y como manejarlo

Comenzando!

ya lo estaba esperando

Webpack es un module bundler, una herramienta que nos ayudará a preparar nuestro código para enviarlo a producción.

Webpack puede trabajar con archivos de JavaScript, CSS, archivos estáticos, imágenes, fuentes, etc. y así configurar nuestro proyecto para producción.

Nació en el 2012 y es usado por muchas empresas en la actualidad.

Con Webpack también podemos ejecutar tareas, hacer conversiones de archivos, crear entornos locales y demás funcionalidades.

Webpack trabaja de forma modular con la cual vamos a trabajar el código en diferentes módulos que después serán unidos por Webpack.

También cuenta con una amplía variedad de plugins para extender aun más su funcionalidad.