Platzi
Platzi

¡Invierte en ti y celebremos! Adquiere un plan Expert o Expert+ a precio especial.

Antes: $349
$259
Currency
Antes: $349
Ahorras: $90
COMIENZA AHORA
Termina en: 9D : 3H : 50M : 57S

Debes iniciar sesión

Para ver esta clase crea una cuenta sin costo o inicia sesión

Curso de Webpack

Curso de Webpack

Oscar Barajas Tavares

Oscar Barajas Tavares

¿Qué es Webpack?

1/28

🎲 ¿Qué es Webpack?

<h4>Ideas/conceptos claves</h4>

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

<h4>Apuntes</h4>
  • 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

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_.jpg

¿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 me parece un tema complejo, espero que con este curso pueda utilizar todo el poder que tiene.

Esto se va a poner chido

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

<h4>¿Qué es webpack?</h4>

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

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.

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

Me da gusto que Oscar tenga más cursos, es un excelente profesor.

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

👌

que bueno que salió, estaba esperando

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.

web-pack-course
webpack
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…

🎲 ¿Qué es Webpack?

<h4>Ideas/conceptos claves</h4>

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

<h4>Apuntes</h4>
  • 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

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_.jpg

¿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 me parece un tema complejo, espero que con este curso pueda utilizar todo el poder que tiene.

Esto se va a poner chido

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

<h4>¿Qué es webpack?</h4>

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

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.

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

Me da gusto que Oscar tenga más cursos, es un excelente profesor.

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

👌

que bueno que salió, estaba esperando

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.

web-pack-course
webpack
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…