Webpack Alias

💡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]",
        },

🅰️ 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";

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';

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

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'

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

Creo q hace falta desarrollo en todo esto. Porque lo que me hace sentir el profe es que no estoy aprendiendo.
Esto se me asemeja a coger un manual, pero no en la parte donde explica el producto, sino en la parte que dice
-has este paso
-luego este paso
-luego no hagas este paso porque vamos a usar este paso
-podemos o no usar el siguiente paso
…
Es como en los repositorios de github, que suelen tener una documentación que explica como usar y para qué sirve cada cosa y una otra parte en la que solo pone los pasos que debes seguir para inicializarla

Estas clases son como si solo viéramos esos pasos, pero en el fondo no tenemos ni idea de lo q estamos haciendo ( obviamente llegamos a tener una ligera idea porq manejamos js, pero ese no es el punto de un curso). Este profe se ve sabe demasiado o muchismo, pero no está enseñando, solo nos está dando los pasos para hacer un empaquetado.
Al final aprendes más rapido solo leyendo la documentacion o viendo algun video de yt

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/'),
    }```

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 😃

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.

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";

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

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/'),
    },
  },

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

Si usaste
.

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

No tienes necesidad de cambiar el publicPath, o a mí me funcionó.

Los que agregamos esto en webpack.config.js en el apartado de font:

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

No movimos nada y funciono. 😎👍

comparto código hasta ahora poniendolo bonito, viendo los otros comentarios y consultando.

const path = require("path")
const HtmlWepbackPlugin = require("html-webpack-plugin")
const MiniCSSextractPlugin = require("mini-css-extract-plugin")
const copyPlugin = require("copy-webpack-plugin")
const CSSMinimizerPlugin = require("css-minimizer-webpack-plugin")
const TerserPlugin = require("terser-webpack-plugin")

/** @type {import('webpack').Configuration} */
module.exports = {
	entry: "./src/index.js",
	output: {
		path: path.resolve(__dirname, "dist"),
		filename: "[name].[contenthash].js",
		clean: true,
	},
	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/"),
			"@fonts": path.resolve(__dirname, "src/assets/fonts/"),
		},
	},
	module: {
		rules: [
			{
				test: /\.m?js$/,
				exclude: /node_modules/,
				use: {
					loader: "babel-loader",
				},
			},
			{
				test: /\.css|.styl$/i,
				use: [
					MiniCSSextractPlugin.loader,
					"css-loader",
					"stylus-loader",
				],
			},
			{
				test: /\.png/,
				type: "asset/resource",
				generator: {
					filename: "assets/images/[name].[contenthash].[ext]",
				},
			},
			{
				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,
					},
				},
			},
		],
	},
	plugins: [
		new HtmlWepbackPlugin({
			inject: true,
			template: "./public/index.html",
			filename: "./index.html",
		}),
		new MiniCSSextractPlugin({
			filename: "assets/[name].[contenthash].css",
		}),
	],
	optimization: {
		minimize: true,
		minimizer: [new CSSMinimizerPlugin(), new TerserPlugin()],
	},
}

agregar clean igual a true en el output de los exports

output: {
  filename: '[name].bundle.js',
  path: path.resolve(__dirname, 'dist'),
  clean: true
},

Hay que notar tambien que se esta usando copiar las imagenes y cargar las imagenes; en mi código yo quité eso y quedó mas organizado el encarpetado del /dist

const path = require("path")
const HtmlWepbackPlugin = require("html-webpack-plugin")
const MiniCSSextractPlugin = require("mini-css-extract-plugin")
const copyPlugin = require("copy-webpack-plugin")
const CSSMinimizerPlugin = require("css-minimizer-webpack-plugin")
const TerserPlugin = require("terser-webpack-plugin")

/** @type {import('webpack').Configuration} */
module.exports = {
	entry: "./src/index.js",
	output: {
		path: path.resolve(__dirname, "dist"),
		filename: "[name].[contenthash].js",
	},
	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/'),
            '@fonts': path.resolve(__dirname, 'src/assets/fonts/'),
        }
	},
	module: {
		rules: [
			{
				test: /\.m?js$/,
				exclude: /node_modules/,
				use: {
					loader: "babel-loader",
				},
			},
			{
				test: /\.css|.styl$/i,
				use: [MiniCSSextractPlugin.loader, "css-loader", "stylus-loader"],
			},
			{
				test: /\.png/,
				type: "asset/resource",
				generator: {
                filename:'assets/images/[name].[contenthash][ext]'
            }
			},
			{
				test: /\.(woff|woff2|eot|ttf|otf)$/i,
            type: 'asset/resource',
            generator: {
                filename:'assets/fonts/[name].[contenthash][ext]'
            }
			},
		],
	},
	plugins: [
		new HtmlWepbackPlugin({
			inject: true,
			template: "./public/index.html",
			filename: "./index.html"
		}),
		new MiniCSSextractPlugin({
			filename: "assets/[name].[contenthash].css"
		}),
	],
	optimization: {
		minimize: true,
		minimizer: [
			new CSSMinimizerPlugin(),
			new TerserPlugin(),
		]
	}
}

Webpack Alias

Nos ayuda para darle un nombre a una ruta específica. Para esto solo es necesario añadirle al objeto resolve la propiedad alias de la siguiente manera:

resolve: {
  ...
  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"),
  },
},

En lugar del directorio ponemos el alias con @

Todos los alias

Ejemplo de alias

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 💚