@webpack-loader/url
URL/File Loader
Last updated 4 years ago by michael-ciniawsky .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @webpack-loader/url 
SYNC missed versions from official npm registry.

npm node deps tests coverage code style chat

URL/File Loader

Emits/Inlines the imported file and to return its (public) URL

Install

npm i -D @webpack-loader/url

Usage

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"

Options

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/'
  }  
}

Examples

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

Current Tags

  • 1.0.0-alpha.0                                ...           latest (4 years ago)

1 Versions

  • 1.0.0-alpha.0                                ...           4 years ago
Maintainers (1)
Downloads
Total 70
Today 0
This Week 0
This Month 3
Last Day 0
Last Week 3
Last Month 0
Dependencies (3)
Dev Dependencies (8)
Dependents (0)
None

Copyright 2014 - 2021 © npmmirror.com |