node package manager


file loader module for webpack

file loader for webpack

Documentation: Using loaders

var url = require("file!./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 the filename of the resulting file is the MD5 hash of the file's contents with the original extension of the required resource.

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

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

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].

  • [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 

npm install file-loader --save-dev