Vamos a comenzar una segunda entrega de los artículos dedicados a Webpack, en la que continuaremos aprendiendo cosas interesantes para el uso de esta potente herramienta de desarrollo frontend.

Abordaremos en esta ocasión el archivo webpack.config.js, que sirve para definir la configuración del proyecto, de modo que podamos conseguir realizar más tipos de tareas con Webpack. Partiremos del conocimiento que ya se compartió en el artículo de los primeros pasos con Webpack y veremos un par de ejemplos de configuraciones sencillas.

Recuerda que para usar Webpack necesitas iniciar tu proyecto con npm y luego instalar el propio Webpack, como dependencia de desarrollo, en local. Esto lo consigues ejecutando los siguientes comandos de terminal, desde el directorio raíz de tu proyecto.

npm init
npm i -D webpack webpack-cli

Ahora vamos a crear una carpeta donde colocaremos nuestro código fuente, de origen, de nuestra aplicación, así como el archivo con el código Javascript raíz.

mkdir src
cd src
touch index.js

Aquí tenemos todo lo necesario para que Webpack funcione, aunque hasta el momento no hemos visto nada que no se conociera del artículo anterior de Webpack. Cualquier duda, por favor consulta la referencia.

Scripts npm

Ahora, como novedad, vamos a crear unos scripts de npm con los que podamos invocar fácilmente Webpack. Estos scripts se tienen que colocar en el archivo package.json, en la propiedad "scripts".

Básicamente lo que escribimos son los comandos de uso de Webpack, tanto en la etapa de desarrollo como en la etapa de producción.

"scripts": {
   "build": "webpack --mode production",
   "builddev": "webpack --mode development"
 },

Ahora podemos ejecutar perfectamente esos scripts de npm, desde la raíz del proyecto, el lugar donde está el propio package.json, con un comando de consola como este:

npm run build

Verás como Webpack se pone a funcionar y crea la carpeta "dist" con los archivos generados por el empaquetador.

Hasta aquí todavía no hemos visto nada demasiado nuevo, pero al menos tenemos todo lo necesario para comenzar a trabajar. Abordaremos entonces ya mismo la configuración de Webpack.

Archivo webpack.config.js

webpack.config.js es el archivo donde se tiene que controlar la configuración de Webpack, de modo que podamos personalizar su comportamiento según las necesidades de cada proyecto.

Este archivo se debe colocar en la raíz del proyecto, en la misma carpeta que el package.json. Al menos es donde Webpack intentará encontrarlo, pues también podríamos colocar la configuración en otra ruta o en otro nombre de archivo si lo vemos conveniente, en cuyo caso deberíamos personalizar los comandos invocación de Webpack con el parámetro "--config" seguido de la ruta completa al archivo de configuración.

El archivo webpack.config.js contiene código Javascript, que será procesado por NodeJS. Por ello, si no conoces NodeJS seguramente algunas cosas te resultarán un poco diferentes del código Javascript que usas en el entorno de ejecución del navegador. Recuerda que puedes aprender en el Manual de NodeJS, o resolver diversas dudas sobre este entorno de ejecución Javascript.

Estructura básica de webpack.config.js

Este archivo tiene que realizar una exportación de un objeto Javascript, que contiene todas las propiedades necesarias para alterar las configuraciones predeterminadas de Webpack, así como instanciar los plugins de los plugins y definir los cargadores que queramos usar para nuestro proyecto.

Comenzaremos con una estructura básica, que iremos complicando poco a poco, a medida que agreguemos más y más configuración al archivo. De momento comenzamos con esta base de código.

const path = require('path');

module.exports = {
  output: {
    path: path.resolve(__dirname, 'public_html/js'),
  },
}

En este archivo estamos configurando tan solo una de las muchas cosas que Webpack permite alterar, el directorio de salida de los paquetes (bundles) generados. Para quien no conozca NodeJS vamos a dar una serie de notas interesantes:

