Imágenes y alias en Webpack

Aquí dejo algunos alias 😄

    alias: {
      '@components': path.resolve(__dirname, 'src/components/'),
      '@containers': path.resolve(__dirname, 'src/containers/'),
      '@pages': path.resolve(__dirname, 'src/pages/'),
      '@styles': path.resolve(__dirname, 'sass/'),
      '@icons': path.resolve(__dirname, 'src/assets/icons/'),
      '@logos': path.resolve(__dirname, 'src/assets/logos/'),
    }

Como saben también existen las imágenes JPEG, una forma para incluirlas en nuestro Webpack sin tener que escribirla como una extensión aparte de las que ya tenemos es la siguiente:

test: /\.(png|jp(e*)g|svg|gif)$/

¡Qué profesor tan crack!

Si a alguien, aún así haciendo todo esto, no le cargan las imágenes, les recomiendo leer este artículo https://blog.logrocket.com/how-to-use-svgs-in-react/

Te indica cómo instalar un loader para imágenes y cómo configurar el Webpack. Solo de esta forma pude utilizar las imágenes. Saludos.

Imágenes y alias en Webpack

Primero editemos el webpack.config.js para poder tener imágenes en nuestra Web.

module: {
		rules: [
			{
				test: /\.(png|svg|jpg|gif)$/,
				type: 'asset',
			}
		]
	},
// ahora es super sencillo porque webpack 5 por defecto ya puede manejar 
// extensiones de imágenes

Al momento que queramos usar estas imágenes podemos realizarlo de la siguiente manera

// Header.jsx como ejemplo
import menu from '@icons/icon_menu.svg';
import logo from '@logos/logo_yard_sale.svg'
import shoppingCart from '@icons/icon_shopping_cart.svg';

<img src={menu} alt="menu" className="menu" />
<img src={logo} alt="logo" className="nav-logo" />
<img src={shoppingCart} alt="shopping cart" />

Usemos alias para facilitar la importación y rutas en nuestra aplicación

module.exports = {
	resolve: {		
		alias: {
			'@components': path.resolve(__dirname, 'src/components/'),
			'@containers': path.resolve(__dirname, 'src/containers/'),
			'@pages': path.resolve(__dirname, 'src/pages/'),
      '@styles': path.resolve(__dirname, 'src/styles/'),
			'@icons': path.resolve(__dirname, 'src/assets/icons/'),
			'@logos': path.resolve(__dirname, 'src/assets/logos/'),
			'@routes': path.resolve(__dirname, 'src/routes/'),
		}
	}
}

por si no tienen a mano el link del repo
https://github.com/platzi/curso-frontend-developer-practico

Al principio si me pareció súper extraño cuando el profe hizo la asignación de las url de los logos e iconos a una constante, lo primero que pensé fue: “¿Qué? está asignando un valor string y lo va a leer cómo tal” efectivamente pasó. la vieja confiable, “import”

También se estaban llamando de forma duplicada las variables de sass, del archivo _vars.scss, la solución que encontré, es eliminar la importación de las variables en todos los estilos de cada componente, y simplemente importarlo en el Layout, así estaremos llamando una única vez a todas las variables, puesto el container Layout solo se llama una vez en toda la app

**Archivo Layout.jsx **

import React from 'react';
import '@styles/Layout.scss';

const Layout = ({ children }) => {
    return (
        <div className="Layout">
            {children}
        </div>
    );
}

export default Layout;

Archivo Layout.scss

@use '_vars.scss';

Les recomiendo Image preview, es una extension de VS que sirve para ver la imagen que estamos trayendo al momento de hacer el llamado de la imagen.

Tengo una duda, si hubieramos trabajado con alguna herramienta como Vite o Create React App, como se implementarian estos aliases? o en esos casos no seria necesario?

llegar aqui fue dificil pero usando sangoogle pude corregir todo y aprender mas… me acordé de lo dificil que fue cuando fui a la universidad, pero se puede muchachos con esfuerzo se puede 😄

no me cargaban las imágenes, realice el siguiente proceso para solucionarlo:

Instale file-loader

npm install --save-dev file-loader

Configure WebPack la siguiente linea:

{
  test: /\.(png|svg|jpg|gif)$/,
  use: 'file-loader',
}

acá la info:

qué son los alias?
se añaden dentro de webpack, webpack.config.js
para que es?
para crear diferente elementos q van a ser clave en nuestro proyecto, vamos a crear rutas. que en vez de usar …/, contenedores, slash, nombre del proyecto o archivo.
podremos utilizar una forma más amigable para poder llamar a sus elementos y no tener que tener rutas demasiados largas o salir de una carpeta para volver a ingresar
Vamos a la parte donde dice resolve; dentro de ahí, vamos a crear una nueva configuración que se llamara alias
en alias tenderemos un objeto que nos va a permitir añadir cada uno de estos elementos como una referencia , por lo tanto el primer elemento que podríamos crear seria

• ‘@component ‘: path.resolve(__dirname, ‘src/components/’),
  ’@containers’: path.resolve(__dirname, ‘src/containers/’),
  ’@pages’: path.resolve(__dirname,‘src/pages/’),
  ’@styles: path.resolve (__dirname,‘src/styles/’),
  ’@icons’: path.resolve(__dirname, ‘src/assets/icons/’),
  ’@logos’: path.resolve(__dirname,‘src/assets/logos/’),

Codigo:

alias: {
            '@components': path.resolve(__dirname, 'src/components/'),
            '@containers': path.resolve(__dirname, 'src/containers/'),
            '@pages': path.resolve(__dirname, 'src/pages/'),
            '@styles': path.resolve(__dirname, 'src/styles/'),
            '@icons': path.resolve( __dirname, 'src/assets/icons/'),
            '@logos': path.resolve( __dirname, 'src/assets/logos/')
        }

