introducción webpack

Introducción a webpack

Jean-Paul Jerome

archivado en: JavaScript / 9 octubre, 2016

La primera vez que oí hablar de webpack sentí cierto escepticismo. Justo lo que necesitaba el mundo, pensé, la enésima mega-herramienta web que lo hace todo mucho más mejor y que por definición deja atrás todo lo que hasta hace 5 minutos era formidable: grunt, gulp, broccoli, browserify, system.js... Pero estaba equivocado, pues al menos hay tres razones por las que vale la pena conocerlo:

  1. Con webpack se pueden realizar un montón de procesos que podemos ahorrarnos de gulp.
  2. Es el sistema más cómodo para trabajar con los nuevos módulos de ecma 6. Otras opciones posibles serían tirar de jspm y systemjs o de browserify y babelify, pero son más enrevesadas.
  3. Es la librería que utilizan angular 2 y react, al menos de momento (sospecho que al menos angular volverá a systemjs), por lo que conociendo webpack tendremos bastante ganado si nos metemos con estos frames.

Por lo tanto, aunque dé cierta fatiga, es interesante entender cómo funciona aunque sea por encima. Aquí va un micro-tutorial por si sirve para algo.

Preparativos

1. Entonces, preparamos un scaffolding para este tutorial de lo más sencillo, con un directorio llamado src donde estarán los archivos fuente (source) y otro que albergará los archivos compilados, que podemos llamar dist (por distribution). En src creamos dos archivos que de momento estarán vacíos: index.js y component.js. Algo así:

app/

-- index.js

-- component.js

build/

2. En component.js creamos un módulo, que en ecma 6 en esencia no es más que indicar qué parte del contenido de un archivo debe exportarse, es decir, qué puede ser accesible desde fuera. Cómo solo tendrá un objeto con un método, podemos exportarlo como default.

const foo = {

bar: ()=> {

console.log('Hola mundo desde foo');

}

}

export default foo;

Y en index.js lo importamos:

import foo from './component';

foo.bar();

3. Vamos por consola hasta donde tengamos el proyecto y ejecutamos npm init para preparar el package.json.

{

"name": "foo",

"version": "1.0.0",

"description": "",

"main": "index.js",

"scripts": {},

"author": "",

"license": "ISC"

}

4. Con todo listo,  toca empezar a instalar cosas. Comenzamos con propio webpack:

npm i webpack --save-dev

Y además vamos a añadir un conjunto de herramientas webpackasianas que incluyen un server que usaremos luego:

npm install webpack-dev-server --save-dev

5. Añadimos un script en nuestro package.json para ejecutar webpack:

...

"main": "index.js",

"scripts": {

"build": "webpack"

},

"author": "",

...

Ahora, para ejecutar webpack basta con que escribamos esto por consola:

npm run build

Pero para que funcione, antes tenemos que definir un archivo de configuración en  el directorio raíz del proyecto llamado webpack.config.js.

webpack.config.js

Cuanto menos, este archivo de configuración debe tener definido estos parámetros:

entry: o un string o un array o un objeto con los archivos fuente, los módulos a empaquetar.

output: un objeto en el que definimos dónde (path) y cómo se va a llamar (filename) el archivo con los módulos integrados, que por convención suele ser bundle.js.

Así, en nuestro caso, podríamos preparar algo así:

module.exports = {

entry: './src/',

output: {

path: './dist/',

filename: 'bundle.js'

}

};

Sin embargo, dado que este archivo no es un json, sino javaScript que corre sobre node, podemos hacer algo más elegante con path, que incluye varias utilidades para trabajar con archivos y directorios. En concreto, nos interesan dos métodos de este módulo:

  • dirname: que nos da la ruta en la que se está ejecutando el script.
  • join: que concatena strings para formar una ruta.

De esta manera podemos separar la definición de las cosas aparte, que es más limpio y escalable:

module.exports = {

entry: './src/',

output: {

path: './dist/',

filename: 'bundle.js'

}

};

 

const path = require('path');

const pathSrc = path.join(__dirname, 'src');

const pathDist = path.join(__dirname, 'dist');

const filename = 'bundle.js';

module.exports = {

entry: {

app:pathSrc

},

output: {

path: pathDist,

filename: filename

}

};

