$ npm install webpack-images-resizer
webpack.config.js
const path = require('path');
const WebpackImagesResizer = require('webpack-images-resizer');
let list = [];
list.push({src: path.resolve(__dirname, 'assets/1.png'), dest: 'assets/1.png'});
list.push({src: path.resolve(__dirname, 'assets/2.png'), dest: 'assets/2.png'});
list.push({src: path.resolve(__dirname, 'assets/dir'), dest: 'assets/dir'});
module.exports = {
entry: [
'./src/index',
'webpack-dev-server/client?http://localhost:8080'
],
output: {filename: 'index.js'},
mode: 'development',
plugins: [
new WebpackImagesResizer(list, {width: "50%"})
]
};
Plugin arguments
prop | type | description |
---|---|---|
list | Object or array | {src: "images or folders path", dest: "relative output path"} |
options | Object | resize option |
Resize options
format
- format of output files (png, jpg, gif, bmp or *). Default: *width
- width of output images (fixed, percentage or -1 for auto). Default: -1height
- height of output images (fixed, percentage or -1 for auto). Default: -1noCrop
- disable the crop feature. If true it will choose the max size between height/width. Default: falsequality
- quality of output images (from 0 to 100). Default: 100tinify
- tinify images using TinyPNG. Default: falsetinifyKey
- TinyPNG key. Default: ""
Full example
https://github.com/odrick/webpack-images-resizer/tree/master/example
- download
- npm install
- npm start
- open http://localhost:8080
- Jimp - https://github.com/oliver-moran/jimp
- Chokidar - https://github.com/paulmillr/chokidar
- Tinify - https://github.com/tinify/tinify-nodejs
License: MIT