Curso de Webpack

Curso de Webpack

Oscar Barajas Tavares

Oscar Barajas Tavares

Conceptos b谩sicos de Webpack

2/28
Recursos
Transcripci贸n

Aportes 43

Preguntas 3

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

馃摉 Conceptos b谩sicos

<h4>Ideas/conceptos claves</h4>

Webpack es un paquete de m贸dulos est谩ticos para aplicaciones de JS modernas

Loader Te permite hacer un bundle de cualquier recurso est谩tico m谩s all谩 de JavaScript

Plugins Extienden recursos para a帽adir configuraciones y particularidades de recursos externos

<h4>Apuntes</h4>
  • Webpack construye un gr谩fico de dependencias que mapea cada m贸dulo para con verlo en uno o m谩s m贸dulos
  • Desde webpack 4 ya no dependemos de tener un archivo de configuraci贸n, pero si debemos tener un punto de entrada
  • Tambien tendremos que tener un punto de salida
    • En este punto se crear谩 nuestro proyecto una vez est茅 preparado
    • Normalmente es la carpeta dist 鈬 Distribution
  • Tambien contamos con diferentes modos
    • Modo de desarrollo
    • Modo de producci贸n
    • Modos de performance
      • Donde tu a帽ades
        • Configuraciones de minificaci贸n
        • Donde se va enviar
        • Carpeta de destino
    • Modos de desarrollo local
      • Donde puedes
        • Crear puertos espec铆ficos para tu proyecto
        • Ver cambios en tiempo real
  • Dispone de loader y plugins permiti茅ndonos preparar particularidades de nuestro proyecto

Conceptos B谩sicos Webpack
.
Entry (punto de entrada): este le indica a webpack cual modulo de JavaScript debe de usar para empezar a crear una salida.
Ejemplo : index.js. tambi茅n podemos tener m煤ltiples puntos de entrada pero eso es otra historia.
.
Output (punto de salida): Este archivo es el bundle o nuestro archivo de salida, seria nuestra caja donde empaquetamos toda nuestra aplicaci贸n, normalmente este archivo final se crea en una carpeta llamada dist
.
Loader (transformador): Los loaders lo que hacen es decirle a webpack como tiene que transformar el c贸digo de un modulo en concreto. Ejemplo : Los loaders pueden transformar ficheros a JavaScript, o cargar CSS directamente en archivos JS, (si usas reactjs ya sabr谩s como)
.
Plugins (complementos): Nos van a ayudar a extender las funcionalidades con los loaders, a帽adir otras configuraciones.
Ejemplo : hay un modulo llamado HTMLWebpackPlugin que este se encarga de crear un HTML personalizado que le inyecta todos los bundles finales que compilamos.

Si sos nuevo en el mundo de Webpack, te recomiendo realmente que primero veas este tutorial (o que lo tengas guadado por si las moscas)
.
https://www.youtube.com/watch?v=vF2emKbaP4M
.
En una hora te explica los fundamentos de una forma super intuitiva, me ayudo a entender este curso al 100% y aprovechar todo lo que el profe ofrece =)

Babel es un compilador al cual se le puede considerar tambi茅n un loader?

apuentes de la clase y con aportes de compa帽eros,

Oscar me parece una persona que sabe muchisimo, pero no tiene la habilidad para ense帽ar que tienen otros profesores de platzi. Este es el primer curso de webpack de la ruta recomendada por platzi, y no hizo una pausa para explicar ni las cosas basicas. Fueron 3 minutos hablando en x2. En los cursos de el me la paso mas en youtube que en platzi, personalmente me desmotiva no poder seguir la ruta de platzi por estos saltos tan bruscos que hay de conocimiento de curso a curso.

Nunca me senti tan confundido hasta ahora!

No me gustan la clases de Oscar, siempre va a mil por hora, no se porque es la tendencia siempre de el.

En este video se explica mejor que es Webpack

Si va explicar conceptos, deber铆a por lo menos preparar la clase y tomarse el tiempo de hacer ayuda infografica, para poder entender mejor. Hablar por hablar cualquiera lo hace, y por lo que veo no soy el unico que va confundido. Esperemos que mejore.

Otro video que me parece esencial para entender porqu茅 debemos usar webpack y no podemos crear una aplicaci贸n con JS, HTML y CSS sin m谩s. 馃憠 VIDEO

JAJAJAJA dijo 鈥渁 su vez鈥 tantas veces! me record贸 al t铆o de Jakie Chan

