Loaders de imágenes

🎴 Loaders de imágenes

• 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 debemos agregar la siguiente configuración

module.exports = {
	...
  module: {
    rules: [
      {
        test: /\.png/,
        type: "asset/resource"
      }
    ]
  },
}

• Para empezar a usar esta configuración debemos importar la imagen de la siguiente forma

import github from '../assets/images/github.png';

• Para incluirlo en el HTML debes hacer lo siguiente

// Ejemplo en Vanilla JS
const imagen = `<img src=`${github}` />`;

// Ejemplo en React
<img src={`${github}`} />

Implementando la siguiente configuración adicional podemos gestionar el directorio de salida:

      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource',
        generator: {
          filename: 'static/images/[hash][ext][query]',
        },
      },

Si usamos este loader ya no es necesario usar el plugin de copy-webpack-plugin si queremos implemetar imagenes en webpack

Si quieren que las imagenes generadas se guarden en la carpeta images/ pueden agregar la opcion assetModuleFilename dentro de output.

module.exports = {
	...
  output: {
    ...
    assetModuleFilename: "images/[hash][ext]",
  },
  module: {
    rules: [
      {
        test: /\.png/,
        type: "asset/resource"
      }
    ]
  },
}

Quedaria asi:

Loader de imágenes
Este loader nos permite importar de forma dinámica en nuestros archivos JavaScript imágenes, el loader le genera un hash unico para cada imagen. Algo parecido sucede con ReactJS al importar imágenes
Configuración

Al final de las rules

 {
                test: /\.png/,
                type: 'asset/resource'
 }

Por si depronto les sale error no es assets/resource sino asset 😄

  {
        test: /\.png/,
        type: 'asset/resource',
  },

¿Que ventaja, utilidad o uso tiene ponerle hash a las imágenes?

• Evita que dos imágenes con el mismo nombre y extensión colisionen y se sobre escriban.
• Rompes el caché del navegador. Eso significa que si modificas algún icono en la carpeta assets y le dejas mismo nombre que tenia, cuando sea publicado obligas al navegador a mostrar la última versión que subiste, por que el nombre de la imagen en la carpeta dist va a ser totalmente diferente,

Mas info. al respecto: https://www.alainschlesser.com/bust-cache-content-hash/

Una advertencia a todos los que siguen apuntes de los comentarios: no siempre están bien. Úsenlos de guía (pueden incluso copiarlos en un documento de Google Drive o en su Notion), pero luego investiguen la documentación, comparen con otros comentarios, lo que dice el profesor/a, otros cursos sobre el mismo tema… Esto les ayudará a mejorar los apuntes de cada clase. Saber programar lleva su tiempo (al menos a mi me lo está llevando) y es importante saber el porqué de cada cosa o, al menos, intuir porqué se está haciendo determinada cosa. Asentar conocimiento, tener tus propios apuntes, sacar tus propias conclusiones, te hará mejor en cualquier trabajo. Ánimos.

Pasé toda la tarde de este lindo sábado tratando de encontrar la manera de usar una imagen en un archivo css, como background-image: url(./tuimagen.png)

Para ello se debe poner esta regla:
{
test: /.(png|svg|jpg|jpeg|gif)$/i,
type: “asset/resource”,
},

Al momento de correr npm run build se va a generar una imagen en nuestra carpeta raiz (dist) con un nombre raro alfa-numerico.

En nuestro archivo main.css va a parecer el enlace a esa imagen considerando el nuevo nombre raro alfa-numérico.

Para mayor información revisen la lectura recomendada.
“3 horas de debugging te ahorran 30 minutos de leer la documentación”

Tus posibles dudas resueltas:

1. ¿Por qué en esta ocasión no usamos un testy un use como antes?

Esta es otra forma de copiar las imágenes. Esto se hace mediante el asset management que tiene webpack. Se nos indica que la sintaxis es la siguiente:

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

test: recibe los formatos de imágenes a procesar
type: Puede tener distintos valores y se refiere al tipo de loader que reemplaza en webpack. Por ejemplo asset-resource indica que se va a reemplazar el loader que se usaba antes: file-loader. Y la función es exportar la url completa o ruta completa hacia la imagen. Esto es posible porque al importarlas, las volvemos dependencias y con ello se pueden agregar al gráfico de dependencias.
.
Para saber qué otros typepuedes introducir, puedes leer el siguiente artículo: https://webpack.js.org/guides/asset-modules/
.

