No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Curso Pr谩ctico de Webpack

Curso Pr谩ctico de Webpack

Oscar Barajas Tavares

Oscar Barajas Tavares

Manejo de assets en Webpack

12/22
Recursos

Aportes 1

Preguntas 0

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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.