Ok, despu茅s de las primeras dos clases sigo sin entender que carajos es Webpack, voy a tener que hacer un proyecto para entenderlo a la malage帽a

Conceptos b谩sicos


Debemos entender que webpack construye un gr谩fico de dependencias que mapea cada m贸dulo para convertirlo en uno o m谩s m贸dulos (seg煤n sea el caso).

Tener cuenta que tenemos que tendremos un punto de entrada y un punto de salida.

El punto de salida suele estar dentro de la carpeta dist (abreviaci贸n de Distribution).

Otra cosa que le da valor a webpack son los loaders y plugins.

**Resumen: **
Antes de empezar a trabjar con Webpack necesitamos primero entender conceptos b谩sicos de este:
Entry(entrada): Le indicamos a webpack el modulo que le va a servir como punto de entrada y este se encargar谩 de buscar los dem谩s modulos relacionados. normalmente es Index.js pero le podemos indicar el que queramos

Output(salida): Basicamente es donde webpack va a ingresar los bundles que ha creado y normalmente es ./dist

Loaders(cargadores): webpack solo entiende js y Json files as铆 que, estos loaders nos permiten convertir otros archivos a lo que webpack puede entender y los a帽ade al gr谩fico de dependecias.

Plugins(complementos): estos extienden las funcionalidades de los loaders, por ejemplo como para convertir ciertos tipos de archivos o para mejorar el performance.

Realmente no s茅 si soy yo, pero se me dificulta mucho seguir los cursos de 脫scar, considero que podr铆a ser m谩s did谩ctico con los conceptos, considerando que este es el primer curso de Webpack que nos encontramos en la ruta. Es frustrante, porque sal铆 de esta clase sin entender nada de los conceptos b谩sicos, y me tuve que dirigir a youtube para entenerlos.

Si no entiendes bien, te recomiendo mires este v铆deo donde introducen webpack de una manera muy intuitiva: https://www.youtube.com/watch?v=SSuycjlgtd8
En ese punto puedes volver a esta clase y entender m谩s facil los conocimientos que nos aporta este curso.

Este es el curso que necesitabamos para no perdernos tanto en los cursos de server-side-rendering y en el curso de practico de react ya que se usa mucho webpack, ya no me siento perdido 馃槒 gracias a este curso

<h3>Conceptos</h3>

.
En esencia, webpack es un paquete de m贸dulos est谩ticos para aplicaciones JavaScript modernas. Cuando webpack procesa su aplicaci贸n, crea internamente un gr谩fico de dependencia que mapea cada m贸dulo que su proyecto necesita y genera uno o m谩s paquetes.

Desde la versi贸n 4.0.0, webpack no requiere un archivo de configuraci贸n para empaquetar su proyecto. Sin embargo, es incre铆blemente configurable para adaptarse mejor a sus necesidades.
.

<h4>Entry</h4>

Un punto de entrada indica qu茅 m贸dulo webpack debe usar para comenzar a construir su gr谩fico de dependencia interna. webpack averiguar谩 de qu茅 otros m贸dulos y bibliotecas depende ese punto de entrada (directa e indirectamente).
.

De forma predeterminada, su valor es ./src/index.js, pero puede especificar un punto de entrada diferente (o varios) estableciendo una propiedad de entrada en la configuraci贸n del paquete web. Por ejemplo:
.
webpack.config.js

module.exports = {
  entry: './path/to/my/entry/file.js',
};
<h4>EntryDescription object</h4>

.
Un objeto con descripci贸n del punto de entrada. Puede especificar las siguientes propiedades.
.

  • dependOn: Los puntos de entrada de los que depende el punto de entrada actual. Deben cargarse antes de que se cargue este punto de entrada.
  • filename: Especifica el nombre de cada archivo de salida en el disco.
  • import: M贸dulos que se cargan al inicio.
  • library: Espec铆fica library options聽para agrupar una biblioteca de la entrada actual.
  • runtime: El nombre del fragmento de tiempo de ejecuci贸n. Si se establece, se crea un fragmento de tiempo de ejecuci贸n con este nombre; de lo contrario, se utiliza un punto de entrada existente como tiempo de ejecuci贸n.

Con todo el respeto del profe que se ve claramente que sabe un mont贸n, ya este es el 4to curso seguido con 茅l en la ruta de javascript y cada vez le entiendo MENOS, no tiene metodolog铆a de ense帽anza y si no fuera por los aportes de la comunidad de verdad que no sabr铆a nada despu茅s del curso pr谩ctico de JS, me duele la cabeza cada que siguen clases con el, deber铆an poner a otros profesores que transmitan los conceptos y las bases mejor para cursos tan importantes como asincronismo, npm y este, Oscar sabe mucho pero asume que todos sabemos lo mismo y solo va a mil haciendo todo 馃槮

