https://github.com/milewski/imagemin-loader
Imagemin loader module for webpack.
https://github.com/milewski/imagemin-loader
image-compression imagemin loader optimization webpack webpack-loader
Last synced: over 1 year ago
JSON representation
Imagemin loader module for webpack.
- Host: GitHub
- URL: https://github.com/milewski/imagemin-loader
- Owner: milewski
- License: mit
- Created: 2017-04-01T08:47:57.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2023-07-29T11:42:05.000Z (almost 3 years ago)
- Last Synced: 2025-02-28T07:33:00.805Z (over 1 year ago)
- Topics: image-compression, imagemin, loader, optimization, webpack, webpack-loader
- Language: TypeScript
- Homepage:
- Size: 1.25 MB
- Stars: 10
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# imagemin-loader
[](https://badge.fury.io/js/imagemin-loader)
[](https://www.npmjs.com/package/imagemin-loader)
[](https://github.com/prettier/prettier)
[](https://github.com/semantic-release/semantic-release)
[](http://commitizen.github.io/cz-cli/)
Imagemin hook for webpack 3
> Minify all images seamlessly with [imagemin](https://github.com/kevva/imagemin)
## Oh. but Why?
Because none of the other loaders out there would allow me to use my own imagemin plugin.
## Install
```bash
$ npm install imagemin-loader -D
```
## Usage
In your `webpack.config.js` add the imagemin-loader, chained with the [file-loader](https://github.com/webpack/file-loader), [url-loader](https://github.com/webpack/url-loader) or [raw-loader](https://github.com/webpack/raw-loader):
```js
module: {
rules: [
{
test: /\.(png|jpe?g|gif|svg)$/,
use: [
/** file-loader | url-loader | raw-loader **/
{ loader: 'file-loader' },
{
loader: 'imagemin-loader',
options: {
// enabled: process.env.NODE_ENV === 'production',
plugins: [
{
use: 'imagemin-pngquant',
options: {
quality: '50-60'
}
},
{
/** Alternative syntax **/
use: require('imagemin-guetzli'),
options: {
enabled: process.env.NODE_ENV === 'production',
quality: 95
}
}
]
}
}
]
}
]
}
```
You can use any [imagemin plugin](https://www.npmjs.com/browse/keyword/imageminplugin), simple include it on the plugin array and install it as a local dependency.
### Options
```typescript
{
enabled: boolean, // Enable or disable the loader globally
plugins: [
{
use: string|function, // Package name like: 'imagemin-gifsicle', require('imagemin-gifsicle') or a Function
options: {
enabled: boolean, // Enable or disable at the plugin level
...ImageMinPluginOptions // Specific plugin options
}
}
]
}
```
## License
[MIT](LICENSE) © [Rafael Milewski](https://github.com/milewski)