• Con la primera línea estamos trayendo un módulo llamado "path" que forma parte de NodeJS, que nos sirve para trabajar con archivos y rutas de directorios. Los módulos en NodeJS sirven para ordenar el código. Cada archivo Javascript es un módulo, que puede importar código de otros módulos y exportar código de este módulo hacia afuera. Require es la sentencia que se usa para importar un módulo y 'path' es el nombre del módulo que deseamos importar. Dicho módulo se almacena en una constante llamada "path".
• Con "module.exports" estamos exportando hacia afuera código Javascript. Todo el código que esté dentro de exports se podrá usar fuera del archivo / módulo que estamos programando.
• path.resolve(), el método resolve del módulo path, sirve para resolver una secuencia de cadenas con caminos, en un camino completo. Es como una especie de concatenador de caminos, que devuelve un camino absoluto juntando todas las secuencias.
• __dirname equivale en NodeJS al directorio del disco duro donde está situado nuestro módulo, en el que estamos programando.

Ahora que ya tenemos alguna idea básica de NodeJS, podemos comprender qué es lo que le estamos indicando a Webpack. Es bien simple, pues solamente estamos alterando una de las muchas cosas que se pueden configurar, en este caso el directorio de salida de los archivos, bundles o paquetes, generados.

Como podrás suponer, a través de la propiedad "output" del objeto que estamos exportando en el webpack.config.js, estamos definiendo la ruta donde se colocarán los bundles, que en este caso será la concatenación entre la ruta donde se encuentra webpack.config.js y una cadena de camino extra. Por tanto, ahora Webpack colocará los bundles en la carpeta "public_html/js" en lugar de la carpeta "dist", estando esa carpeta dentro de nuestro proyecto.

Entry y output en Webpack

La propiedad output la acabamos de conocer, aunque ahora veremos alguna configuración extra. Por su parte, la propiedad entry nos sirve para definir el punto de entrada del código de nuestro proyecto, es decir, el archivo Javascript desde donde Webpack comenzará a procesar el código de nuestra aplicación para crear los bundles.

El siguiente código de webpack.config.js nos muestra una configuración más personalizada del proyecto, con las propiedades entry y output.

const path = require('path');

module.exports = {
  output: {
    path: path.resolve(__dirname, 'public_html/js'),
    filename: 'app.js'
  },
  entry: {
    main: './fuentes/inicio.js'
  }
}

Como novedad en este ejemplo estamos indicando:

• Output filename: Sirve para decirle el nombre del archivo del bundle que va a generar.
• Entry main: sirve para indicar el archivo de Javascript de entrada de este proyecto.

Otras propiedades que podemos configurar en webpack.config.js

A lo largo del manual de Webpack iremos explicando otras propiedades que podemos usar en el archivo webpack.config.js, con ejemplos prácticos. De todos modos, para ir adelantando, algunas cosas que se podrán definir son:

• mode: para el modo de trabajo (development o production)
• entry: como se ha visto, para definir el punto de entrada de nuestro código, de modo que podamos alterarlo a otra cosa que no sea la predeterminada (src/index.js)
• output: como hemos visto, para definir el punto de salida.
• module: sirve para aclararle a Webpack cómo debe procesar los loaders que queramos usar para un proyecto.
• plugins: sirve para definir los plugins que vamos a usar, que permiten ampliar la cantidad y el tipo de tareas que Webpack puede realizar por sí mismo. Generalmente las transformaciones de los loaders se basan en algún plugin, aunque no siempre es así. En la propiedad plugins tenemos que instanciar los objetos de cada plugin que queremos usar y que nos den soporte a aquellas transformaciones o tareas deseadas.

Conclusión

Aunque de momento no hemos configurado muchas cosas en el webpack.config.js, tendremos tiempo para ello en futuros artículos.

De momento y para terminar puedes poner en marcha lo que hemos realizado hasta el momento en este artículo, lanzando el comando:

npm run build

Apreciarás que el bundle de código de nuestra aplicación se almacena en la carpeta que hemos definido en el archivo webpack.config.js, con lo que ya hemos podido comenzar a personalizar el comportamiento de Webpack para nuestro proyecto.

Hay todavía mucho trabajo por delante para configurar todo un proyecto frontend con Webpack, pero sin duda éste ha sido un buen inicio. En artículos siguientes aprenderás cosas tan importantes como el traspilado del código Javascript, la compilación del CSS, o el trabajo con los archivos HTML del proyecto.