otra clase donde te dicen, escribe esto escribe aquello, pero ni idea del porque o de donde salio eso

Esta clase si me gustó mucho ;3

Hola, Comunidad.

Ha Cambiado la forma de agregar alias en webpack 5

Actualmente se puede agregar los alias sin la necesidad de comillas en el alias y sin el @, puede ser directo

module.exports = {
	...
	alias: {
		logos: path.resolve(__dirname, 'src/assets/logos/'),
	}
}

Y lo importas normalmente:

import logo from 'logos/logo.svg';

El profe ha mejorado mucho del curso de Webpack a este, ahora si está sacando todo su potencial conocimiento explicándolo de mejor manera.

En mi caso, aún no me cargaban las imagenes y solo tuve que quitar el type: ‘asset’ y dejar la configuración inicial que se vieron en las primeras lecciones.

Mi webpack.config.js quedó de la siguiente manera:

...
{
        test: /\.(png|jp(e*)g|svg|gif)$/,
        use: [
          {
            loader: "file-loader",
            options: {
              name: "images/[hash]-[name].[ext]",
            },
          },
        ],
      },
...

Si vienen de create-react-app. Recomendación sáltense a vite, webpack es un agujero al infierno

A mi me gusta tener mis aliases en un archivo separado. Quedando mi configuracion asi:

// src/config/aliases.js
const aliases = (prefix = `src`) => ({
  '@api': `${prefix}/main/services/api`,
  '@assets': `${prefix}/library/assets`,
  '@components': `${prefix}/library/components`,
  '@constants': `${prefix}/library/constants`,
  '@hooks': `${prefix}/library/hooks`,
  '@icons': `${prefix}/components/atoms/Icons`,
  '@lang': `${prefix}/lang`,
  '@main': `${prefix}/main`,
  '@pages': `${prefix}/pages`,
  '@services': `${prefix}/main/services`,
  '@store': `${prefix}/main/store`,
  '@utils': `${prefix}/library/utils`,
})

module.exports = aliases

Y en webpack asi:

const path = require('path')
const alias = require(`./src/config/aliases`)
const aliases = alias(`./src`)
const resolvedAliases = Object.fromEntries(
  Object.entries(aliases).map(([key, value]) => [
    key,
    path.resolve(__dirname, value),
  ])
)
module.exports = {
  // ...
  resolve: {
    alias: resolvedAliases,
  },
// ...

resolve: {
extensions: [’.js’, ‘.jsx’],
alias: {
’@styles’: path.resolve(__dirname, ‘src/styles/’),
Icons: path.resolve(__dirname, ‘src/assets/icons/’),
Logos: path.resolve(__dirname, ‘src’, ‘assets’, ‘logos’),
},
},

Para los que hemos hecho el proyecto con create-react-app una alternativa a esto lo pueden encontrar en este blog: https://dev.to/rfornal/create-path-aliases-in-react-2oid

los que usamos vite js😎

https://platzi.com/cursos/vitejs/

Por si alguno más le ocurre, en el webpack.config es

type: asset

No

type: assets  // la "s" de mas genera un error

Si estás en wsl y al copiar los archivos de assets, se crean unos archivos “extraños”, puedes usar este comando para limpiarlos

find . -type f -name '*Zone.Identifier*' -delete

Curso de línea de comando urgente!
Programador que se respeta no usa la GUI!
(No es cierto, sí la usa 😅)

Me habia esperado hasta esta clase para mostrar mi error 404 debido a que no sabia como obtener la imagen, asi me quedó:

Me parece genial aprender webpack y es algo que nos aportara mucho en nuestra carrera profesional, pero creo que es enfoca el curso más en webpack que en React al menos hasta esta clase.

Si a alguien no le cargan las imagenes solo agreguen “resource” en type. Esto se hace en Webpack 5.

{
        test: /\.(png|svg|jpg|gif)$/,
        type: "asset/resource",
      },

Sigo sin entender que beneficio da usar webpack, si con create-react-app ya se puede hacer todo lo que se debe acá configurar en el webpack, solo te concentras en desarrollar la aplicación y listo, con webpacks veo todo más tedioso y con mucha perdida de tiempo hasta para configurar la importación de una simple imagen

ICONOS y LOGOS de la CLASE

Para que no se tarden buscando y enredandose, porque esta clase necesita atención en los imports y webpack. Saludos
Link: https://drive.google.com/drive/folders/1OH-Kgeq-vtQ8hN0coWZp3YUxAbuVdNZ9?usp=sharing

Me encantó esta clase de Imágenes y alias en Webpack, importante y clara de entender.

Si quieren que los aliases tambien funcionen en VSCode deben usar un archivo jsconfig.json.

https://code.visualstudio.com/docs/languages/jsconfig#_using-webpack-aliases
Este es el mio:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@assets/*": ["./src/assets/*"],
      "@components/*": ["./src/components/*"],
      "@pages/*": ["./src/pages/*"],
      "@styles/*": ["./src/styles/*"]
    }
  }
}

Según la documentación de webpack la forma de carga archivos es con un loader; parece ser que de esa manera carga siempre

https://v4.webpack.js.org/loaders/file-loader/

Excelente explicación profe de utilización de components, atomic design y rutas en React, muy completa la explicación.

Desventaja de usar los decoradores es que al usar el shotcurt alt+click en la ruta del import del archivo no te linkea instantaneamente al archivo

Me ha gustado bastante esta estructura de archivos que el profesor propone. Asi es mas facil ubicar los archivos.
Me parece que hay mas orden, en cursos anteriores siempre teniamos todo como revuelto.