Manejo de assets en Webpack

Curso de Webpack con Express.js, React.js y TypeScript

Introducción

Migración de Webpack 4 a 5: Optimización y Despliegue Completo

Optimización de Proyectos React con Webpack 5 y TypeScript

Webpack en el Backend

Configuración de Webpack con Express y Babel paso a paso

Configuración de Webpack para proyectos Node.js con Express

Migración de Proyectos Express a TypeScript paso a paso

API RESTful con Express y TypeScript: Configuración Inicial JSON

Webpack en el Frontend

Actualización y Optimización de Proyectos con Webpack 5

Configuración de Webpack para Desarrollo y Producción

Implementación de Hooks en React para Consumo de APIs

Uso de Context en React para Gestión de Estado Global

Alias y Rutas Limpias en Webpack: Mejora tus Importaciones

Optimización de Imágenes y Uso de CDN en Webpack

Optimización de Imágenes PNG con Webpack Plugin

Configuración de TypeScript en proyectos React con Webpack

"Configuración de Hot Reload en Proyectos React con Webpack"

Lazy Loading y Dynamic Import en React

Aplicaciones React y Webpack: Integración de Micro Frontends

Configuración de Webpack para Separar Código en Modo Producción

Despliegue

Optimización de Proyectos React para Despliegue en Netlify

Despliegue de API Node.js con Heroku y TypeScript

Conectar un Dominio Personalizado a Netlify y Cloudflare

Migración de Proyectos Wetpack a Producción

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Si ya tienes una cuenta,

Recursos

¿Cómo optimizar imágenes en tu proyecto utilizando Webpack?

Optimizar los recursos de un proyecto es crucial para mejorar su rendimiento, y las imágenes son un componente importante. Al aprender a incorporarlas de manera eficiente, podemos reducir tiempos de carga y mejorar la experiencia del usuario. A continuación, exploraremos cómo añadir y optimizar imágenes con Webpack y la importancia de los CDNs en este proceso.

¿Cómo agregar imágenes al proyecto?

Para comenzar, necesitamos incorporar la imagen en nuestro proyecto. Tradicionalmente, las imágenes pueden provenir de una API, pero para optimizarlas desde el inicio, es ideal tenerlas localmente.

Crear una carpeta "assets": En la raíz de tu proyecto, crea una carpeta llamada assets para almacenar las imágenes.
Descargar la imagen: Utiliza el enlace proporcionado por tu instructor para obtener la imagen de ejemplo que será optimizada.
Ubicarla en la carpeta "assets": Colócala dentro de la carpeta que creaste.

¿Cómo integrar la imagen en un componente con Webpack?

Una vez descargada e incorporada la imagen en la carpeta adecuada, es momento de integrarla en tu componente de la aplicación.

Agregar un alias en configuración de Webpack: Define un alias en el archivo de configuración de desarrollo de Webpack para facilitar el acceso a los recursos:
```
alias: {
  '@assets': path.resolve(__dirname, 'src/assets')
}
```
Importar la imagen en el componente: Abre el archivo del componente donde la imagen será utilizada e impórtala usando el alias:
```
import logo from '@assets/logo-gndx.png';
```
Insertar la imagen en el componente: Utiliza la etiqueta img para insertar la imagen dentro del JSX o HTML del componente, asegurándote de incluir atributos como alt y width:
```
<img src={logo} alt="Logo" width="32" />
```

¿Cómo optimizar imágenes con Webpack?

La optimización de imágenes es un proceso que reduce el tamaño del archivo sin sacrificar su calidad. Esto puede lograrse integrando configuraciones específicas en Webpack.

Configurar reglas de Webpack para imágenes: Añade reglas específicas para procesar imágenes en tu archivo de configuración:

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|jpeg|gif)$/i,
        type: 'asset/resource'
      }
    ]
  }
}

Compilar el proyecto para aplicar cambios: Utiliza la terminal para compilar el proyecto y verificar que los cambios se reflejan correctamente:
```
npm run start
```

Al seguir estos pasos, tu proyecto puede manejar imágenes de manera más eficiente, mejorando así los tiempos de carga y la experiencia del usuario final. La optimización adecuada de recursos es clave en el desarrollo moderno de aplicaciones web, ¡y ahora tienes las herramientas para implementarla!

Recuerda siempre verificar las mejoras tras optimizar, y te animo a continuar experimentando e integrando nuevas tecnologías para enriquecer tus habilidades como desarrollador.

Aportes 1

Preguntas 0

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Paolo Joaquin Pinto Perez

hace 4 años

Manejo de assets en Webpack(Imágenes y CDN)

Puedes usar una forma de importar las imágenes haciendo un import de las mismas y generando una variable.
No es necesario instalar ninguna dependencia, webpack ya lo tiene incluido.

Creamos la carpeta assets dentro de src y dentro de assets descargamos la siguiente imagen:
imagen: https://i.ibb.co/fr7JzwW/logo-gndx.png
Agregamos un nuevo alias en webpack.config.dev.js, porque primero debemos probarla en dev(desarrollo) antes de llevarlo a producción:

      '@assets': path.resolve(__dirname, 'src/assets'),

y añadimos en rules una nueva regla para los assets(es importante que en type se escriba asset y no assets):

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

En src > components > Header.jsx:

importamos el logo

import logo from '@assets/logo-gndx.png';

Agregamos el logo en nuestro h1:

    <h1 className="Header-title">
      <Link to="/">
        <img src={logo} alt="logo" width="32" />
        Platzi Store
      </Link>
    </h1>

Por último copiamos el alias y la nueva regla de webpack.config.dev.js en webpack.config.js.
npm run build => para probar.