Manejo de assets en Webpack

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.