Conceptos b谩sicos


Antes de comenzar con Webpack, debemos entender las particularidades que lo conforman para poder trabajar con el.

En este caso lo debemos definir como un paquete de m贸dulos est谩ticos para aplicaciones de Javascript modernas. Construye un gr谩fico de dependencias que mapea cada m贸dulo para convertirlo en uno o m谩s seg煤n sea el caso.

Teniendo todo esto en cuenta, tendremos algunas particularidades clave. Trabajaremos con un est谩ndar que se crea. Para esto debemos entender que tenemos un punto de entrada, dentro de una carpeta espec铆fica y un archivo llamado index.js que a partir de ah铆, se unen todos los elementos.

Y tambi茅n un punto de salida donde ser谩 creado nuestro proyecto por medio de Webpack, normalmente es la carpeta dist donde se distribuyen todas las dependencias del proyecto.

Construye tu propio mini webpack
.
Este video de youtube -> Ronen Amiel - Build Your Own Webpack construye un mini webpack, me ayudo a entender muchas cosas acerca de que es un bundle.

claves:

  1. Mapear modulos!!!
  2. Loader y Plugins
  3. Modo de preformance

Conceptos b谩sicos de Webpack

Particularidades

  • No dependemos de tener un archivo de configuraci贸n, en cambio, se puede trabajar con un est谩ndar que se crea. Pero hay una estructura b谩sica para poder empezar desde ah铆 todos los elementos de la aplicaci贸n.
  • Hay un punto de salida, responde al d贸nde va a ser creado el proyecto una vez preparado por Webpack. Existe una carpeta llamada DIS (Distribution), donde se a帽aden los elementos que estamos preparando con Webpack.
  • Modo producci贸n.
  • Modo desarrollo.
  • Dispone de loaders y plugins.
  • Modos de performance, donde se puede a帽adir configuraciones m谩s avanzadas donde se puede establecer como se va a minificar el proyecto, hacia donde se va a enviar o la carpeta que ser谩 el destino de los elementos.

Concepto b谩sicos a tener en cuenta y repasar:
-Es un paquete de m贸dulos est谩ticos para JS.
-Loaders
-Plugins

El profesor como que habl贸 un poco r谩pido (mas de lo que acostumbran en platzi xd) tuve que ver el video dos veces. Pero vamos bien 馃憤

Feliz dia. Estoy recien comenzando este curso. Mi pregunta es: Tengo que saber algo de programacion antes de continuar?
}

Webpack es un paquete de m贸dulos est谩ticos para aplicaciones de JS modernas

<h4>Conceptos b谩sicos</h4>

Un paquete de m贸dulos est谩ticos para JS moderno. Webpack mapea los distintos m贸dulos para convertirlo todo en 1 o varios, seg煤n sea el caso. Podemos trabajar en modo de desarrollo, producci贸n y recompilar archivos para visualizar los cambios. webpack dispone de loaders y plugins.

Con React podemos usar XML y HTML.

馃崈 Conceptos b谩sicos de Webpack

Mapeo

Webpack utiliza el mapeo de m贸dulos para identificar las dependencias de cada m贸dulo en un proyecto. Cada m贸dulo se compila en una funci贸n que toma como argumentos los m贸dulos de los que depende. Estas funciones se pueden ejecutar en cualquier momento para cargar el m贸dulo y sus dependencias. El mapeo de m贸dulos tambi茅n permite a Webpack realizar la optimizaci贸n de paquetes, lo que significa que solo se incluyen los m贸dulos necesarios en el paquete final.

Entrada y salida

Webpack utiliza un archivo principal o punto de entrada para comenzar a construir su gr谩fico de dependencias. Este archivo principal es el punto de partida para el proceso de empaquetado. Webpack tambi茅n tiene la capacidad de generar m煤ltiples paquetes de salida en funci贸n de la configuraci贸n. Cada paquete de salida se compila en un archivo separado que contiene todas las dependencias necesarias para su correcto funcionamiento.

Modos

Modos

Webpack tiene dos modos principales: desarrollo y producci贸n. El modo de desarrollo se utiliza durante el desarrollo del proyecto, mientras que el modo de producci贸n se utiliza cuando se est谩 listo para enviar el proyecto a producci贸n.