Ahora ya sí podemos ejecutar el script de npm y en el directorio dist se formará el archivo bundle.js con todo el tinglado que necesitan los módulos, pero tendríamos un problema si intentáramos trabajar directamente con ese código, ya que los navegadores aún no están preparados para esta característica nueva de E6, así que debemos transpilar el código con babel.

 Babel

Preparar este traductor de E6 a E5 es una tarea muy sencilla. Por pasos:

1. Primero instalamos el tinglado comenzando por Babel.

npm install --save-dev babel-cli

Añadimos el preset para que traduzca el código de la versión 6 a la 5.

npm install --save-dev babel-preset-es2015

Pero, además, queremos que sea la versión que se encuentra en fase 1.

npm install --save-dev babel-preset-stage-1

Por último, necesitamos instalar el loader de Babel, esto es, el sistema que usará webpack para cargar los módulos.

npm install --save-dev babel-loader

(Todo lo anterior se puede instalar en una sola línea, pero así queda más claro).

2. Una vez instalado el tinglado babelesco, hay que preparar su archivo de configuración en el directorio raíz del proyecto. Lo llamamos .babelrc y tendrá definido qué presets usar:

{

"presets": ["es2015", "stage-1"]

}

3. Volvemos al archivo webpack.config.js y añadimos otro parámetro, module, en el que vamos a definir qué loader de módulos queremos usar. Nos interesan tres parámetros:

  • test: donde especificamos la condición (la expresión regular) que deben cumplir los archivos a preparar, que en nuestro caso son todos los que tengan la terminación js.
  • exclude: los archivos a excluir como, por ejemplo, los node modules.
  • loader: el cargador de módulos que vamos a usar, como el babel-loader.

Todo junto ya en e webpack.config.js:

....

output: {

path: pathDist,

filename: filename

},

module: {

loaders: [{

test: /\.js$/,

exclude: /node_modules/,

loader: 'babel-loader'

}]

}

...

Observadores

Andar compilando cada vez que tocamos algo es un tostón, así que vamos a ver cómo preparar observadores que hagan ese trabajo por nosotros.

Con webpack añadir un watch (observador) es tan fácil como añadir el flag --watch al comando y como estamos lanzándolo desde npm, lo podríamos definir en el package.json:

"build": "webpack --watch"

Sin embargo, dado que esta librería también tiene un servidor, el webpack-dev-server que instalamos antes, vamos a usarlo, que es más cómodo.

Para eso, lo primero es añadir un archivo index.html en el directorio dist, en el cual enlazamos el bundle.js que genera webpack.

<!doctype html>

<html lang="es">

<head>

<meta charset="utf-8">

<title>webpack - tutorial</title>

</head>

<body>

<!-- una aplicación en angular o react -->

<!-- la carga del bundle debe hacerse abajo del todo -->

<script src="bundle.js"></script>

</body>

</html>

Luego volvemos al package.json y añadimos un script para el server con los siguientes flags:

  • --inline: para que se refresque con los cambios.
  • --colors: para que se muestren los datos por consola en color, que es más legible.
  • --open: para que se abra de forma automática la url indicada.
  • --content-base: el directorio donde lanzará el servidor.

Y, además, para que sea más cómodo lanzar el proceso, definimos el servidor y el webpack en un script start, que sirve para aunar tareas (todo lo que definamos ahí, se ejecuta escribiendo por consola npm start).

"scripts": {

"build": "webpack",

"serve": "webpack-dev-server --inline --colors --open --content-base dist/",

"start": "npm run build && npm run serve"

},

Ale op! pues con todo esto ya tendríamos el entorno básico configurado y un servidor con nuestra aplicación en localhost:8080, y aún podríamos hacer más cosas con webpack, pero de eso hablaré otro día, que por hoy está bien.

|| Tags: ,

Este artículo aún no ha sido valorado.

¿Te ha parecido útil o interesante esta entrada?
dormido, valoración 1 nadapensativo, valoración 2 un poco sonrisa, valoración 3 a medias guiño, valoración 4 bastante aplauso, valoración 5 mucho

Tú opinión es muy importante, gracias por compartirla!

Aportar un comentario


*