You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardexpand all lines: CHANGELOG.md
+4
Original file line number
Diff line number
Diff line change
@@ -1,5 +1,9 @@
1
1
# Changelog
2
2
3
+
## 3.0.0
4
+
5
+
**Breaking Change** By default no image optimizing is done. The options for the loader are passed directly to `imagemin.buffer`, so `options.plugins` should be passed as an array of configured imagemin plugins. If `plugins` is a function it will be called with the webpack loader context, and the plugin array should be returned.
Copy file name to clipboardexpand all lines: README.md
+104-34
Original file line number
Diff line number
Diff line change
@@ -7,19 +7,11 @@
7
7
[![JS Standard Style][style-image]][style]
8
8
[![MIT License][license-image]][LICENSE]
9
9
10
-
Image minimizing loader for webpack 2, 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)
10
+
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)
11
11
12
-
> Minify PNG, JPEG, GIF and SVG images with [imagemin](https://github.com/imagemin/imagemin)
12
+
> Minify PNG, JPEG, GIF and SVG images with [imagemin](https://github.com/imagemin/imagemin)[plugins](https://www.npmjs.com/search?q=keywords:imageminplugin)
13
13
14
-
*Issues with the minimized output should be reported [to imagemin](https://github.com/imagemin/imagemin/issues).*
[Documentation: Using loaders](http://webpack.github.io/docs/using-loaders.html)
26
+
[Documentation: Using loaders](https://webpack.js.org/concepts/loaders/)
35
27
36
28
```javascript
37
29
module: {
@@ -47,18 +39,56 @@ module: {
47
39
}
48
40
```
49
41
50
-
The default minification includes: `gifsicle`, `mozjpeg`, `optipng`, & `svgo`. Each with their default settings.
51
-
52
-
`pngquant` can be enabled by configuring it in the options.
42
+
By default the loader simply passes along the image unmodified.
53
43
54
44
55
45
### Options
56
46
57
-
Options can also be passed by specifying properties matching each optimizer in your rule options. `false` or `null` can be used to disable one of the default optimizers.
47
+
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.
58
48
59
49
For more details on each plugin's options, see their documentation on [Github](https://github.com/imagemin).
60
50
61
-
```javascript
51
+
```js
52
+
{
53
+
module: {
54
+
rules: [
55
+
{
56
+
test:/\.(jpe?g|png|gif|svg)$/i,
57
+
use: [
58
+
'url-loader?limit=10000',
59
+
{
60
+
loader:'img-loader',
61
+
options: {
62
+
plugins: [
63
+
require('imagemin-gifsicle')({
64
+
interlaced:false
65
+
}),
66
+
require('imagemin-mozjpeg')({
67
+
progressive:true,
68
+
arithmetic:false
69
+
}),
70
+
require('imagemin-pngquant')({
71
+
floyd:0.5,
72
+
speed:2
73
+
}),
74
+
require('imagemin-svgo')({
75
+
plugins: [
76
+
{ removeTitle:true },
77
+
{ convertPathData:false }
78
+
]
79
+
})
80
+
]
81
+
}
82
+
}
83
+
]
84
+
}
85
+
]
86
+
}
87
+
}
88
+
```
89
+
90
+
`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.
91
+
```js
62
92
{
63
93
module: {
64
94
rules: [
@@ -69,23 +99,19 @@ For more details on each plugin's options, see their documentation on [Github](h
69
99
{
70
100
loader:'img-loader',
71
101
options: {
72
-
enabled:process.env.NODE_ENV==='production',
73
-
gifsicle: {
74
-
interlaced:false
75
-
},
76
-
mozjpeg: {
77
-
progressive:true,
78
-
arithmetic:false
79
-
},
80
-
optipng:false, // disabled
81
-
pngquant: {
82
-
floyd:0.5,
83
-
speed:2
84
-
},
85
-
svgo: {
86
-
plugins: [
87
-
{ removeTitle:true },
88
-
{ convertPathData:false }
102
+
plugins (context) {
103
+
if (process.env.NODE_ENV==='production') return []
104
+
return [
105
+
require('imagemin-svgo')({
106
+
plugins: [
107
+
{ cleanupIDs:false },
108
+
{
109
+
prefixIds: {
110
+
prefix:path.basename(context.resourcePath, 'svg')
111
+
}
112
+
}
113
+
]
114
+
})
89
115
]
90
116
}
91
117
}
@@ -97,6 +123,50 @@ For more details on each plugin's options, see their documentation on [Github](h
97
123
}
98
124
```
99
125
126
+
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:
127
+
128
+
```js
129
+
{
130
+
loader:'img-loader',
131
+
options: {
132
+
plugins:process.env.NODE_ENV==='production'&& [
133
+
require('imagemin-svgo')({})
134
+
// etc.
135
+
]
136
+
}
137
+
}
138
+
```
139
+
140
+
141
+
## Migrating from 2.x
142
+
143
+
To get the default behavior from version `2.0.1`, you'll need to install these imagemin plugins:
Then use this loader setup in your webpack configuration file:
151
+
152
+
```js
153
+
{
154
+
loader:'img-loader',
155
+
options: {
156
+
plugins: [
157
+
require('imagemin-gifsicle')({}),
158
+
require('imagemin-mozjpeg')({}),
159
+
require('imagemin-optipng')({}),
160
+
require('imagemin-svgo')({})
161
+
]
162
+
}
163
+
}
164
+
```
165
+
166
+
The options object you had under a plugin's name property, should instead be passed directly to the plugin after you require it.
167
+
168
+
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.
0 commit comments