Webpack Alias

🅰️ Webpack Alias

• Alias ⇒ nos permiten otorgar nombres paths específicos evitando los paths largos
• Para crear un alias debes agregar la siguiente configuración a webpack

module.exports = {
	...
	resolve: {
		...
    alias: {
      '@nombreDeAlias': path.resolve(__dirname, 'src/<directorio>'),
    },
	}
}

• Puedes usarlo en los imports de la siguiente manera

import modulo from "@ejemplo/archivo.js";

💡Solución fuentes

Si las fuentes aparecen en la carpeta images en dist y el navegador no lo reconoce no es porque algo en el código esté mal, me tomó un buen rato revisarlo, no pierdan el tiempo, es un problema que da el cambio de versiones en Webpack y en css-loader. La solución a esto la dió Luc en una respuesta en Loaders de este curso, no es necesario cambiar versiones solo modificar el código y cambiar :

Código antiguo

test: /\.(woff|woff2)$/,
        use: {
          loader: 'url-loader',
          options: {
            limit: 10000,
            mimetype: "application/font-woff",
            name: "[name].[contenthash].[ext]",
            outputPath: "./assets/fonts/",
            publicPath: "../assets/fonts/",
            esModule: false,
          },
        }

Código nuevo

test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: "asset/resource",
        generator: {
          filename: "assets/fonts/[hash][ext]",
        },

MY NOTES FOR WEBPACK ALIAS 😄

En esta clase vamos a aprender a como utilizar alias para los paths que estamos utilizando

Para crear un alias debes agregar la siguiente configuración a webpack

resolve:{

    extensions:['.js'],
    //Agregamos una key alias a nuestro objeto resolve
      //para ponerles nombres mas pequenos a las extensiones
        //de nuestros archivos
    alias:{
      '@utils': path.resolve(__dirname, 'src/utils/'),
      '@templates': path.resolve(__dirname, 'src/templates/'),
      '@styles': path.resolve(__dirname, 'src/styles/'),
      '@images': path.resolve(__dirname, 'src/assets/images/'),

    }
  }

Estos alias los vamos a poder utilizar dentro de nuestro proyecto para que cuando webpack lo prepare va a identificar que esta es la ruta a la que tenemos que entrar

• Luego agregamos estos alias en nuestras rutas en nuestro archivo de js

import Template from '@templates/Template.js';
import '@styles/main.css';

(async function App() {
  const main = null || document.getElementById('main');
  main.innerHTML = await Template();
})();

• Lo agregamos en nuestro archivo que genera nuestro template

import getData from '@utils/getData.js';
//importamos la configuracion de las imagenes

import github from '@images/github.png';
import twitter from '@images/twitter.png';
import instagram from '@images/instagram.png';

Usamos alias para que cuando tengamos que mandar a llamar un archivo que se encuentra en una carpetea muy lejana, evitemos algo como import ../../../.

alias: {
      '@utils': path.resolve(__dirname, 'src/utils/'),
      '@templates': path.resolve(__dirname, 'src/templates/'),
      '@styles': path.resolve(__dirname, 'src/styles/'),
      '@images': path.resolve(__dirname, 'src/assets/images/'),
    }

Así en vez de tener un directorio muy largo, tenemos:

import getData from '@utils/getData.js';
import github from '@images/github.png'

Para que me sirven los Alias?

Los alias nos ayudan a ubicar ciertos directorios sin la necesidad de escribir tantos puntos seguidos de slashes. Su principal ventaja es que nos permiten tener un código mas fácil de entender y mucho mas elegante.

Atributo publicPath:

Como publicPath ‎es utilizado por varios plugins de Webpack para actualizar las DIRECCIONES URL dentro del CSS.
lo que se hizo es como si estuvieras en el css:

publicPath: '../assets/fonts/'

// Desarrollo:
@font-face {
	font-family: 'Ubuntu';
	src: url('../assets/fonts/ubuntu-regular.woff2') format('woff2'),
		url('../assets/fonts/ubuntu-regular.woff') format('woff');
	font-weight: 400;
	font-style: normal;
}

