Entendiendo Webpack

https://drive.google.com/open?
id=1MbjJughKMcdufsnPh4jSMGivewcmVr7jZry3-Guaf2E
Entendiendo Webpack
Menos complejo que atrapar un pokemon legendario
#centraalAcademy
https://drive.google.com/open?id=1MbjJughKMcdufsnPh4jSMGivewcmVr7jZry3-Guaf2E
Primer acercamiento
con webpack
#centraalAcademy
TU
#centraalAcademy
¿Qué es un bundler?
Es una herramienta que se encarga nuestro código y todas las dependencias de
nuestro proyecto en un solo archivo.
#centraalAcademy
Bundlers en el ecosistema
#centraalAcademy
¿Qué es webpack?
Es un bundler para construir aplicaciones javascript modernas.
Funciona de manera recursiva construye un grafo de dependencias.
#centraalAcademy
¿Cómo funciona un bundler?
Other
dependencies
Source
Code
React
Bootstrap
#centraalAcademy
Conceptos básicos de webpack
● Entry
● Outputs
● Loaders
● Plugins
#centraalAcademy
Entry
Los entry points le indican a webpack la(s) ruta(s) para comenzar a crear el grafo
de dependencias, las procesa y generar bundles.
#centraalAcademy
Outputs
Es el resultado final del bundling hecho por webpack.
El output no significa que solo se genere un archivo, output indica que se debe
hacer con los entry points procesados.
En general, lo que se configura es la ruta del bundle y el nombre que tendrá
#centraalAcademy
Loaders
Se encarga de procesar los archivos requeridos a partir de los entry points.
Webpack puede transformar cualquier tipo de archivos en un “módulo” (webpack

solo entiende Javascript).
Para hace esto tiene 2 propiedades
test : expresión regular para hacer match en base al nombre del archivo
use : el nombre del loader a usar o el objeto loader que se utilizará o multiples
loaders.
#centraalAcademy
Plugins
Los plugins definen tareas más complejas que se deben hacer, van desde
optimización y minificación hasta configuración usando variables de entorno.
#centraalAcademy
Archivos de
configuración
#centraalAcademy
Múltiples archivos de
configuración
#centraalAcademy
Dominando Webpack
Tu saliendo de aquí
#centraalAcademy

Entendiendo Webpack

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Entendiendo Webpack

Загружено:

Авторское право:

Доступные форматы

https://drive.google.com/open?

Funciona de manera recursiva construye un grafo de dependencias.

En general, lo que se configura es la ruta del bundle y el nombre que tendrá

Webpack puede transformar cualquier tipo de archivos en un “módulo” (webpack

Para hace esto tiene 2 propiedades

Вам также может понравиться