Webpack


WebPack es un paquete npm que permite procesar, empaquetar y minimificarlo los ficheros Javacript, CSS, TypeStript,…
Los pasos a realizar:

  • 1.- Definir las dependencias en nuestros ficheros (js, css…) mediante:
    • import ‘path/to/file’
    • require(‘path/to/file’)
  • 2.- Definir el fichero webpack.config.js con la configuración.
  • 3.- Ejecutar la configuración, mediante:
    • webpack -d –color: Para entorno de desarrollo
    • webpack -p –color: Para entorno de producción

Webpack.config.js

El Webpack.config.js es un fichero json que se estructura con los siguientes atributos:

  • entry: Es el fichero inicial que servirá de base para calcular las dependencias. Se pueden generar diferentes grupos de ficheros o chunks.
  • output: Es el/los ficheros generados y a exportar.
  • module: Contiene definiciones para trabajar con diferentes formatos: Javascript, css, jpg… Los loaders permiten realizar transformaciones del código fuente; como por ejemplo de: CoffeeScript, TypeScript, ESNext (Babel), Sass, Less, Stylus
  • plugins: Contiene las operaciones y su configuración. Por ejemplo, UglifyjsWebpackPlugin para mimificar el javascript, comprimirlo mediante CompressionPlugin

Acceso Externo a WebPack

El resultado se pude exportar como una líbreria para poder acceder externamente mediante javascript. Asi tenemos la posibilidad de compaginar el uso clasico y el nuevo sistema. 😉

  • 1.- En el fichero definimos export, con la variable o método que nos interesa.
    var globalize = require("globalize");
    export const translate = globalize;
    //export function helloWorld() { console.log('hello World') }
    
  • 2.- Añadir en Webpack.config.js queremos tenerlo disponible como una librería. En este caso una variable de nombre EntryPoint.
    module.exports = {
        ...
        output: {
            filename: '[name].js',
            path: __dirname + '/dist',
            libraryTarget: 'var',
            library: 'EntryPoint'
        },
        ...
    }
    
  • 3.- Incluir el fichero generado por el WebPack.
  • 4.- Acceder desde otro javascript (fuera del webpack ;-)) o script en el html.
    var objectoGlobalize = window.EntryPoint.translate;
    console.log(objectoGlobalize.formatMessage("helloWorld"));
    

Soporte para Visual Studio

  • Disponemos de la extensión WebPackTaskRunner que nos integra los comandos de WebPack en el interfaz de Visual Studio.
Anuncios
Esta entrada fue publicada en web y etiquetada . Guarda el enlace permanente.

Una respuesta a Webpack

  1. Pingback: Optimizaciones con WebPack | Pensando bajo la lluvia

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s