WebPack para la construcción de un proyecto

Javascript.Jorge Ulises Useche Cuellar

Aplicaciones de página única SPA

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

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

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.

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

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.

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.

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

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

EstáticosActivos/BienesMódulos con

Dependencias

Eje

mpl

o 1

Eje

mpl

o 2

Eje

mpl

o 3

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.

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)

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