url-replace-loader v1.0.0

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',
            }
          ]
        },
      },
    ]
  }
}

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',
      }
    ]
  }
}