All Projects → webpack-contrib → Url Loader

webpack-contrib / Url Loader

Licence: mit
A loader for webpack which transforms files into base64 URIs

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Url Loader

Ng Router Loader
Webpack loader for NgModule lazy loading using the angular router
Stars: ✭ 47 (-96.55%)
Mutual labels:  webpack-loader
Svg Fill Loader
DEPRECATED, use https://github.com/kisenka/svg-mixer/tree/master/packages/svg-transform-loader instead
Stars: ✭ 74 (-94.56%)
Mutual labels:  webpack-loader
Ignore Loader
Webpack loader to ignore certain package on build.
Stars: ✭ 85 (-93.75%)
Mutual labels:  webpack-loader
Laravel Localization Loader
Laravel Localization loader for webpack. Convert Laravel Translation strings to JavaScript Objects.
Stars: ✭ 58 (-95.74%)
Mutual labels:  webpack-loader
Svg Sprite Webpack Plugin
Webpack plugin for loading/extracting SVGs into a sprite file
Stars: ✭ 73 (-94.64%)
Mutual labels:  webpack-loader
Vue Md Loader
✨ Markdown files to ALIVE Vue components.
Stars: ✭ 78 (-94.27%)
Mutual labels:  webpack-loader
Svgr
Transform SVGs into React components 🦁
Stars: ✭ 8,263 (+507.13%)
Mutual labels:  webpack-loader
Webpack Conditional Loader
C conditionals directive for JavaScript
Stars: ✭ 93 (-93.17%)
Mutual labels:  webpack-loader
Graphql Persisted Document Loader
Webpack loader that adds a documentId to a compiled graphql document, which can be used when persisting/retrieving documents
Stars: ✭ 74 (-94.56%)
Mutual labels:  webpack-loader
Graphql Import Loader
Webpack loader for `graphql-import`
Stars: ✭ 84 (-93.83%)
Mutual labels:  webpack-loader
Isomorphine
Require server-side modules from the browser, remotely.
Stars: ✭ 66 (-95.15%)
Mutual labels:  webpack-loader
Jshint Loader
[DEPRECATED] jshint loader for webpack, please migrate on `eslint`
Stars: ✭ 69 (-94.93%)
Mutual labels:  webpack-loader
Sprite Loader
A image sprite loader for webpack.
Stars: ✭ 82 (-93.98%)
Mutual labels:  webpack-loader
Html Loader
HTML Loader
Stars: ✭ 1,067 (-21.6%)
Mutual labels:  webpack-loader
Worker Loader
A webpack loader that registers a script as a Web Worker
Stars: ✭ 1,284 (-5.66%)
Mutual labels:  webpack-loader
Bootstrap Loader
Load Bootstrap styles and scripts in your Webpack bundle
Stars: ✭ 1,038 (-23.73%)
Mutual labels:  webpack-loader
Node Loader
node loader for native modules
Stars: ✭ 77 (-94.34%)
Mutual labels:  webpack-loader
Webpack Core Usage
webpack2完整系列课程,欢迎阅读。同时欢迎移步我的react全家桶文章全集: https://github.com/liangklfangl/react-article-bucket
Stars: ✭ 94 (-93.09%)
Mutual labels:  webpack-loader
Css Modules Flow Types
Creates flow type definitions from CSS Modules files using Webpack loader or CLI 👾
Stars: ✭ 92 (-93.24%)
Mutual labels:  webpack-loader
Mini Program Webpack Loader
基于 webpack 的小程序构建工具
Stars: ✭ 83 (-93.9%)
Mutual labels:  webpack-loader

npm node deps tests chat size

url-loader

DEPREACTED for v5: please consider migrating to asset modules.

A loader for webpack which transforms files into base64 URIs.

Getting Started

To begin, you'll need to install url-loader:

$ npm install url-loader --save-dev

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

index.js

import img from './image.png';

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
            },
          },
        ],
      },
    ],
  },
};

And run webpack via your preferred method.

Options

