Anexsoft | Blog y dictado de cursos de Tecnología

En este encontrarás tutoriales de tecnología como PHP, ASP.NET MVC, Front-End, entre otros y cursos exigentes de modalidad online que te ayudarán a crecer profesionalmente.

¿Qué es WebPack?, ¿Cómo funciona?. Tutorial práctico
Actualizado el 23 Abril, 2017 y leído 3,771 veces
Calificación: 10.00 / 10

¿Qué es WebPack?, ¿Cómo funciona?. Tutorial práctico

Anexsoft

¿Qué es WebPack?

Es un Module Bundler que permite exportar tus módulos a archivos estáticos como javascript, css, etc, haciendo que sea posible pasar el código del servidor al navegador.  Asimismo, permite hacer tareas similares a Gulp, lo cual nos deja concluir que WebPack es el siguiente paso a browserfy (el cual nunca lo usé) y Gulp.

 

¿Cuándo usarlo?

  • Cuando quieres hacer lo que hacías con Browserfy y Gulp a la vez
  • Para aplicaciones grandes en la cual requieres mucho javascript y deseas tenerlo todo más ordenado como separar archivos js por namespaces usando diferente carpetas.
    • libs/numbers/math.js
    • libs/numbers/finance.js
  • Para hacer tareas tediosas como haciamos con Gulp: minificar, concatenar archivos etc.

 

¿Cómo se instala?

  • Primero necesitamos tener instalado Node
  • Luego ejecutamos el siguiente comando para instalar WebPack en modo global
npm install -g webpack

Listo, con esto ya podemos trabajar con WebPack.

 

Ejemplo práctico

La finalidad de este ejemplo es crear nuestros módulos de javascript para luego exportarlo al navegador mediante WebPack y aplicando una tarea, esta tarea hará que minifique todo el script en un solo archivo.

Bien, vamos a crear la siguiente estructura de carpetas y archivos

  • bin
  • src
    • lib
      • math.js
      • string.js
    • app.js
  • index.html
  • webpack.config.js

 

La carpeta libs serán mis módulos a exportar, estos contendra la lógica

src/lib/math.js

var math = {
    sum: function(a, b) { return a + b; },
    substract: function(a, b) { return a - b; },
    divide: function(a, b) { return a / b; },
    multiply: function(a, b) { return a * b; }
};

export default math;

src/lib/string.js

var stringHelper = {
    reverse: function(s) { return s.split('').reverse().join(''); }
};

export default stringHelper;

 

src/app.js

Mi archivo app.js será el intermediario de todo, el que dirá a webpack que es lo que tiene que hacer y exportar.

import math from './lib/math.js';
import stringHelper from './lib/string.js';

window.app = {
	libs: {
		math: math,
		string: stringHelper
	}
};

NOTA: uso el objeto windows para que las variables puedan ser llamadas desde el browser. Por ejemplo, en nuestro caso tenemos declarada para el browser la variable app. Posiblemente hay una forma más óptima pero no encontré, por ahí leí algo de ProviderPlugin.

 

webpack.config.js

Es nuestro archivo de configuración de webpack, el cual le dirá de donde voy a leer y a donde lo voy a exportar. Para nuestro ejemplo el archivo js a crear.

var webpack = require("webpack");

module.exports = {
    entry: './src/app.js',
    output: {
        filename: './bin/app.bundle.js'
    },
    plugins: [
        new webpack.optimize.UglifyJsPlugin()
    ]
};

Entadamos un poco el object.

  • entry: es nuestro archivo principal, este el archivo que va a leer para realizar la tarea.
  • ouput: a donde va a exportar.
  • plugins: tareas que queremos hacer al momento de exportar. En nuestro ejemplo hemos asignado el plugin UglifyJsPlugin y para que este peuda ser reconocido no olvidemos agregar la dependencia usando el comando:
    npm install component-webpack-plugin --save-dev

Nota: para ejecutar los comandos deben abrir la consola de Node y posicionarse en la carpeta donde se encuentra su proyecto.

PD: al crear este archivo evitamos tener que escribir el comando largo por ejemplo: "webpack ./index.js ./build/app.js". Asimismo, podemos hacer más cosas, por eso omití la forma simple.

 

index.html

Finalmente ejecutamos el comando webpack para realizar el proceso. Si revisan la carpeta bin verán que se creó un archivo app.bundle.js el cual contiene nuestro módulo, este archivo lo agregan a su index.html.

<!DOCTYPE html>
<html lang="es">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
        <script src="bin/app.bundle.js"></script>
        <script>
            console.log(app);
        </script>
    </body>
</html>

Nota: Si todo esta bien, deberíamos imprimir la variable app con lo que especificamos que tenga en el src/app.js

Usando webpack deberían gestionar todo, agregar jquery, plugins, etc, y tenerlo todo mejor organizado con esto mataríamos también el trabajo de Bower, bueno, es una idea. Abran la consola y escriban la variable app, verán las propiedades de esta.

Les comparto el GitHub, cuando lo descarguen hacen un npm update para descargar las dependencias.

PD: la finalidad de aprender WebPack es porque vamos a trabajarlo junto a VueJS

¡Adquiera ya!

  • Software de Venta e Inventario hecho en PHP y Codeigniter

    Software de Venta e Inventario hecho en PHP y Codeigniter
  • Código de fuente de Red Social desarrollada en ASP.NET MVC

    Código de fuente de Red Social desarrollada en ASP.NET MVC
  • Software de Portafolio Profesional hecho en ASP.NET MVC 5 C#

    Software de Portafolio Profesional hecho en ASP.NET MVC 5 C#

Últimas publicaciones

Encuesta

¿Sobre qué te gustaría que se hable más?

Síguenos

Estudia con nosotros y crece profesionalmente

Nuestros cursos han sido hecho en base a lo que demanda el mercado hoy en día.
La experiencia obtenida es la de un ambiente laboral.

Anexsoft
© 2017 Anexsoft, blog y cursos online de TI.