// Producción:
@font-face {
	font-family: 'Ubuntu';
	src: url('https://algunHosting/assets/fonts/ubuntu-regular.woff2') format('woff2'),
		url('https://algunHosting/assets/fonts/ubuntu-regular.woff') format('woff');
	font-weight: 400;
	font-style: normal;
}

En lugar de publicPath: ‘./assets/fonts/’, que lo que hace es romper la url:

// Desarrollo:
@font-face {
	font-family: 'Ubuntu';
	src: url('./assets/fonts/ubuntu-regular.woff2') format('woff2'),
		url('./assets/fonts/ubuntu-regular.woff') format('woff');
	font-weight: 400;
	font-style: normal;
}

// Producción:
@font-face {
	font-family: 'Ubuntu';
	src: url('https://algunHosting/not-found') format('woff2'),
		url('https://algunHosting/not-found') format('woff');
	font-weight: 400;
	font-style: normal;
}

alias:{
      '@utils': path.resolve(__dirname, 'src/utils/'),
      '@templates': path.resolve(__dirname, 'src/templates/'),
      '@styles': path.resolve(__dirname, 'src/styles/'),
      '@images': path.resolve(__dirname, 'src/assets/images/'),
    }```

13.-Webpack Alias

.
Se pueden usar para los paths que usamos e identificar mejor la forma en la que vamos a traer los elementos dentro de los archivos.

Puede llegar un momento en el que al momento de importar un archivo que se encuentra en otro lugar se llene de “…/” y nos puede confundir. Para esto usamos alias, que nos ayudan a identificar donde está el archivo sin tener que usar “…/” .

Para crearlo:

• En webpack creamos un apartado llamado “alias”.

resolve: {
    extensions: [".js"], //Las extensiones que vamos a usar.
    alias: {
      //@ stands 4 alias
      "@utils": path.resolve(__dirname, "src/utils/"), //Ahi es donde esta
      "@templates": path.resolve(__dirname, "src/templates/"),
      "@styles": path.resolve(__dirname, "src/styles/"),
      "@images": path.resolve(__dirname, "src/assets/images/"), //Cerrar con el /
    },
  },

//Llamada 
import getData from "@utils/getData.js";
import github from "@images/github.png";
import twitter from "@images/twitter.png";
import instagram from "@images/instagram.png";

• Cuando webpack lo prepare va a identificar la ruta hacía donde debe estar.
• Esto hace más amigable el código.

Usa ctrl + D en vs code para editar múltiples líneas al mismo tiempo

El error que le sale a Oscar puede resolverse de una manera más elegante, como muestro en el siguiente snippet

options:{
	//configuracion existente,
	outputPath: "./assets/fonts"
	publicPath:"./fonts"
}

Webpack Alias

Una de las mejores configuraciones de Webpack, es poder crear Alias, para los pads que utilizamos e identificar la forma en la que traeremos los elementos dentro de los archivos.
⠀⠀
Esta solución es debido a que aveces tenemos que llamar archivos con una ruta de acceso muy larga, esto se volvía unneedled hard.
⠀⠀
Vamos a nuestro objeto module.exports y en nuestro objeto resolve agregamos.
⠀⠀

resolve: {
    extensions: [".js"],
    alias: {
      '@utils': path.resolve(__dirname, 'src/utils'),
      '@templates': path.resolve(__dirname, 'src/templates'),
      '@styles': path.resolve(__dirname, 'src/styles'),
      '@images': path.resolve(__dirname, 'src/assets/images')
    }
  },

⠀⠀
Ahora podremos trabajar con alias. Esto vuelve más legible nuestro código.
⠀⠀

import getData from "@utils/getData.js";
import github from "@images/github.png";
import twitter from "@images/twitter.png";
import instagram from "@images/instagram.png";

Sinceramente, estoy odiando este curso porque no entiendo un ca#@*%

Los Webpack Alias nos sirven para crear alias para los paths que estamos utilizando e identificar de mejor manera la manera en la que estamos trayendo elementos dentro de los archivos.

Para esto, en el archivo de configuración, agregamos la propiedad alias al resolve del archivo y dentro un objeto con todos los alias que queramos definir.

Con esto ya podemos usar los alias en toda la aplicación y hacer más legible la parte de las direcciones.

Una de las configuraciones es crear alias para los PATHS que usamos, e indentificar mejor las formas en las que estamos trayendo nuestros elementos dentro de los archivos.

Para crear nuestros alias en nuestro archivo de configuracion, donde tenemos nuestro apartado de resolve agregaremos un nuevo apartado llamado alias donde ahi agregaremos estos de la siguiente forma:

alias:{
			'@utils': path.resolve(__dirname, 'src/utils/'),
      '@templates': path.resolve(__dirname, 'src/templates/'),
      '@styles': path.resolve(__dirname, 'src/styles/'),
      '@images': path.resolve(__dirname, 'src/assets/images/'),
}

De esta forma podemos cambiar todos los SRC que tengamos para asi poder cambiar las carpetas por las variables o alias.

resolve: {
    extensions: ['.js'], // Extensiones con las que vamos a trabajar
    alias: {
      // Aqui le damores un alias a las rutas de nuestro proyecto
      '@utils': path.resolve(__dirname, './src/utils/'),
      '@templates': path.resolve(__dirname, './src/templates/'),
      '@styles': path.resolve(__dirname, './src/styles/'),
      '@images': path.resolve(__dirname, './src/assets/images/'),
    },
  },

Para que los alias funcionen con el Intellisense de VSCode, tenemos que crear un archivo llamado jsconfig.json en nuestra carpeta src, con este contenido:

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@utils/*": [
        "utils/*"
      ],
      "@templates/*": [
        "templates/*"
      ],
      "@styles/*": [
        "styles/*"
      ],
      "@images/*": [
        "assets/images/*"
      ]
    }
  },
  "exclude": [
    "node_modules"
  ]
}

Esto ya te permitirá autocompletado de paths, pero solo para archivos cuya extensión sea .js. Si alguien logra conseguirla para otras extensiones, se lo agradecería mucho 😃

También podemos usar los alias de la siguiente manera, sin el @:

resolve: {
        extensions: ['.js'],
        alias: {
            styles: path.resolve(__dirname, 'src/styles/'),
            templates: path.resolve(__dirname, 'src/templates/'),
            utils: path.resolve(__dirname, 'src/utils/'),
            images: path.resolve(__dirname, 'src/assets/images/')
        }
    },

Excelente clase

A mí la fuente de Ubuntu no estaba funcionando, y tiempo despues de estar probando y comparando con el codigo del profesor descubri que el problema estaba en el css-loader.
A partir de la version 6 de css-loader tengo problemas en las fuentes importadas, pero con la version 5 me funcionó perfectamente aunque no se el porque todavía

Webpack Alias

We can use alias to the paths we are using and identify the way we bring our files.

Set the alias on webpack.config.js file.

resolve: {
    extensions: ['.js'],
    alias: {
      '@utils': path.resolve(__dirname, 'src/utils/'),
      '@templates': path.resolve(__dirname, 'src/templates/'),
      '@styles': path.resolve(__dirname, 'src/styles/'),
      '@images': path.resolve(__dirname, 'src/assets/images/'),
    },
  },

On resolve , we put the alias to important paths. Then we can change the paths on project files with @alias_name.

Example

import Template from '@templates/Template.js';
import '@styles/main.css';
import '@styles/vars.styl';

@roremDev

No olvides comentar que alias forma parte del objeto resolve el cual nos permite configurar la forma en que webpack resolverá los módulos incorporados.En nuestro camino, tenemos dos:

• resolve.alias - para crear atajos que optimizan el tiempo de búsqueda e incorporación de módulos (commonJS o ES6)
• resolve.extensions - para darle prioridad en resolución para con las extensiones donde si hay archivos nombrados igualmente, pero con diferentes extensiones, webpack resolverá conforme están listados.

Que cool al fin entendí el @Home del import de Vue, best teacher 💚