No tienes acceso a esta clase

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

Aprende Ingl茅s, Programaci贸n, AI, Ciberseguridad y m谩s a precio especial.

Antes: $249

Currency
$209
Suscr铆bete

Termina en:

2 D铆as
5 Hrs
47 Min
37 Seg
Curso de Webpack

Curso de Webpack

Oscar Barajas Tavares

Oscar Barajas Tavares

Loaders de im谩genes

10/28
Recursos

Aportes 33

Preguntas 17

Ordenar por:

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

馃幋 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

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: 鈥渁sset/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鈥

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

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.

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.

jajaja me la pase casi una hora investigando porque me sal铆a error y lo que pasa es que hab铆a puesto: `type: 'assets/resource'` y es : `type: 'asset/resource'` Sin las s

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>

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: 鈥榓sset/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鈥檚 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.