imagesize-loader
A webpack image loader with extra size info for image.
Usage
npm install imagesize-loader --savevar image = ;// => emits file.png to the output directory// => returns an object// => { width: 150, height: 50, type: "png", src: "file.png", bytes: 1234 }
Options
config.output.imageFilename
// webpack.config.jsmoduleexports = output: imageFilename: '[name]-[hash].[ext]'
config.output.publicPath
The path/URL that gets prepended to the output filename - https://github.com/webpack/docs/wiki/configuration#outputpublicpath
query params
name
var image = ;
Note: This overrides the config output.imageFilename
.
json
var image = ;
Use this incase you'd want to add more properties to the output json.
Filename placeholders
[ext]
the extension of the resource[name]
the basename of the resource[path]
the path of the resource relative to thecontext
query parameter or option.[hash]
the hash or the content[<hashType>:hash:<digestType>:<length>]
optionally you can configure- other
hashType
s, i. e.sha1
,md5
,sha256
,sha512
- other
digestType
s, i. e.hex
,base26
,base32
,base36
,base49
,base52
,base58
,base62
,base64
- and
length
the length in chars
- other
[N]
the N-th match obtained from matching the current file name against the query paramregExp
Source: https://github.com/webpack/loader-utils#interpolatename
Examples
webpack.config.js
// webpack.config.jsmoduleexports = output: publicPath: 'public/' module: loaders: test: /\./ loader: 'imagesize' ;
example_module.js
var result = ;// => {width: 500, height: 700, type: "png", src: "public/image.png", bytes: 1234}