image-size-loader

image size loader module for webpack

Usage no npm install needed!

<script type="module">
  import imageSizeLoader from 'https://cdn.skypack.dev/image-size-loader';
</script>

README

image size loader for webpack

A webpack image loader with extra size info for image.

Usage

Documentation: Using loaders

npm install image-size-loader --save

var image = require("image-size!./file.png");
// => emits file.png to the output directory
// => returns an object
// => { width: 150, height: 50, type: "png", src: __webpack_public_path__ + "file.png", bytes: 1234 }

Options

query params

name

var image = require('image-size?name=[hash].[ext]!./file.png');

Filename placeholders

  • [ext] the extension of the resource
  • [name] the basename of the resource
  • [path] the path of the resource relative to the context query parameter or option.
  • [hash] the hash of the content
  • [<hashType>:hash:<digestType>:<length>] optionally you can configure
    • other hashTypes, i. e. sha1, md5, sha256, sha512
    • other digestTypes, i. e. hex, base26, base32, base36, base49, base52, base58, base62, base64
    • and length the length in chars
  • [N] the N-th match obtained from matching the current file name against the query param regExp

Source: https://github.com/webpack/loader-utils#interpolatename

Examples

webpack.config.js

// webpack.config.js
module.exports = {
  output: {
    publicPath: '/public/'
  },
  module: {
    loaders: [
      {
        test: /\.(gif|jpeg|jpg|png|svg)$/,
        loader: 'image-size'
      }
    ]
  }
};

example_module.js

var result = require("./image.png");
// => {width: 500, height: 700, type: "png", src: __webpack_public_path__ + "image.png", bytes: 1234}