Imágenes y alias en Webpack

Clase 16 de 30 • Curso de React 17 con Webpack 5 y Sass

Edwin Jorge Arroyo

student•

Aquí dejo algunos alias :D

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

Santiago Lopera Naranjo

student•

Verficia el alias del styles, tienes un typo, estás llamando sass/ y no src/styles. Claro esta, que si así lo tienes en tu directorio ignora mi comentario. :D

Edwin Jorge Arroyo

student•

Hola Santiago, sí, así lo tengo en mi directorio jeje

Tulio Junior Rangel Nuñez

student•

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)$/

Magalí Acevedo

student•

Volvi a este curso para ver si decía algo de eso el profesor ya que no me tomaba esa extensión y me salvaste. GRACIAS POR EL APORTE!

Sergio Maury

student•

¡Qué profesor tan crack!

Andrea Paola Sierra Mendoza

student•

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.

Camilo Ovalle

student•

Muchas gracias por tu aporte, casi me vuelvo loco tratando de resolver la carga de imagenes <3

David Castro

student•

Buenazo el dato. Gracias por compartir Andrea!

Braulio Rivas Abad

student•

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

Luis Felipe Medina Rodriguez

student•

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

Usuario anónimo

user•

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"

Francisco Murillo

student•

en mi caso la tenia con import, pero cuando use el alias, dejo de funcionarme lo cambie a const y me funciono

José Josías Padilla Martínez

student•

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

David Hilera

student•

Cuando entendí el bug al que te referías regrese en clases para agradecer tan brillante solución, muchas gracias por el aporte.

Luis Mojica

student•

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.

Kevin Armando Luciano García

student•

Buenísima extensión, gracias por compartir Luis ✌🏻

Obed Paz

student•

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?

VOLODIA MESA ALVAREZ

student•

Hola. Tengo la misma duda. Si alguien sabe cómo, seria de gran ayuda.

César Palma

student•

https://stackoverflow.com/questions/63067555/how-to-make-an-import-shortcut-alias-in-create-react-app https://vueschool.io/articles/vuejs-tutorials/import-aliases-in-vite/

Santiago Alejandro Castro

student•

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

Rodrigo Andrés Moreno Pertúz

student•

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 :D

Julio Loarte Huerto

student•

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:

Schneider Adalith Correa Alvarado

student•

Excelente, muchas gracias!

David Condori Quispe

student•

Buenisimo

Oscar Stevens Cuartas Bejarano

student•

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

Juan Carlos Montilla Sánchez

student•

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

Julio Loarte Huerto

student•

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

César Palma

student•

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

Iván Rodríguez

student•

Totalmente hermano, desde que empezó el curso vite 100%, btw, como lograste lo de los alias? No estoy tan familiarizado con la configuracion de vite, gracias

Alarcon Ricardo Ezequiel

student•

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

type: asset

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

Carlos Abad Garcia Perez

student•

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

Seba Cardoso

student•

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,
  },
// ...

Rodrigo Ramos Xochiteotzin

student•

Buena forma! Gracias

Imágenes y alias en Webpack

Introducción a React

¿Qué es React.js?

Conceptos fundamentales de React

Configurando el entorno de desarrollo para React

Análisis de dependencias en proyectos de React

Instalación de React y React DOM

Configuración de Webpack y Babel

Cambios en tiempo real con Webpack

React con CSS y Sass

Maquetación en React

Transformando HTML y CSS en componentes de React

Estilos en los componentes de React

Páginas, rutas y componentes

React Router DOM

Navegación entre rutas

Header en todas las rutas

¿Qué es Atomic Design? Conoce los beneficios

Solución al reto: componentes y rutas de React Shop

Tipos de componentes en React: stateful vs. stateless

Imágenes y alias en Webpack

Lógica con React Hooks

React.useState

Toggle del menú

useEffect y consumo de APIs

Custom Hooks para la tienda

useRef y formularios

React Context

Completando el carrito de compras

Orden de compra

Calculando el precio total

Eliminando productos del carrito

Deploy

Cómo comprar tu dominio y conexión con Cloudflare

Automatizando el despliegue con GitHub Actions

Próximos pasos

Retos de React.js (bug hunters)

Continúa con el Curso Práctico de Next.js