2. Por qué cambió el nombre de las imágenes de salida?

Por defecto, el typeque utilizamos (asset/resource) exporta las imágenes con el nombre: [hash][ext][query].
hash: Número aleatorio.
ext: extensión
query: utilizado para dar parámetros adicionales.
¿Se puede cambiar esto? Sí, así es. Puedes hacerlo en la parte de module.exports.output, agregando/modificando assetModuleFilename:

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
   assetModuleFilename: 'images/[hash][ext][query]'
  },
  module: {
    rules: [
      {
        test: /\.png/,
        type: 'asset/resource'
      }
    ]
  },
};

.
Puedes ver más sobre esto en este artículo.

Loading images
Esta es una característica incorporada de Webpack 5 del módulo asset

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

Por si estás un poco perdido con el tema de los hash te dejo este enlace =)

¿Qué es un hash y cómo funciona?

Tomensen su tiempo en leer y aprender cada cosa. El curso lo veo por tercera vez, porque antes hacia un copy past y ahora (recien ahora) trato de entender el que de para que de cada cosa. Si van a modo copy past como si fuera una carrera en terminar rapido el curso, cuando esten mas adelante, y vean conceptos mas complejos de React, no van a entender nada. No van a recordar nada.
Si quieren terminar rapido los cursos, constancia, y mucha disciplina. Cada hora de oscio que dedican al dia es una hora menos de aprender. Aunque tambien es importante descansar.
Acuerdensen. Esto no es una carrera. Los quiero,
FORZA STUDENTI

Un compañero en clases anteriores contestaba dudas que quiza algunos teniamos, no lo veo hace algunas clases asique lo hare de tanto en tanto:

<h2>Consultas que quizas tengas<h2>
¿Por qué importamos las imágenes a Templates?
Un template es una plantilla o dispositivo de interfaz, suele proporcionar una separación entre la forma o estructura y el contenido. Permite crear un diseño pre-definido, y este diseño predefinido contendrá nuestras imágenes principales.

¿Que ventaja, utilidad o uso tiene ponerles hash a las imágenes?

• Evita que dos imágenes con el mismo nombre y extensión se sobreescriban.
• Rompes el caché del navegador. Eso significa que si modificas algún icono en la carpeta assets y le dejas mismo nombre que tenia, cuando sea publicado obligas al navegador a mostrar la última versión que subiste, por que el nombre de la imagen en la carpeta dist va a ser totalmente diferente, (aporte de otro compañero)
• Facilita la escritura de código, en caso de que tengamos que trabajar con la imagen mas de una vez en el mismo código

¿Cuál es la diferencia con los aliases?
El alias es solo una manera mas corta de mandar a llamar nuestra imagen de la raíz de assets (o del alias que deseamos crear, sea extensión, modulo, u otros); En principio no cuenta (o no encontré) muchas diferencias con los aliases, pero por buenas practicas y algunas virtudes (mencionadas) es recomendable usarlo. (acepto comentarios correctivos)

MY NOTES LOADERS OF IMAGES

Vamos a ver una forma diferente de trabajar con imágenes haciendo un import de las mismas y llamándolas como una variable y así generándolas dentro de nuestro proyecto

• Vamos a agregar la herramienta que ya nos brinda webpack para poder utilizar las imagenes

//anadimos un nuevo objeto en nuestras reglas
        //que nos servira para el manejo de imagenes
      {
        //expresion regular con imagenes .png
        test:  /\.png/,
        //tipo de archivo
        type: 'asset/resource'

      }

• Luego vamos al archivo donde generamos el template y pondremos las url de las imagenes en constantes para hacer uso de ellas dentro del template en el src de nuestras imagenes

//importamos la configuracion de las imagenes

import github from '../assets/images/github.png';
import twitter from '../assets/images/twitter.png';
import instagram from '../assets/images/instagram.png';

