ui
This commit is contained in:
+174
@@ -0,0 +1,174 @@
|
||||
# img-loader
|
||||
|
||||
[![npm Version][npm-image]][npm]
|
||||
[![MIT License][license-image]][LICENSE]
|
||||
|
||||
Image minimizing loader for webpack 4, meant to be used with [url-loader](https://github.com/webpack/url-loader), [file-loader](https://github.com/webpack/file-loader), or [raw-loader](https://github.com/webpack/raw-loader)
|
||||
|
||||
> Minify PNG, JPEG, GIF and SVG images with [imagemin](https://github.com/imagemin/imagemin) [plugins](https://www.npmjs.com/search?q=keywords:imageminplugin)
|
||||
|
||||
img-loader has a peer dependency on `imagemin`, so you will need to make sure to include that, along with any imagemin plugins you will use.
|
||||
|
||||
|
||||
## Install
|
||||
|
||||
```sh
|
||||
$ npm install img-loader --save-dev
|
||||
```
|
||||
|
||||
|
||||
## Usage
|
||||
|
||||
[Documentation: Using loaders](https://webpack.js.org/concepts/loaders/)
|
||||
|
||||
```javascript
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.(jpe?g|png|gif|svg)$/i,
|
||||
use: [
|
||||
'url-loader?limit=10000',
|
||||
'img-loader'
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
By default the loader simply passes along the image unmodified.
|
||||
|
||||
|
||||
### Options
|
||||
|
||||
Options are forwarded to `imagemin.buffer(image, options)`, so any plugins you would like to use for optimizing the images are passed as the `plugins` property.
|
||||
|
||||
For more details on each plugin's options, see their documentation on [Github](https://github.com/imagemin).
|
||||
|
||||
```js
|
||||
{
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.(jpe?g|png|gif|svg)$/i,
|
||||
use: [
|
||||
'url-loader?limit=10000',
|
||||
{
|
||||
loader: 'img-loader',
|
||||
options: {
|
||||
plugins: [
|
||||
require('imagemin-gifsicle')({
|
||||
interlaced: false
|
||||
}),
|
||||
require('imagemin-mozjpeg')({
|
||||
progressive: true,
|
||||
arithmetic: false
|
||||
}),
|
||||
require('imagemin-pngquant')({
|
||||
floyd: 0.5,
|
||||
speed: 2
|
||||
}),
|
||||
require('imagemin-svgo')({
|
||||
plugins: [
|
||||
{ removeTitle: true },
|
||||
{ convertPathData: false }
|
||||
]
|
||||
})
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
`plugins` can also be a function, which will receive the [webpack loader context](https://webpack.js.org/api/loaders/#the-loader-context) and should return the plugins array.
|
||||
```js
|
||||
{
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.(jpe?g|png|gif|svg)$/i,
|
||||
use: [
|
||||
'url-loader?limit=10000',
|
||||
{
|
||||
loader: 'img-loader',
|
||||
options: {
|
||||
plugins (context) {
|
||||
if (process.env.NODE_ENV === 'production') return []
|
||||
return [
|
||||
require('imagemin-svgo')({
|
||||
plugins: [
|
||||
{ cleanupIDs: false },
|
||||
{
|
||||
prefixIds: {
|
||||
prefix: path.basename(context.resourcePath, 'svg')
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
If you only want to run imagemin in production builds, you can omit the `img-loader` or leave plugins empty in your production configuration file. If you don't keep a separate configuration for prod builds, something like the following also works:
|
||||
|
||||
```js
|
||||
{
|
||||
loader: 'img-loader',
|
||||
options: {
|
||||
plugins: process.env.NODE_ENV === 'production' && [
|
||||
require('imagemin-svgo')({})
|
||||
// etc.
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
## Migrating from 2.x
|
||||
|
||||
To get the default behavior from version `2.0.1`, you'll need to install these imagemin plugins:
|
||||
|
||||
* [imagemin-gifsicle](https://github.com/imagemin/imagemin-gifsicle)
|
||||
* [imagemin-mozjpeg](https://github.com/imagemin/imagemin-mozjpeg)
|
||||
* [imagemin-optipng](https://github.com/imagemin/imagemin-optipng)
|
||||
* [imagemin-svgo](https://github.com/imagemin/imagemin-svgo)
|
||||
|
||||
Then use this loader setup in your webpack configuration file:
|
||||
|
||||
```js
|
||||
{
|
||||
loader: 'img-loader',
|
||||
options: {
|
||||
plugins: [
|
||||
require('imagemin-gifsicle')({}),
|
||||
require('imagemin-mozjpeg')({}),
|
||||
require('imagemin-optipng')({}),
|
||||
require('imagemin-svgo')({})
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
The options object you had under a plugin's name property, should instead be passed directly to the plugin after you require it.
|
||||
|
||||
If you used the optional `pngquant` settings, then you will additionally need to install [imagemin-pngquant](https://github.com/imagemin/imagemin-pngquant), and add it to your plugins array as any other imagemin plugin.
|
||||
|
||||
|
||||
## License
|
||||
|
||||
This software is free to use under the MIT license. See the [LICENSE-MIT file][LICENSE] for license text and copyright information.
|
||||
|
||||
[npm]: https://www.npmjs.org/package/img-loader
|
||||
[npm-image]: https://img.shields.io/npm/v/img-loader.svg
|
||||
[license-image]: https://img.shields.io/npm/l/img-loader.svg
|
||||
[LICENSE]: https://github.com/vanwagonet/img-loader/blob/master/LICENSE-MIT
|
||||
Reference in New Issue
Block a user