@webpack-loader/url v1.0.0-alpha.0

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

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

hashes

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

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