Cuando compilemos webpack veremos como en dist ya contamos con nuestras imagenes

      {
        test: /\.png/,
        type: "asset/resource"
      }```

Al hacer esta accion.¿En que le afecta al proyecto en si? Sea bueno o malo.

Vamos a utilizar una forma nueva para trabajar con las imagenes haciendo un import de las mismas y llamandolas como una variable y asi generando una imagen en nuestro proyecto.

En webpack agregaremos la configuracion necesaria con AssetModule.

Necesitamos agregar una nueva regla que es:

{
	test: /\.png/,
	type: 'asset/resource'   
}

Ahora en nuestro archivo template.js tenemos que importar las imagenes como variables

import github from '../assets/images/github.png';

Al compilarlo podremos ver que las imagenes ya estan movidas con un hash y podremso ver que tenemos el recurso y la imagen se vuelve optimizada.

Antes nuestro archivo de Template.js cargaba nuestras imágenes de manera estática.
Ahora podemos hacer un import para traerlas como los assets que son.

import github from '../assets/images/github.png'
import twitter from '../assets/images/twitter.png'
import instagram from '../assets/images/instagram.png'

          <a href="https://twitter.com/gndx">
            <img src="${twitter}" />
          </a>
          <a href="https://github.com/gndx">
            <img src="${github}" />
          </a>
          <a href="https://instagram.com/gndx">
            <img src="${instagram}" />
          </a>

Soy muy bueno en esto de optimizar código, pero me suena suave.

¿¿Porque usar este loader???
Se hace uso de este loader, ya que webpack solo reconoce .js y .json y para el caso en que se le muestra un .png u otra extensión no lo entiende. Este loader ahora es nativo de webpack, porque en versiones anteriores debía ser instalado se llama file-loader.

Forma de importar

Regla para pngs

Algo que no se dijo, es que este loader carga nuestras imágenes por que las estamos importando en js como variables, sí se incluyeran dentro del html de la forma habitual, este loader no cargaría nuestras imágenes en el bundle y sí seria necesario usar el plugin de Copy, algo ha tener en cuenta.

Loaders de imágenes
Utilizamos los loaders de imágenes para optimizar el rendimiento de renderizado y la calidad del código. Además de que es una buena práctica.
Agregamos en el rules

 {
            test: /\.png/,
            type: 'asset/resource'
  } 

Cambiamos en Template e importamos las imágenes

Les dejó el archivo de webpack para que lo puedan comparar

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CopyPlugin = require('copy-webpack-plugin');
module.exports = {
	entry:  './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'main.js'
    },
    resolve: {
        extensions: ['.js']
    },
    module: {
        rules: [
        {
            test: /\.m?js$/,
            exclude: /node_modules/,
            use: {
                loader: 'babel-loader'
            }
        },
        {
            test: /\.css|.scss|.styl$/i,
            use: [
                MiniCssExtractPlugin.loader,
                'css-loader',
                'stylus-loader',
            ]
        },
        {
            test: /\.png/,
            type: 'asset/resource'
        }

    ]},
    plugins: [
        new HtmlWebpackPlugin({
            inject: true,
            template: './public/index.html',
            filename: './index.html'
        }),
        new MiniCssExtractPlugin(),
        new CopyPlugin({
            patterns: [
                {
                    from: path.resolve(__dirname, "src", "assets/images"),
                    to: "assets/images"
                }
            ]
        })
    ]

}

ERROR in ./src/templates/Template.js 4:0-51 Module not found: Error: No parser registered for assets/resource @ ./src/index.js 3:0-47 15:19-27

el siguiente error lo pude resolver cambiando las siguientes lineas de codigo
{
test: /.(png|svg|jpg|jpeg|gif)$/i,
type: ‘asset/resource’,
}

Loaders para images

webpack.config.js

const path = require('path');
const html = require('html-webpack-plugin');
const miniCssExtractPlugin = require('mini-css-extract-plugin');
// const copyPlugin = require('copy-webpack-plugin');

module.exports = {
  // Entry nos permite decir el punto de entrada de nuestra aplicación
  entry: './src/index.js',
  // Output nos permite decir hacia dónde va enviar lo que va a preparar webpacks
  output: {
    // path es donde estará la carpeta donde se guardará los archivos
    // Con path.resolve podemos decir dónde va estar la carpeta y la ubicación del mismo
    path: path.resolve(__dirname, 'dist'),
    // filename es el nombre del archivo que se va a crear
    filename: 'main.js'
  },
  resolve: {
    // extensions nos permite decir que extensiones de archivos queremos que webpack pueda reconocer
    extensions: ['.js', '.jsx']
  },
  module: {
    rules: [
      {
        // Test declara que extensión de archivos aplicara el loader
        test: /\.m?.js$/,
        // Exclude permite omitir archivos o carpetas especificas
        exclude: /node_modules/,
        // Use es un arreglo u objeto donde dices que loader aplicaras
        use: {
          loader: "babel-loader"
        },
      },
      {
        test: /\.css|\.styl$/i,
        use: [miniCssExtractPlugin.loader,
          "css-loader",
          "stylus-loader"] // for sass "sass-loader"
      },
      {
        test: /\.png/,
        type: 'asset/resource'
      }
    ]
  },
  // SECCION DE PLUGINS

  plugins: [
    new html({
      // CONFIGURACIÓN DEL PLUGIN
      // INYECTA EL BUNDLE AL TEMPLATE HTML
      inject: true,
      // LA RUTA AL TEMPLATE HTML
      template: './public/index.html',
      // NOMBRE FINAL DEL ARCHIVO
      filename: './index.html'
    }),
    new miniCssExtractPlugin(),
    // new copyPlugin({
    //   patterns: [
    //     {
    //       from: path.resolve(__dirname, 'src', 'assets/images'),
    //       to: './assets/images'
    //     }
    //   ]
    // })
  ]
};

template.js

import getData from '../utils/getData.js';
import github from '../assets/images/github.png';
import twitter from '../assets/images/twitter.png';
import instagram from '../assets/images/instagram.png';

use the images with string interpolation
eg.

            <img src="${instagram}" />

Loaders de imágenes

This is going to allow us import our project’s images and then call it like a variable and create the image in our project.

Add asset-module to webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CopyPlugin = require('copy-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js',
  },
  resolve: {
    extensions: ['.js'],
  },
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
      {
        test: /\.css|.styl$/i,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'stylus-loader'],
      },
      {
        test: /\.png/,
        type: 'asset/resource'
      }
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      inject: true,
      template: './public/index.html',
      filename: './index.html',
    }),
    new MiniCssExtractPlugin(),
    new CopyPlugin({
      patterns: [
        {
          from: path.resolve(__dirname, "src", "assets/images"),
          to: "assets/images"
        }
      ]
    })
  ],
};

1. Allows .png files, this is worth to do emphasis in the sources we use.
2. Allows import the resources on template.

Import the resources into Template.js

10.-Loaders de imágenes

Para trabajar directamente con las imágenes haciendo un import de las mismas y llamándolas como variable, de esta manera generando la imagen en el proyecto.

Primero que nada añadiremos la configuración necesaria para poder trabajar con imágenes y hacer un import.

• Vamos a usar asset module que nos brinda webpack y así no requeriremos de un loader, sino que directamente webpack nos provee estos recursos.
• Una vez hecha la configuración vamos a src/templates/template.js y vemos como tenemos las imágenes con la modificación del copiado de archivos. Ahora vamos a importar los archivos con:

import github from "../assests/images/github.png"
//Y así con los demás   

• Añadimos la variable con:

<img src="${github}">
Y asi con los demás

• Lo probamos con el npm run dev. Podemos ver como se generaron elementos con hash en las imágenes.

Por si alguien se lo pregunta o le interesa: para cambiar el destino de las imaǵenes dentro de dist podemos usar el atributo assetModuleFilename dentro del objeto output, de la siguiente manera:

module.exports = {
  ...,
  output: {
    ...,
    assetModuleFilename: 'assets/images/[hash][ext][query]'
  }
}

Pueden encontrar más información en la documentación.

Ahora utilizaremos una forma de trabajar con imágenes haciendo un import de las mismas y llamándolas como una variable y así generar la imagen en el proyecto.

Para esto, como siempre, hay que añadir la configuración necesaria usando el asset module que provee Webpack, por lo que no es necesario descargar ningún loader.

Ahora con esto ya podemos importar las imágenes directamente en el template y usarlas como variable para insertarlas en el código.