Name Type Default Description
limit {Boolean|Number|String} true Specifying the maximum size of a file in bytes.
mimetype {Boolean|String} based from mime-types Sets the MIME type for the file to be transformed.
encoding {Boolean|String} base64 Specify the encoding which the file will be inlined with.
generator {Function} () => type/subtype;encoding,base64_data You can create you own custom implementation for encoding data.
fallback {String} file-loader Specifies an alternative loader to use when a target file's size exceeds the limit.
esModule {Boolean} true Use ES modules syntax.

limit

Type: Boolean|Number|String Default: true

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

Boolean

Enable or disable transform files into base64.

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: false,
            },
          },
        ],
      },
    ],
  },
};

Number|String

A Number or String specifying the maximum size of a file in bytes. If the file size is equal or greater than the limit file-loader will be used (by default) and all query parameters are passed to it.

Using an alternative to file-loader is enabled via the fallback option.

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
            },
          },
        ],
      },
    ],
  },
};

mimetype

Type: Boolean|String Default: based from mime-types

Specify the mimetype which the file will be inlined with. If unspecified the mimetype value will be used from mime-types.

Boolean

The true value allows to generation the mimetype part from mime-types. The false value removes the mediatype part from a Data URL (if omitted, defaults to text/plain;charset=US-ASCII).

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              mimetype: false,
            },
          },
        ],
      },
    ],
  },
};

String

Sets the MIME type for the file to be transformed.

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              mimetype: 'image/png',
            },
          },
        ],
      },
    ],
  },
};

encoding

Type: Boolean|String Default: base64

Specify the encoding which the file will be inlined with. If unspecified the encoding will be base64.

Boolean

If you don't want to use any encoding you can set encoding to false however if you set it to true it will use the default encoding base64.

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              encoding: false,
            },
          },
        ],
      },
    ],
  },
};

String

It supports Node.js Buffers and Character Encodings which are ["utf8","utf16le","latin1","base64","hex","ascii","binary","ucs2"].

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              encoding: 'utf8',
            },
          },
        ],
      },
    ],
  },
};

generator

Type: Function Default: (mimetype, encoding, content, resourcePath) => mimetype;encoding,base64_content

You can create you own custom implementation for encoding data.

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|html)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              // The `mimetype` and `encoding` arguments will be obtained from your options
              // The `resourcePath` argument is path to file.
              generator: (content, mimetype, encoding, resourcePath) => {
                if (/\.html$/i.test(resourcePath)) {
                  return `data:${mimetype},${content.toString()}`;
                }

                return `data:${mimetype}${
                  encoding ? `;${encoding}` : ''
                },${content.toString(encoding)}`;
              },
            },
          },
        ],
      },
    ],
  },
};

fallback

Type: String Default: 'file-loader'

Specifies an alternative loader to use when a target file's size exceeds the limit set in the limit option.

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              fallback: require.resolve('responsive-loader'),
            },
          },
        ],
      },
    ],
  },
};

The fallback loader will receive the same configuration options as url-loader.

For example, to set the quality option of a responsive-loader above use:

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              fallback: require.resolve('responsive-loader'),
              quality: 85,
            },
          },
        ],
      },
    ],
  },
};

esModule

Type: Boolean Default: true

By default, file-loader generates JS modules that use the ES modules syntax. There are some cases in which using ES modules is beneficial, like in the case of module concatenation and tree shaking.

You can enable a CommonJS module syntax using:

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              esModule: false,
            },
          },
        ],
      },
    ],
  },
};

Examples

SVG

SVG can be compressed into a more compact output, avoiding base64. You can read about it more here. You can do it using mini-svg-data-uri package.

webpack.config.js

const svgToMiniDataURI = require('mini-svg-data-uri');

module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              generator: (content) => svgToMiniDataURI(content.toString()),
            },
          },
        ],
      },
    ],
  },
};

Contributing

Please take a moment to read our contributing guidelines if you haven't yet done so.

CONTRIBUTING

License

MIT


Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].