En el modo de desarrollo, Webpack genera un paquete que se puede utilizar para probar el proyecto en un servidor local. Este paquete generalmente incluye todas las dependencias y archivos necesarios para que el proyecto se ejecute correctamente. Adem谩s, Webpack habilita herramientas de depuraci贸n y proporciona comentarios detallados en el c贸digo generado.

En el modo de producci贸n, Webpack optimiza el paquete generado para que sea lo m谩s peque帽o y eficiente posible. Se eliminan todos los comentarios y herramientas de depuraci贸n, y solo se incluyen los m贸dulos necesarios para que el proyecto se ejecute correctamente. De esta manera, se reduce el tama帽o del paquete final, lo que significa que se carga m谩s r谩pidamente en el navegador del usuario y consume menos recursos del sistema.

Loaders y Plugins

Los loaders y plugins de Webpack son dos tipos de herramientas que se utilizan para personalizar el proceso de empaquetado.

Loaders

Los loaders son m贸dulos que se utilizan para transformar archivos antes de que se agreguen al paquete de salida. Por ejemplo, puede utilizar un loader para convertir archivos CSS en m贸dulos JavaScript que se puedan incluir en el paquete de salida. Webpack incluye varios loaders incorporados para manejar diferentes tipos de archivos, pero tambi茅n puede crear sus propios loaders personalizados.

Plugins

Los plugins son m贸dulos que se utilizan para realizar tareas adicionales durante el proceso de empaquetado. Por ejemplo, puede utilizar un plugin para minimizar y comprimir el paquete de salida, o para generar un archivo HTML que incluya autom谩ticamente los archivos de salida. Webpack incluye varios plugins incorporados para manejar diferentes tareas, pero tambi茅n puede crear sus propios plugins personalizados.

Tanto los loaders como los plugins se configuran en el archivo de configuraci贸n de Webpack. Esto le permite personalizar el proceso de empaquetado para satisfacer las necesidades espec铆ficas de su proyecto.

Oscar Barajas, uno de los mejores Profes!
Me encanta iniciar el curso con toda la efusividad con la que se caracteriza

Webpack debe entenderse como un paquete de m贸dulos est谩ticos para aplicaciones de JavaScript modernas.

Crea un mapa de dependencias para cargar los m贸dulos est谩ticos.

Punto de salida: donde va a ser creado una vez procesado por webpack, normalmente denominado dist de distribution.

Modos: producci贸n, desarrollo y cambios en tiempo real.

Dispone de loaders (para entender lenguajes en particular, como xml dentro del proyecto) y plugins (extiende funciones de los loaders para trabajar los recursos)

Modos de performance.

Caracteristicas de webpack

  • Es un paquete de m贸dulos est谩ticos para aplicaciones de JS modernas.
  • Desde webpack se crea un est谩ndar y no se maneja un archivo de configuraci贸n.
  • Debemos tener un index.js en una ruta de entrada y una de salida donde 鈥渄is鈥 de distribution donde saldr谩 nuestra compilaci贸n para producci贸n.
  • Puede haber distintos entornos: dev, producci贸n, test
  • Dispone de plugins y loader para obtener funcionalidades adicionales. los plugins extienden las funciones de los loaders.
  • Modos de performance para distintos entornos

exelente expicacion

驴Qu茅 es webpack?

La definici贸n que entend铆 de analizar las palabras

Webpack es un (paquete) conjunto de objetos que est谩n atados o envueltos formando un bloque para ser transportados.

Los objetos (m贸dulos) atados son elementos con funci贸n propia concebidos para poder ser agrupados de distintas maneras con otros elementos constituyendo una unidad mayor (paquete).

Estos objetos son del tipo est谩tico, objetos que permanecen en un mismo estado y no experimentan cambios.

para aplicaciones de javascript modernas.

.

Definici贸n dada en el curso

Webpack es un paquete de m贸dulos est谩ticos para aplicaciones de javascript modernas.

Definiciones de las palabras que no entend铆

paquete

paquete: Objeto o conjunto de objetos que est谩n atados o envueltos formando un bloque para ser transportados.


m贸dulos

M贸dulo: Elemento con funci贸n propia concebido para poder ser agrupado de distintas maneras con otros elementos constituyendo una unidad mayor.


est谩ticos

Est谩tico: Que permanece en un mismo estado y no experimenta cambios.


aplicaciones de javascript modernas

