Why is it important to use a file loader while I can use the absolute path for my file? say image for example...
In this case, I want to use an image called 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)
This code wouldn't work without a file loader but if I use the path of the image, that would work...
addImage("./dist/kemo.jpg")
So, I ask here why the file loader is important if I can dispense of it?
Well, file-loader is important because;
import on a file into a url and emits the file into the output directory.Getting Started
Begin by installing file-loader:
$ npm install file-loader --save-dev
then for you to import myImage from '../assets/img.jpg';
You will have to add the loader to your webpack config. For example:
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.(png|jpe?g|gif)$/i,
use: [
{
loader: 'file-loader',
},
],
},
],
},
};
And when you run webpack via your preferred method. This will emit img.jpg as a file in the output directory (with the specified naming convention, if options are specified to do so) and returns the public URI of the file.
ℹ️ By default the filename of the resulting file is the hash of the file's contents with the original extension of the required resource.