Introducción a

Ivan Nieto

Ivan Nieto

Twitter: @IvanNietoS

github: ivannieto

- Pasión por la tecnología web

- Finalizando estudios CS DAM

- En prácticas @ Initios Desarrollos

- Destrozador de cacharros :D

Disclaimer

- Charla introductoria.

- No trato de enseñar, trato de compartir.

- Si te aburres, !colabora!

:D

Wat
The
Webpack?

Webpack es...

Un empaquetador de módulos que nos permite organizar y optimizar nuestros proyectos web.

Proporciona la habilidad de transformar todas las dependencias y recursos, en datos legibles por el navegador.

• Nace en 2012
• Creador, Tobias Koppers
• Open Source
• Constante actualización

Módulos ES6

Un pequeño recordatorio

Se definen como el método de encapsulación de un trozo de código en una unidad reusable.

ES6 proporciona un sistema de importación y exportación de módulos parecido al definido por lenguajes como Python o Ruby

Las funciones y variables del módulo no son visibles a menos que nosotros las exportemos.

De este modo, hacemos accesibles tan sólo las partes a las que necesiten acceder otras partes de nuestra aplicación.

Sintaxis

// ES6 nos proporciona varias formas de exportar e importar módulos

// Exportaciones nominales

export let nombre = 'Juan';
export let edad  = 23;​​


// -------------------------------------------

// Exportación de listas de módulos

function numAleatorio() {
    return Math.random();
}

function sum(a, b) {
    return a + b;
}

export { numAleatorio, sum }



// --------------------------------------------


function cuadrado(x) {
    return x * x;
}

module.exports = {
    cuadrado: cuadrado
};

...

var cuadrado = require('cuadrado').cuadrado;

console.log(cuadrado(9));


// -------------------------------------------

// ES6

// Exportando valores únicos

// 'miFuncion.js'
export default function () { ... };

...

import miFuncion from 'miFuncion';
miFuncion();



// ------------------------------------------

// Exportando valores únicos (II)

function sumaDos(a, b) {
    return a + b;
}

function sumaTres(a, b, c) {
    return a + b + c;
}

let sumas = {
    sumaDos,
    sumTres
};

export default sumas;



/**
* Imports
*/

import 'componente';

import { sumaDos, sumaTres } from 'math/suma';

import * as util from 'math/suma';

Task Runners y Module Bundlers

Un Task Runner concatena y ejecuta acciones sobre los recursos.

(Gulp, Grunt, Brocolli, Cake... )

Un Empacador de Módulos, pone todo tu código y sus dependencias en un sólo archivo*

(Browserify, RequireJS, Webpack...)

STAHP!

Dependencias

Módulos

Grafo de

Dependencias

Describe cómo los módulos

se relacionan unos entre otros

Soporta todas las especificaciones de JS modular, ES6, AMD y CommonJS

Posee un rico ecosistema de

características ya incluidas, y plugins para procesar recursos

https://webpack.js.org/configuration/plugins/

Webpack carga los recursos estáticos como nodos en el gráfico de dependencias

HOT MODULE REPLACEMENT

Permite solucionar la pérdida del estado de la aplicación, cuando cargamos nuevos módulos o archivos sin tener que recargar.

Webpack2 trae consigo varias novedades

...

IMPORTS DINÁMICOS

El PayPerView de Webpack.

Solicita módulos a demanda en tiempo de ejecución.

function onClick() {

  import("./module")

    .then(module => {

      return module.default;

    }).catch(err => {

      console.log("Carga fallida");

    });

};

DIVISIÓN DE CÓDIGO

(Code Splitting)

TREE SHAKING

Durante la generación del grafo de dependencias, Webpack detecta y desecha el código no utilizado.

SOPORTE ES6 DE FORMA NATIVA

Sin transformar a CommonJS

Novedades en la sintaxis del archivo de configuración

Mejoras en los plugins integrados

y... ya vale.

A CONFIGURAR

Requisitos:

yarn o npm

editor de código

git

git clone https://github.com/JavaScriptVigo/webpack-intro-jsvigo

cd webpack2-intro/proyecto-base

yarn init -y

...coding time...

Enlaces de utilidad:

• https://webpack.js.org/configuration/
• https://github.com/jantimon/html-webpack-plugin
• https://github.com/webpack-contrib/extract-text-webpack-plugin
• https://github.com/TheLarkInn/artsy-webpack-tour
• https://github.com/th0r/webpack-bundle-analyzer
• https://webpack.js.org/configuration/dev-server
• https://webpack.js.org/configuration/devtool
• https://github.com/webpack/webpack/tree/master/examples/source-map
• http://webpack.github.io/analyse
   

Preguntas, respuestas y cosas.