Las aplicaciones web modernas tienen expectativas m谩s altas por parte del usuario y mayores demandas que nunca. Se espera que las aplicaciones web actuales est茅n disponibles 24 horas al d铆a los siete d铆as de la semana desde cualquier lugar del mundo y se puedan usar desde pr谩cticamente cualquier dispositivo o tama帽o de pantalla. Las aplicaciones web deben ser seguras, flexibles y escalables para satisfacer los picos de demanda. Cada vez m谩s, los escenarios complejos deben controlarse mediante experiencias de usuario enriquecidas creadas en el cliente con JavaScript y comunicarse de forma eficaz a trav茅s de las API web.


.

aqu铆 quiz谩s vendr铆an muy bien unas slides con las definciones

Cuantas particularidades particulares!

Jeje! Ansioso de empezar!

At its core,聽webpack聽is a聽static module bundler聽for modern JavaScript applications. When webpack processes your application, it internally builds a聽dependency graph聽from one or more聽entry points聽and then combines every module your project needs into one or more聽bundles, which are static assets to serve your content from.

2.-Conceptos b谩sicos

.

  • Es un paquete de m贸dulos est谩ticos para aplicaciones de JavaScript modernas.
  • WebPack construye un gr谩fico de dependencias que mapea cada modulo para convertirlo en uno o m谩s m贸dulos dependiendo del caso.
  • Desde WebPack 4 ya no dependemos de tener un archivo de configuraci贸n, podemos trabajar con un est谩ndar que se crea. Debemos de tener un punto de entrada dentro de una carpeta espec铆fica y un archivo llamado index.js que va a partir de ah铆 todos los elementos de nuestra app. Tambi茅n vamos a trabajar con un punto de salida donde va a ser creado nuestro proyecto una vez preparado por medio de webpack, normalmente nos encontramos con la carpeta dist (aka distribution) donde se van a a帽adir los elementos que nosotros estamos preparando con webpack.
  • Contamos con otros elementos particulares que vamos a poder trabajar como modo de producci贸n, modo de desarrollo y una opci贸n para poder observar los cambios en tiempo real y poder recompilar el proyecto. De esta forma podemos analizar cada cambio que hagamos.
  • Dispone de loaders y plugins que nos ayudan a preparar particularidades de nuestro proyecto.
    • Loader: para entender un lenguaje en particular como cuando usamos JSX en React aplicamos el loader para identificar la sintaxis, entenderla y trabajar el proyecto.
    • Plugins: extienden los recursos que podemos agregar con los loaders pero para a帽adir configuraciones o elementos particulares que nos permiten trabajar con estos recursos.
  • Podemos tener modos de performance donde podemos a帽adir configuraciones m谩s avanzadas que nos permiten configurar como se va a minificar, hac铆a donde lo enviamos o que carpeta es el destino de los elementos a su vez habilitar un modo de desarrollo local que nos permita tener un puerto espec铆fico y ver los cambios en tiempo real.

#Resumen.

  • Webpack funciona con un proceso donde construye un arbol gr谩fico de las dependencias y estas las mapea para saber cuantos modulos habr谩 en cada uno.

Tambi茅n posee diferentes herramientas como Loaders y Plugins.

  • Los loaders(transformadores): Le diran a webpack como debe transformar el c贸digo de un m贸dulo en concreto.

  • Los plugins: Agregan funcionalidad extra.

Primer profesor de platzi que escucho en 1x, habla super rapido 馃槷

Webpack se define como un paquete de m贸dulos est谩ticos para aplicaciones de JavaScript modernas. Su funcionamiento consiste en hacer un gr谩fico de dependencias que mapea cada m贸dulo para convertirlo en uno o m谩s m贸dulos seg煤n el caso.

A partir de Webpack 4 ya no es necesario tener un archivo de configuraci贸n, sino que se puede trabajar con un est谩ndar que se crea.

Un proyecto con Webpack debe tener un archivo espec铆fico de entrada del que va a partir toda la aplicaci贸n y un punto de salida donde ser谩 creado el proyecto procesado por Webpack, com煤nmente es llamada dist.

Webpack tambi茅n dispone de loaders y plugins que nos ayudan a trabajar con las particularidades de cada proyecto, los loaders se utilizan para entender lenguajes en particular como JSX, XML, etc. Y los plugins extender谩n la funcionalidad de Webpack.

Tambi茅n cuenta con configuraciones m谩s avanzadas con las que se pueden configurar cosas como la forma en la que el c贸digo se va a minificar, hac铆a donde se va a enviar y m谩s.