Skip to content

Loads files as `base64` encoded URL, url-loader enhanced.

Notifications You must be signed in to change notification settings

react-doc/url-replace-loader

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

URL Replace Loader

Loads files as `base64` encoded URL, url-loader enhanced.

Install

npm install --save-dev url-replace-loader

The url-loader works like the file-loader, but can return a DataURL if the file is smaller than a byte limit.

import img from './image.png'

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(svg|png|bmp|jpg|jpeg|gif)$/,
        loader: require.resolve('url-loader'),
        options: {
          limit: 8192,
          name: 'img/[name].[hash:8].[ext]',
          replace: [
            {
              test: /rdoc\.logo\.svg$/,
              path: 'path/to/logo.svg',
            }
          ]
        },
      },
    ]
  }
}

Options

Name Type Default Description
limit {Number} undefined Byte limit to inline files as Data URL
mimetype {String} extname Specify MIME type for the file (Otherwise it's inferred from the file extension)
fallback {String} file-loader Specify loader for the file when file is greater than the limit (in bytes)

limit

If the file is greater than the limit (in bytes) the file-loader is used by default and all query parameters are passed to it. You can use other loader using fallback option.

The limit can be specified via loader options and defaults to no limit.

webpack.config.js

{
  loader: 'url-loader',
  options: {
    limit: 8192
  }
}

mimetype

Set the MIME type for the file. If unspecified the file extensions will be used to lookup the MIME type.

webpack.config.js

{
  loader: 'url-loader',
  options: {
    mimetype: 'image/png'
  }
}

fallback

webpack.config.js

{
  loader: 'url-loader',
  options: {
    fallback: 'responsive-loader'
  }
}

replace

Replace with the specified picture.

webpack.config.js

{
  loader: 'url-loader',
  options: {
    replace: [
      {
        test: /rdoc\.logo\.svg$/,
        path: 'path/to/logo.svg',
      }
    ]
  }
}

About

Loads files as `base64` encoded URL, url-loader enhanced.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published