Webpack es una librería open-source que nos permite empaquetar nuestro código Javascript en distintos módulos. Webpack toma los módulos con sus respectivas dependenias y genera los ficheros estáticos (assets) que representan y forman dichos módulos.

Vamos a ver un ejemplo sencillo para entenderlo mejor.

// bar.js
export default function bar() {
   console.log("Reacción Estudio");
}

Y ahora en nuestro archivo principal de Javascript (app.js), importamos el archivo anterior (bar.js) y ejecutamos el método «bar()«.

// app.js
import bar from './bar';

bar();

A lo largo de esta entrada veremos los pasos necesarios para su instalación y utilización básica, además de algún ejemplo más avanzado.

Comenzando

Webpack se utiliza para compilar módulos Javascript. Una vez se ha instalado, puedes interactuar con webpack desde la línea de comandos o con su API.

Instalación básica

Primero creamos un nuevo directorio, iniciamos npm e instalamos webpack de forma local:

mkdir webpack-demo && cd webpack-demo
npm init -y
npm install --save-dev webpack

Ahora supongamos que tenemos la siguiente estructura para nuestro proyecto:

  webpack-demo
  |- package.json
+ |- index.html
+ |- /src
+   |- index.js
+   |- contact.js
+   |- services.js

Configuración

En la raíz del directorio «webpack-demo» tenemos que crear el archivo de configuración de Webpack, el cual se tiene que llamar «webpack.config.js.»

Su contenido es el siguiente:

/* 
 * @file     webpack.config.js
 * @author   Reaccionestudio.com
 */
var webpack = require('webpack');
var path    = require('path');

var jsFiles = [
	'./src/index.js',
	'./src/contact.js',
	'./src/services.js'
];

module.exports = {
  	entry: jsFiles,
  	output: {
  	    path: path.resolve(__dirname, 'dist'),
	    publicPath: '/dist',
	    filename: 'app.js'
      }
};

Expliquemos el archivo de configuración por partes:

var webpack = require('webpack');
var path    = require('path');

En estas dos primeras líneas, cargamos la librería webpack y la libreria path.

var jsFiles = [
	'./src/index.js',
	'./src/contact.js',
	'./src/services.js'
];

Después, hemos creado un Array en Javascript donde indicaremos la ruta de los archivos que vamos a comprimir y unificar en un sólo archivo llamado app.js.

module.exports = {
  	entry: jsFiles,
  	output: {
  	    path: path.resolve(__dirname, 'dist'),
	    publicPath: '/dist',
	    filename: 'app.js'
      }
};

Y por último, añadimos la configuración de Webpack.

En la clave «entry«, le pasamos el array de javascript con los archivos Javascript que queremos que procese.

La clave «publicPath» es el directorio donde nos exportará los archivos que genere Webpack.

Y la clave «filename» es el nombre del archivo Javascript que generará Webpack, donde se encontrarán todos los archivos Javascript de nuestro array minificados en este archivo.