npm i -D @webpack-loader/url

By default the filename of the resulting file is the MD4 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: '@webpack-loader/url',
            options: {}  
          }
        ]
      }
    ]
  }
}

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

"/public/path/0dcbbaa7.png"

|Name|Type|Default|Description| |:--:|:--:|:-----:|:----------| |name|{String\|Function}|[hash].[ext]|Configure a custom filename template for your file| |regExp|{RegExp}|undefined|Extract some parts of the file path to reuse them in the name property| |limit|{String\|Number}|undefined|Byte limit to inline files as Data URL| |context|{String}|this.rootContext|Configure a custom file context, defaults to webpack.config.js context| |publicPath|{String\|Function}|__webpack_public_path__ |Configure a custom public path for your file| |outputPath|{String\|Function}|undefined|Configure a custom output path for your file|

name

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: '@webpack-loader/url',
  options: {
    name: '[path][name].[ext]'
  }  
}

{Function}

webpack.config.js

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

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

regExp

Defines a regExp to match some parts of the file path. These capture groups can be reused in the name property using [N] placeholder. Note that [0] will be replaced by the entire tested string, whereas [1] will contain the first capturing parenthesis of your regex and so on...

import img from './customer01/file.png'

webpack.config.js

{
  loader: '@webpack-loaders/url',
  options: {
    regExp: /\/([a-z0-9]+)\/[a-z0-9]+\.png$/,
    name: '[1]-[name].[ext]'
  }  
}

customer01-file.png

placeholders

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

hashes

[<type>:hash:<digest>:<length>] optionally you can configure

|Name|Type|Default|Description| |:--:|:--:|:-----:|:----------| |type|{String}|md4|md4, md5, sha1, sha256, sha512| |digest|{String}|hex|hex, base64| |length|{Number}|8|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

limit

If the file size is greater than the specified limit (in bytes) the file is added as an asset to the module (module.assets) and emitted as a separate file (compilation.assets). The limit can be specified via loader options and defaults to no limit. If the file size is smaller then the limit the file contents are exported as a base64 encoded Data URL (e.g "export default "data:image/png;base64,iVBORw0KGgoAAAA...")

webpack.config.js

{
  loader: '@webpack-loader/url',
  options: {
    limit: 10000
  }  
}

context

webpack.config.js

{
  loader: '@webpack-loader/url',
  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: '@webpack-loader/url',
  options: {
    name: '[path][name].[ext]',
    publicPath: 'assets/'
  }  
}

outputPath

webpack.config.js

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

import png from 'image.png'

webpack.config.js

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

dirname/0dcbbaa7.png

webpack.config.js

{
  loader: '@webpack-loader/url',
  options: {
    name: '[sha512:hash:base64:7].[ext]'
  }  
}

gdyb21L.png

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

webpack.config.js

{
  loader: '@webpack-loader/url',
  options: {
    name: '[path][name].[ext]?[hash]'
  }  
}

path/to/file.png?e43b20c0