Why file loader is important?

Question

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?

Answer 1

Well, file-loader is important because;

• It resolves import on a file into a url and emits the file into the output directory.
• Additionally, anything loaded with file-loader gets included in the assets JSON output of webpack, so you can see all the assets in one place

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.