file-loader

What is file-loader?

The file-loader npm package is used to process files such as images, fonts, and other binary assets within a webpack build process. It can copy files to the output directory and resolve import/require() on a file into a url.

What are file-loader's main functionalities?

Importing Images

Allows importing image files directly in JavaScript or TypeScript files. The file-loader processes the import and replaces it with the final path to the output file.

import img from './file.png';

Configuring Output Path and Filenames

Configures webpack to output files with a specific naming pattern and to a specific directory. It also allows setting a public path for the files when they are referenced in the browser.

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[path][name].[ext]',
              outputPath: 'images/',
              publicPath: 'assets/',
            },
          },
        ],
      },
    ],
  },
};

Handling Fonts

Enables the inclusion and processing of font files in various formats. The file-loader will handle these assets and output them to a specified directory.

module.exports = {
  module: {
    rules: [
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: 'fonts/',
            },
          },
        ],
      },
    ],
  },
};

Other packages similar to file-loader

url-loader

The url-loader works like the file-loader, but can return a Data URL if the file is smaller than a byte limit. This can reduce the number of HTTP requests for small files.

raw-loader

The raw-loader allows importing files as a string. This is useful for importing things like HTML or SVG directly into your JavaScript code, which is different from file-loader's typical binary asset handling.

copy-webpack-plugin

This plugin allows copying individual files or entire directories to the build directory. It is more flexible than file-loader for simply copying files without processing them through webpack's module system.

README

file loader for webpack

Usage

var url = require("file!./file.png");
// => emits file.png as file in the output directory and returns the public url

The filename is the md5 hash of the file. The extension of the required resource is appended.

If you want to have custom pre- and postfix of your file:

require("file?prefix=js/&postfix=.script.js!./javascript.js");
// => js/0dcbbaa701328a3c262cfd45869e351f.script.js

require("file?prefix=html-&size=6!./page.html");
// => html-109fa8.html

require("file?postfix!./flash.txt");
// => c31e9820c001c9c4a86bce33ce43b679

require("file?hash=sha512!./image.png");
// => a720b9f140d13...781f1f78344.png
// use sha512 hash instead of md5

require("file?name=picture.png!./myself.png");
// => picture.png

License

MIT (http://www.opensource.org/licenses/mit-license.php)