file-loader

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

Install

npm install --save-dev file-loader

Usage

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.

import img from './file.png'

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {}  
          }
        ]
      }
    ]
  }
}

Emits file.png as file in the output directory and returns the public URL

"/public/path/0dcbbaa7013869e351f.png"

Options

Name
Type
Default
Description
Name
name
Type
{String|Function}
Default
[hash].[ext]
Description
Configure a custom filename template for your file
Name
context
Type
{String}
Default
this.options.context
Description
Configure a custom file context, defaults to webpack.config.js context
Name
publicPath
Type
{String|Function}
Default
__webpack_public_path__
Description
Configure a custom public path for your files
Name
outputPath
Type
{String|Function}
Default
'undefined'
Description
Configure a custom output path for your files
Name
useRelativePath
Type
{Boolean}
Default
false
Description
Should be true if you wish to generate a context relative URL for each file
Name
emitFile
Type
{Boolean}
Default
true
Description
By default a file is emitted, however this can be disabled if required (e.g. for server side packages)

##

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

{String}

webpack.config.js

{
  loader: 'file-loader',
  options: {
    name: '[path][name].[ext]'
  }  
}

{Function}

webpack.config.js

{
  loader: 'file-loader',
  options: {
    name (file) {
      if (env === 'development') {
        return '[path][name].[ext]'
      }

      return '[hash].[ext]'
    }
  }  
}

placeholders

Name
Type
Default
Description
Name
[ext]
Type
{String}
Default
file.extname
Description
The extension of the resource
Name
[name]
Type
{String}
Default
file.basename
Description
The basename of the resource
Name
[path]
Type
{String}
Default
file.dirname
Description
The path of the resource relative to the context
Name
[hash]
Type
{String}
Default
md5
Description
The hash of the content, hashes below for more info
Name
[N]
Type
{Number}
Default
``
Description
The n-th match obtained from matching the current file name against the query param regExp

hashes

[<hashType>:hash:<digestType>:<length>] optionally you can configure

Name
Type
Default
Description
Name
hashType
Type
{String}
Default
md5
Description
sha1, md5, sha256, sha512
Name
digestType
Type
{String}
Default
base64
Description
hex, base26, base32, base36, base49, base52, base58, base62, base64
Name
length
Type
{Number}
Default
9999
Description
The length in chars

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.

context

webpack.config.js

{
  loader: 'file-loader',
  options: {
    name: '[path][name].[ext]',
    context: ''
  }  
}

You can specify custom output and public paths by using outputPath, publicPath and useRelativePath

publicPath

webpack.config.js

{
  loader: 'file-loader',
  options: {
    name: '[path][name].[ext]',
    publicPath: 'assets/'
  }  
}

outputPath

webpack.config.js

{
  loader: 'file-loader',
  options: {
    name: '[path][name].[ext]',
    outputPath: 'images/'
  }  
}

useRelativePath

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

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

emitFile

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

import img from './file.png'

{
  loader: 'file-loader',
  options: {
    emitFile: false
  }  
}

⚠️ Returns the public URL but does not emit a file

`${publicPath}/0dcbbaa701328e351f.png`

Examples

import png from 'image.png'

webpack.config.js

{
  loader: 'file-loader',
  options: {
    name: 'dirname/[hash].[ext]'
  }  
}

dirname/0dcbbaa701328ae351f.png

webpack.config.js

{
  loader: 'file-loader',
  options: {
    name: '[sha512:hash:base64:7].[ext]'
  }  
}

gdyb21L.png

import png from 'path/to/file.png'

webpack.config.js

{
  loader: 'file-loader',
  options: {
    name: '[path][name].[ext]?[hash]'
  }  
}

path/to/file.png?e43b20c069c4a01867c31e98cbce33c9

Maintainers


      Juho Vepsäläinen



      Joshua Wiens



      Michael Ciniawsky



      Alexander Krasnoyarov