Conceptos básicos de Webpack

📖 Conceptos básicos

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

• 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 “a 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

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

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',
};

.
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

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 “dis” 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.