¿Por qué es importante usar un cargador de archivos mientras puedo usar la ruta absoluta para mi archivo? decir imagen por ejemplo...
En este caso, quiero usar una imagen llamada img.jpg :
import myImage from "../assets/img.jpg" function addImage(src) { const image = document.createElement("img"); image.alt = "our image"; image.src = src; const body = document.querySelector("body") body.appendChild(image) } addImage(myImage)Este código no funcionaría sin un cargador de archivos, pero si uso la ruta de la imagen, funcionaría...
addImage("./dist/kemo.jpg")Entonces, pregunto aquí por qué el cargador de archivos es importante si puedo prescindir de él.
Bueno, el cargador de archivos es importante porque;
import de un archivo en una url y emite el archivo en el directorio de salida.Empezando
Comience instalando el cargador de archivos:
$ npm install file-loader --save-dev
luego, para que importe myImage desde '../assets/img.jpg';
Deberá agregar el cargador a la configuración de su paquete web. Por ejemplo:
webpack.config.js
module.exports = { module: { rules: [ { test: /\.(png|jpe?g|gif)$/i, use: [ { loader: 'file-loader', }, ], }, ], }, };Y cuando ejecuta webpack a través de su método preferido. Esto emitirá img.jpg como un archivo en el directorio de salida (con la convención de nomenclatura especificada, si se especifican opciones para hacerlo) y devuelve el URI público del archivo.
ℹ️ De forma predeterminada, el nombre de archivo del archivo resultante es el hash del contenido del archivo con la extensión original del recurso requerido.