Este documento describe WebPack, un empaquetador de módulos que permite dividir código JavaScript en módulos y cargarlos a demanda. WebPack puede empaquetar módulos CommonJS, AMD y ES6, así como otros tipos de archivos como CSS, imágenes y JSON. Ofrece optimizaciones como minimización, deduplicación y generación de trozos para mejorar el rendimiento. Los cargadores permiten procesar otros tipos de archivos para convertirlos en módulos de JavaScript. WebPack es adecuado para grandes proyectos debido

1. WebPack para la
construcción de un proyecto
Javascript.
Jorge Ulises Useche Cuellar

3. Aplicaciones de página única SPA

4. WebPack Empaquetador de módulos.
● Empaquetamiento de módulos CommonJS / AMD para el navegador.
● Permite dividir su base de código en varios paquetes, los cuales pueden ser
cargados a la demanda-
● Cargadores de apoyo a los archivos de procesamiento previo, es decir,
JSON, jade, coffee, css, menos, ... y cosas personalizadas.
● Módulos: CommonJs, AMD, ES6 modules, CSS, Images, JSON, Coffeescript,
LESS...

5. WebPack Empaquetador de módulos.
● Formato de módulo:
○ AMD (Asynchronous Module Definition)
○ CommonJS
● División de código
● Optimizaciones
● Loaders (cargadores)
● Aún más!!!!!

6. Formato de módulo AMD
● AMD: definir módulos cuyas dependencias son
cargadas asincrónicamente
○ Mejorar el tiempo de carga de los sitios web
○ Cargar múltiples archivos JavaScripts en tiempo de
ejecución
○ Puede usarse para organizar mejor el código
separándolo en archivos independientes que
encapsulan su lógica.
○ Similar a import, package, y class.

7. Formato de módulo CommonJS
● CommonJS es un proyecto con el objetivo de especificar un ecosistema
JavaScript fuera del navegador (por ejemplo, en el servidor o para
aplicaciones de escritorio nativas)
● Inicialmente llamado ServerJS
● Kevin Dangoor ingeniero de Mozilla (Enero 2009)
● CommonJS no está afiliada con el grupo ECMA TC39 Internacional que
trabaja en ECMAScript, pero algunos miembros del TC39 participar en el
proyecto

8. División de código
● Se puede manejar una base de código modular
si no ha utilizado un sistema de módulos.
● Estos módulos exportan una interfaz al objeto
global ex:“window”. Los módulos pueden
acceder a la interfaz de dependencias sobre el
objeto global.
○ Conflictos con el objeto global.
○ Orden de carga es importante.
○ Los desarrolladores tienen que resolver las
dependencias de los módulos/bibliotecas.
○ En grandes proyectos, la lista puede ser muy larga y
difícil de manejar.

9. Optimizaciones
● Minimización
● Deduplicación
○ Esta técnica de respaldo elimina los datos
redundantes almacenados, guardando una
única copia idéntica de los datos
● Trozos (chunks)
○ Transferencia
● Single-Page-App
● Multi-Page-App
○ Compartir código común entre páginas.

10. Loaders (cargadores)
● webpack sólo puede procesar JavaScript de forma nativa, se usan
cargadores para transformar otros recursos en JavaScript. Al hacer esto,
todos los recursos forman un módulo.
● Tipos
○ Basic
○ Packaging
○ Dialects
○ Templating
○ Styling
○ Translation
○ Support

11. ¿Aún más?...
● Multiple targets
● Development Tools
● Plugins
● Shimming modules
● Long-term Caching
● Testing
● Build performance
● webpack with grunt gulp bower karma

12. Estáticos
Activos/Bienes
Módulos con
Dependencias

13. Ejemplo1

14. Ejemplo2

15. Ejemplo3

16. Objetivos de WebPack
● Dividir el árbol de dependencias en trozos cargados a demanda.
● Mantenga el tiempo de carga inicial baja.
● Cada static asset debe ser capaz de ser un módulo.
● Capacidad de integrar bibliotecas de terceros como módulos.
● Posibilidad de personalizar casi todas las partes del “module bundler”.
● Adecuado para grandes proyectos.

17. Justificación de WebPack
● Los módulos existentes no son muy adecuados para grandes proyectos
(grandes aplicaciones de una sola página Single-Page Applications
(SPAs)).
● La razón más apremiante para desarrollarlo era la División de Código y que
los activos estáticos (assets, statics) encajaran perfectamente juntos a través
de la modularización.
● Se intentó extender enfardadoras de módulos existentes, pero no fue posible
lograr todos los objetivos. (autor)

18. Me convencí? Por dónde comienzo?
● http://webpack.github.io/docs/tutorials/getting-started/