Webpack: Crear un alias

Qué es un Alias en Webpack

A veces cuando vamos a utilizar una librería, la misma no está empaquetada correctamente o no se está llamando al entry point necesario para ejecutar la aplicación, y tenemos que recurrir a pequeñas triquiñuelas para poder importar estos ficheros.

Para evitar tener que hacer cosas extrañas cada vez que requiramos el fichero, podemos crear un Alias sobre un fichero, con un hombre que nosotros especifiquemos, y así poder utilizarlo en cualquier otro sitio que necesitemos.

No solo podemos hacerlo con librerías que se encuentren en otros módulos, también podemos hacerlos con ficheros que estén muy profundos en carpetas de directorios o similares. En estos casos podemos crear un Alias que sea más conciso y que tenga también sentido dentro de nuestra aplicación.

Ejemplo práctico de un Alias

Vamos a ver un ejemplo rápido, en el que utilizaremos un proyecto en el que tenemos un fichero de configuración básico de Webpack. La sintaxis para crear un Alias sería la siguiente:

const path = require(‘path’);
const base = pathToFile => path.resolve(__dirname, pathToFile);
module.exports = {
entry: base(‘src/app.js’),
output: {
path: base(‘dist’),
filename: ‘bundle.js’
},
resolve: {
alias: {
config: path.resolve(__dirname, ‘src’, ‘config’, ‘app’, ‘index.js’)
}
}
};

Tenemos una propiedad dentro del nivel del objeto de Webpack que se llama resolve, en la que vamos a poder especificar cómo se resuelven los diferentes módulos.

Una de estas propiedades es alias, que aquí es un objeto dónde cada propiedad va a ser un alias que nosotros creemos. Podríamos poner expresiones regulares o expresiones más complicadas, pero en este caso usamos el nombre config, así podemos utilizarlo en lugar de tener que usar la ruta del fichero.

Después tenemos que resolverlo indicando la ruta absoluta de nuestro directorio y además vamos concatenando los diferentes segmentos de la ruta y el nombre del archivo. De esta forma ya tenemos declarado nuestro alias y así podemos utilizarlo automáticamente.

Si este alias apunta a un fichero que no existe, a una ruta incorrecta o no tiene permisos, Webpack mostrará un error, porque cuando intente resolver el fichero no va a poder.

Para utilizar el alias podríamos hacerlo de esta forma en el archivo correspondiente:

import Config from ‘config’;

En lugar de tener que especificar toda la ruta completa utilizamos el Alias, entonces Webpack resolverá primero los Alias y después irá inyectando ese fichero.

Si quieres avanzar y profundizar sobre Webpack puedes hacer el curso de Webpack intermedio en el que aprenderás a estructurar los ficheros de configuración y a configurar un proyecto para su puesta en producción aplicando optimizaciones y utilizando propiedades nuevas que se impartieron en el curso inicial de Webpack.

Recuerda que puedes comenzar este curso con tu suscripción de OpenWebinars. Si todavía no estás suscrito, aprovecha para hacerlo ahora.