file loader module for webpack


1,84212.0.04 years ago4 years agoMinified + gzip package size for @nadiia/file-loader in KB


npm deps tests coverage chat

File Loader

Instructs webpack to emit the required object as file and to return its public url.


npm install --save-dev file-loader


By default the filename of the resulting file is the MD5 hash of the file's contents with the original extension of the required resource.

var url = require("file-loader!./file.png");
// => emits file.png as file in the output directory and returns the public url
// => returns i. e. "/public-path/0dcbbaa701328a3c262cfd45869e351f.png"

By default a file is emitted, however this can be disabled if required (e.g. for server side packages).

var url = require("file-loader?emitFile=false!./file.png");
// => returns the public url but does NOT emit a file
// => returns i. e. "/public-path/0dcbbaa701328a3c262cfd45869e351f.png"

Filename templates

You can configure a custom filename template for your file using the query parameter name. For instance, to copy a file from your context directory into the output directory retaining the full directory structure, you might use ?name=[path][name].[ext].

By default, the path and name you specify will output the file in that same directory and will also use that same URL path to access the file.

You can specify custom output and public paths by using the outputPath, publicPath and useRelativePath query name parameters:

use: "file-loader?name=[name].[ext]&publicPath=assets/foo/&outputPath=app/images/"

useRelativePath should be true if you wish to generate relative URL to the each file context

 loader: 'file-loader',
 query: {
  useRelativePath: process.env.NODE_ENV === "production"

Filename template placeholders

  • [ext] the extension of the resource
  • [name] the basename of the resource
  • [path] the path of the resource relative to the context query parameter or option.
  • [hash] the hash of the content, hex-encoded md5 by default
  • [<hashType>:hash:<digestType>:<length>] optionally you can configure
    • other hashTypes, i. e. sha1, md5, sha256, sha512
    • other digestTypes, i. e. hex, base26, base32, base36, base49, base52, base58, base62, base64
    • and length the length in chars
  • [N] the N-th match obtained from matching the current file name against the query param regExp


// => js/0dcbbaa701328a3c262cfd45869e351f.script.js

// => html-109fa8.html

// => c31e9820c001c9c4a86bce33ce43b679

// => gdyb21L.png
// use sha512 hash instead of md5 and with only 7 chars of base64

// => img-VqzT5ZC.jpg
// use custom name, sha512 hash instead of md5 and with only 7 chars of base64

// => picture.png

// => dir/file.png?e43b20c069c4a01867c31e98cbce33c9


Don't hesitate to create a pull request. Every contribution is appreciated. In development you can start the tests by calling npm test.


Juho Vepsäläinen

Joshua Wiens

Artem Sapegin

Michael Ciniawsky

Alexander Krasnoyarov



If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.