Las cookies nos permiten ofrecer nuestros servicios. Al utilizar nuestros servicios, aceptas el uso que hacemos de las cookies. Más Información. Aceptar

Webpack: Crear un alias

Pablo Fernandez
  • Escrito por Pablo Fernandez el 18 de Febrero de 2019
  • 2 min de lectura |
Webpack: Crear un alias
El reproductor de video será cargado en breves instantes.

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 básico.

curso-webpack-intermedio

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

Relacionado

Te dejamos una selección de cursos, carreras y artículos

Optimización con Webpack

Optimización con Webpack

Desarrollo móvil

12 de Febrero de 2019

Te explicamos en qué consiste la optimización en Webpack y los beneficios que nos aporta.

Programador JavaScript Profesional

carrera

Incluye 6 cursos:

  • Node.js, MongoDB y Express.js
  • Curso de Meteor JS
  • Curso de React JS

y 3 cursos más!

Duración: 54 horas y 25 minutos

Curso de Webpack intermedio

Curso de Webpack intermedio

curso

Con este curso aprenderás:

  • Aprenderás a configurar tu proyecto para la puesta en producción
  • Utilizaremos webpack merge para organizar mejor nuestra configuración..
  • Aplicarás optimizaciones sobre las dependencias de tu proyecto.

Duración: 2 horas y 12 minutos

Estas son algunas de las empresas que ya confían en OpenWebinars

Profesores y profesionales

Nuestros docentes son profesionales que trabajan día a día en la materia que imparten

Conviértete en profesor de OpenWebinars