Curso de Webpack

Curso de Webpack

Oscar Barajas Tavares

Oscar Barajas Tavares

Conceptos básicos de Webpack

2/28
Recursos

Aportes 33

Preguntas 2

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

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

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

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 =)

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

Nunca me senti tan confundido hasta ahora!

En este video se explica mejor que es Webpack

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.

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.

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.

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

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

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.

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

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.

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 👍

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

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.

Cuantas particularidades particulares!

Jeje! Ansioso de empezar!

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.

JAJAJAJA dijo “a su vez” tantas veces! me recordó al tío de Jakie Chan

claves:

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

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.

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.