Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Curso de Webpack

Curso de Webpack

Oscar Barajas Tavares

Oscar Barajas Tavares

Loaders de imágenes

10/28
Recursos

Aportes 24

Preguntas 13

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

🎴 Loaders de imágenes

<h4>Apuntes</h4>
  • 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

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

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:

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 depronto les sale error no es assets/resource sino asset 😄

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

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.

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?

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”

¿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/


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

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

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.

<h4>Loaders de imágenes</h4>

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>

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.

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

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.