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

¡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. 🙋🏿‍♂️

¿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.

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

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

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.

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

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.

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

👌

Este mensaje para las personas que están empezando con este curso. ⭐
Hagan el curso con un proyecto personal que ustedes tengan, no con el que ofrece el profesor. ¿Por qué les digo esto? Porque yo hice el curso por primera vez siguiendo los recursos del profesor y me limité a copiar y pegar lo que él hacía, por ende no entendí mucho. Ahora estoy repasando el curso con mi propio proyecto y he notado que entiendo mucho mejor Webpack y sus beneficios.
Igualmente, esto no quita que el curso (en algunas cosas) está desactualizado, pero de todos modos sigue siendo una buena base para poder empezar.
Les recomiendo este video si quieren profundizar un poco más con Webpack. 😁

Webpack es una herramienta de empaquetado (bundling) muy popular en el desarrollo web. Su objetivo principal es combinar y optimizar múltiples archivos fuente, como JavaScript, CSS y otros recursos, en uno o varios archivos finales que se puedan cargar eficientemente en un navegador web.
.
Imaginemos que estás desarrollando una aplicación web utilizando varios archivos JavaScript y CSS. Cada archivo puede tener dependencias y módulos propios. Sin embargo, cargar cada archivo individualmente en el navegador puede ser ineficiente y puede resultar en múltiples solicitudes al servidor.
.
Aquí es donde Webpack entra en juego. Te permite definir un archivo de configuración llamado webpack.config.js donde puedes especificar cómo se deben empaquetar tus archivos fuente. Puedes indicar qué archivos deben ser incluidos, cómo deben ser procesados y cómo se deben manejar las dependencias.
.
Aquí tienes un ejemplo práctico para que sea más claro. Supongamos que tienes una estructura de carpetas con los siguientes archivos:

src/
  |- index.js
  |- module1.js
  |- module2.js
  |- style.css
index.html
webpack.config.js

En index.js, tienes el punto de entrada de tu aplicación:

// index.js
import module1 from './module1';
import module2 from './module2';
import './style.css';

module1();
module2();

En module1.js, tienes un módulo con una función:

// module1.js
export default function module1() {
  console.log('Este es el módulo 1');
}

En module2.js, tienes otro módulo con una función:

// module2.js
export default function module2() {
  console.log('Este es el módulo 2');
}

En style.css, tienes algunas reglas de estilo:

/* style.css */
body {
  background-color: yellow;
}

En el archivo webpack.config.js, configuras cómo se debe empaquetar tu aplicación:

// webpack.config.js
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};

Una vez que hayas configurado Webpack y ejecutado el comando correspondiente, se creará un directorio dist con el archivo bundle.js, que contiene todo tu código JavaScript y CSS empaquetado.
.
Luego, puedes incluir este archivo en tu index.html:

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <title>Mi aplicación</title>
</head>
<body>
  <script src="dist/bundle.js"></script>
</body>
</html>

Ahora, cuando abras index.html en un navegador, Webpack cargará automáticamente bundle.js, que contendrá todos tus archivos JavaScript y CSS combinados y optimizados. Además, se aplicarán las reglas de estilo definidas en style.css y se imprimirán los mensajes de los módulos en la consola del navegador.
.
Esta es solo una introducción básica al uso de Webpack. Puedes realizar muchas más configuraciones avanzadas y aprovechar su amplia gama de características y complementos para optimizar aún más tu flujo de trabajo de desarrollo web.

Les voy a ahorrar un buen de tiempo dejándoles el curso de webpack 5 de midudev, es muy digerible, rápido de comprender e implementar

Mi aporte no es un hate contra platzi o contra el profesor. Sencillamente, este curso me pareció tedioso, solo era un ejercicio de copiar y pegar código porque francamente no me resultaba fácil entender qué estaba pasando. La mayoría de conceptos están explicados por la comunidad y no por el curso.
Personalmente se me hizo una perdida de tiempo y tuve que recurrir a internet para buscar una forma más ágil y fácil de entender. Así que para la comunidad les dejo este recurso que me pareció más rápido, ágil y fácil de entender.

Esta es la respuesta que me dio la Inteligencia Artificial de notion.so:
"Webpack es una herramienta de construcción de módulos de JavaScript. Su principal función es tomar módulos con dependencias y generar archivos estáticos que representen esos módulos.

En términos simples, Webpack es un empaquetador de módulos que permite a los desarrolladores de JavaScript crear aplicaciones escalables y mantenibles. Con Webpack, se pueden manejar fácilmente las dependencias de los módulos y optimizar el rendimiento de la aplicación mediante la carga lazy-loading (carga diferida) y la división de código.

En resumen, Webpack es una herramienta esencial para cualquier desarrollador de JavaScript que tenga como objetivo crear aplicaciones de alta calidad y eficientes."

🍃 Estoy muy emocionado de que por primera vez voy a trabajar con algo que no sea JavaScript vanilla y voy a empezar a tocar cosa más complejas.

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.

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.