A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Curso de Webpack

Curso de Webpack

Oscar Barajas Tavares

Oscar Barajas Tavares

Webpack Alias

13/28
Recursos

Aportes 23

Preguntas 10

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

馃叞锔 Webpack Alias

<h4>Apuntes</h4>
  • 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';
<h4>Webpack Alias</h4>

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 鈥巈s 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 鈥渁lias鈥.
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.
es como los namespaces de php, creo ... 鉁

Que cool al fin entend铆 el @Home del import de Vue, best teacher 馃挌