1 |
|
2 |
|
3 | <div align="center">
|
4 | <a href="https://github.com/webpack/webpack">
|
5 | <img width="200" height="200" hspace="10"
|
6 | src="https://cdn.rawgit.com/webpack/media/e7485eb2/logo/icon.svg">
|
7 | </a>
|
8 | <h1>Imagemin Webpack</h1>
|
9 | <p>
|
10 | Plugin and Loader for <a href="http://webpack.js.org/">webpack</a> to optimize (compress) all images using <a href="https://github.com/imagemin/imagemin">imagemin</a>.
|
11 | Do not worry about size of images, now they are always optimized/compressed.
|
12 | </p>
|
13 | </div>
|
14 |
|
15 |
|
16 |
|
17 | [![npm][npm]][npm-url]
|
18 | [![node][node]][node-url]
|
19 | [![deps][deps]][deps-url]
|
20 | [![tests][tests]][tests-url]
|
21 | [![cover][cover]][cover-url]
|
22 | [![chat][chat]][chat-url]
|
23 | [![size][size]][size-url]
|
24 |
|
25 | # image-minimizer-webpack-plugin
|
26 |
|
27 | This plugin uses [imagemin](https://github.com/imagemin/imagemin) to optimize your images.
|
28 |
|
29 | ## Getting Started
|
30 |
|
31 | To begin, you'll need to install `image-minimizer-webpack-plugin`:
|
32 |
|
33 | ```console
|
34 | $ npm install image-minimizer-webpack-plugin --save-dev
|
35 | ```
|
36 |
|
37 | Images can be optimized in two modes:
|
38 |
|
39 | 1. [Lossless](https://en.wikipedia.org/wiki/Lossless_compression) (without loss of quality).
|
40 | 2. [Lossy](https://en.wikipedia.org/wiki/Lossy_compression) (with loss of quality).
|
41 |
|
42 | Note:
|
43 |
|
44 | - [imagemin-mozjpeg](https://github.com/imagemin/imagemin-mozjpeg) can be configured in lossless and lossy mode.
|
45 | - [imagemin-svgo](https://github.com/imagemin/imagemin-svgo) can be configured in lossless and lossy mode.
|
46 |
|
47 | Explore the options to get the best result for you.
|
48 |
|
49 | **Recommended imagemin plugins for lossless optimization**
|
50 |
|
51 | ```shell
|
52 | npm install imagemin-gifsicle imagemin-jpegtran imagemin-optipng imagemin-svgo --save-dev
|
53 | ```
|
54 |
|
55 | **Recommended imagemin plugins for lossy optimization**
|
56 |
|
57 | ```shell
|
58 | npm install imagemin-gifsicle imagemin-mozjpeg imagemin-pngquant imagemin-svgo --save-dev
|
59 | ```
|
60 |
|
61 | **webpack.config.js**
|
62 |
|
63 | ```js
|
64 | const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
|
65 |
|
66 | module.exports = {
|
67 | module: {
|
68 | rules: [
|
69 | {
|
70 | test: /\.(jpe?g|png|gif|svg)$/i,
|
71 | use: [
|
72 | {
|
73 | loader: 'file-loader', // Or `url-loader` or your other loader
|
74 | },
|
75 | ],
|
76 | },
|
77 | ],
|
78 | },
|
79 | plugins: [
|
80 | new ImageMinimizerPlugin({
|
81 | minimizerOptions: {
|
82 | // Lossless optimization with custom option
|
83 | // Feel free to experiment with options for better result for you
|
84 | plugins: [
|
85 | ['gifsicle', { interlaced: true }],
|
86 | ['jpegtran', { progressive: true }],
|
87 | ['optipng', { optimizationLevel: 5 }],
|
88 | [
|
89 | 'svgo',
|
90 | {
|
91 | plugins: [
|
92 | {
|
93 | removeViewBox: false,
|
94 | },
|
95 | ],
|
96 | },
|
97 | ],
|
98 | ],
|
99 | },
|
100 | }),
|
101 | ],
|
102 | };
|
103 | ```
|
104 |
|
105 | > ℹ️ Only for `4` version of `webpack`: Make sure that plugin place after any plugins that add images or other assets which you want to optimized.\*\*
|
106 |
|
107 | > ℹ️ If you want to use `loader` or `plugin` standalone see sections below, but this is not recommended.
|
108 |
|
109 | ### Standalone Loader
|
110 |
|
111 | [Documentation: Using loaders](https://webpack.js.org/concepts/loaders/)
|
112 |
|
113 | In your `webpack.config.js`, add the `ImageMinimizerPlugin.loader`, chained with the [file-loader](https://github.com/webpack/file-loader) or [url-loader](https://github.com/webpack-contrib/url-loader):
|
114 |
|
115 | **webpack.config.js**
|
116 |
|
117 | ```js
|
118 | const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
|
119 |
|
120 | module.exports = {
|
121 | module: {
|
122 | rules: [
|
123 | {
|
124 | test: /\.(jpe?g|png|gif|svg)$/i,
|
125 | use: [
|
126 | {
|
127 | loader: 'file-loader', // Or `url-loader` or your other loader
|
128 | },
|
129 | {
|
130 | loader: ImageMinimizerPlugin.loader,
|
131 | options: {
|
132 | severityError: 'warning', // Ignore errors on corrupted images
|
133 | minimizerOptions: {
|
134 | plugins: ['gifsicle'],
|
135 | },
|
136 | },
|
137 | },
|
138 | ],
|
139 | },
|
140 | ],
|
141 | },
|
142 | };
|
143 | ```
|
144 |
|
145 | ### Standalone Plugin
|
146 |
|
147 | [Documentation: Using plugins](https://webpack.js.org/concepts/plugins/)
|
148 |
|
149 | **webpack.config.js**
|
150 |
|
151 | ```js
|
152 | const ImageminWebpack = require('image-minimizer-webpack-plugin');
|
153 |
|
154 | module.exports = {
|
155 | module: {
|
156 | rules: [
|
157 | {
|
158 | loader: 'file-loader',
|
159 | options: {
|
160 | name: '[path][name].[ext]',
|
161 | },
|
162 | test: /\.(jpe?g|png|gif|svg)$/i,
|
163 | },
|
164 | ],
|
165 | },
|
166 | plugins: [
|
167 | // Make sure that the plugin placed after any plugins that added images
|
168 | new ImageminWebpack({
|
169 | severityError: 'warning', // Ignore errors on corrupted images
|
170 | minimizerOptions: {
|
171 | plugins: ['gifsicle'],
|
172 | },
|
173 | // Disable `loader`
|
174 | loader: false,
|
175 | }),
|
176 | ],
|
177 | };
|
178 | ```
|
179 |
|
180 | ## Options
|
181 |
|
182 | ### Plugin Options
|
183 |
|
184 |
|
185 |
|
186 | | Name | Type | Default | Description |
|
187 | | :------------------------: | :---------------------------------------: | :---------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------ |
|
188 | | **`test`** | `{String\/RegExp\|Array<String\|RegExp>}` | <code>/\.(jpe?g\|png\|gif\|tif\|webp\|svg\|avif)\$/i</code> | Test to match files against |
|
189 | | **`include`** | `{String\/RegExp\|Array<String\|RegExp>}` | `undefined` | Files to `include` |
|
190 | | **`exclude`** | `{String\/RegExp\|Array<String\|RegExp>}` | `undefined` | Files to `exclude` |
|
191 | | **`filter`** | `{Function}` | `() => true` | Allows filtering of images for optimization |
|
192 | | **`cache`** | `{Boolean\|String}` | `true` | Enable file caching |
|
193 | | **`severityError`** | `{Boolean\|String}` | `'auto'` | Allows to choose how errors are displayed |
|
194 | | **`minimizerOptions`** | `{Object}` | `{ plugins: [] }` | Options for `imagemin` |
|
195 | | **`loader`** | `{Boolean}` | `true` | Automatically adding `imagemin-loader` (require for minification images using in `url-loader`, `svg-url-loader` or other) |
|
196 | | **`maxConcurrency`** | `{Number}` | `Math.max(1, os.cpus().length - 1)` | Maximum number of concurrency optimization processes in one time |
|
197 | | **`filename`** | `{string}` | `'[path][name][ext]'` | Allows to set the filename for the generated asset. Useful for converting to a `webp` |
|
198 | | **`deleteOriginalAssets`** | `{Boolean}` | `false` | Allows to delete the original asset. Useful for converting to a `webp` and remove original assets |
|
199 |
|
200 |
|
201 |
|
202 | #### `test`
|
203 |
|
204 | Type: `String|RegExp|Array<String|RegExp>`
|
205 | Default: `/\.(jpe?g\|png\|gif\|tif\|webp\|svg\|avif)\$/i`
|
206 |
|
207 | Test to match files against.
|
208 |
|
209 | **webpack.config.js**
|
210 |
|
211 | ```js
|
212 | const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
|
213 |
|
214 | module.exports = {
|
215 | plugins: [
|
216 | new ImageMinimizerPlugin({
|
217 | test: /\.(jpe?g|png|gif|svg)$/i,
|
218 | }),
|
219 | ],
|
220 | };
|
221 | ```
|
222 |
|
223 | #### `include`
|
224 |
|
225 | Type: `String|RegExp|Array<String|RegExp>`
|
226 | Default: `undefined`
|
227 |
|
228 | Files to include.
|
229 |
|
230 | **webpack.config.js**
|
231 |
|
232 | ```js
|
233 | const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
|
234 |
|
235 | module.exports = {
|
236 | plugins: [
|
237 | new ImageMinimizerPlugin({
|
238 | include: /\/includes/,
|
239 | }),
|
240 | ],
|
241 | };
|
242 | ```
|
243 |
|
244 | #### `exclude`
|
245 |
|
246 | Type: `String|RegExp|Array<String|RegExp>`
|
247 | Default: `undefined`
|
248 |
|
249 | Files to exclude.
|
250 |
|
251 | **webpack.config.js**
|
252 |
|
253 | ```js
|
254 | const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
|
255 |
|
256 | module.exports = {
|
257 | plugins: [
|
258 | new ImageMinimizerPlugin({
|
259 | exclude: /\/excludes/,
|
260 | }),
|
261 | ],
|
262 | };
|
263 | ```
|
264 |
|
265 | #### `filter`
|
266 |
|
267 | Type: `Function`
|
268 | Default: `() => true`
|
269 |
|
270 | Allows filtering of images for optimization.
|
271 |
|
272 | Return `true` to optimize the image, `false` otherwise.
|
273 |
|
274 | **webpack.config.js**
|
275 |
|
276 | ```js
|
277 | const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
|
278 |
|
279 | module.exports = {
|
280 | plugins: [
|
281 | new ImageMinimizerPlugin({
|
282 | filter: (source, sourcePath) => {
|
283 | // The `source` argument is a `Buffer` of source file
|
284 | // The `sourcePath` argument is an absolute path to source
|
285 | if (source.byteLength < 8192) {
|
286 | return false;
|
287 | }
|
288 |
|
289 | return true;
|
290 | },
|
291 | }),
|
292 | ],
|
293 | };
|
294 | ```
|
295 |
|
296 | #### `cache`
|
297 |
|
298 | > ⚠ Ignored in webpack 5! Please use https://webpack.js.org/configuration/other-options/#cache.
|
299 |
|
300 | Type: `Boolean|String`
|
301 | Default: `true`
|
302 |
|
303 | Enable/disable file caching. Default path to cache directory: `node_modules/.cache/image-minimizer-webpack-plugin`.
|
304 |
|
305 | ##### `{Boolean}`
|
306 |
|
307 | Enable/disable file caching.
|
308 |
|
309 | **webpack.config.js**
|
310 |
|
311 | ```js
|
312 | const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
|
313 |
|
314 | module.exports = {
|
315 | plugins: [
|
316 | new ImageMinimizerPlugin({
|
317 | cache: false,
|
318 | }),
|
319 | ],
|
320 | };
|
321 | ```
|
322 |
|
323 | ##### `{String}`
|
324 |
|
325 | Enable file caching and set path to cache directory.
|
326 |
|
327 | **webpack.config.js**
|
328 |
|
329 | ```js
|
330 | const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
|
331 |
|
332 | module.exports = {
|
333 | plugins: [
|
334 | new ImageMinimizerPlugin({
|
335 | cache: 'path/to/cache',
|
336 | }),
|
337 | ],
|
338 | };
|
339 | ```
|
340 |
|
341 | #### `severityError`
|
342 |
|
343 | Type: `Boolean|String`
|
344 | Default: `'auto'`
|
345 |
|
346 | Allows to choose how errors are displayed.
|
347 |
|
348 | Сan have the following values:
|
349 |
|
350 | - `'auto'` - emit warnings in `development` mode and emit errors in `production` mode (default behavior)
|
351 | - `false` or `'off'` - suppresses errors and warnings
|
352 | - `'warning'` - emit warnings instead errors
|
353 | - `true` or `'error'` - emit errors
|
354 |
|
355 | **webpack.config.js**
|
356 |
|
357 | ```js
|
358 | const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
|
359 |
|
360 | module.exports = {
|
361 | plugins: [
|
362 | new ImageMinimizerPlugin({
|
363 | severityError: 'warning',
|
364 | }),
|
365 | ],
|
366 | };
|
367 | ```
|
368 |
|
369 | #### `minimizerOptions`
|
370 |
|
371 | Type: `Object`
|
372 | Default: `{ plugins: [] }`
|
373 |
|
374 | Options for [`imagemin`](https://github.com/imagemin/imagemin).
|
375 |
|
376 | More information and examples [here](https://github.com/imagemin/imagemin).
|
377 |
|
378 | **webpack.config.js**
|
379 |
|
380 | ```js
|
381 | const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
|
382 |
|
383 | module.exports = {
|
384 | plugins: [
|
385 | new ImageMinimizerPlugin({
|
386 | minimizerOptions: {
|
387 | plugins: [
|
388 | // Name
|
389 | 'gifsicle',
|
390 | // Name with options
|
391 | ['mozjpeg', { quality: 80 }],
|
392 | // Full package name
|
393 | [
|
394 | 'imagemin-svgo',
|
395 | {
|
396 | plugins: [
|
397 | {
|
398 | removeViewBox: false,
|
399 | },
|
400 | ],
|
401 | },
|
402 | ],
|
403 | [
|
404 | // Custom package name
|
405 | 'nonstandard-imagemin-package-name',
|
406 | { myOptions: true },
|
407 | ],
|
408 | ],
|
409 | },
|
410 | }),
|
411 | ],
|
412 | };
|
413 | ```
|
414 |
|
415 | #### `loader`
|
416 |
|
417 | Type: `Boolean`
|
418 | Default: `true`
|
419 |
|
420 | Automatically adding `imagemin-loader`.
|
421 |
|
422 | **webpack.config.js**
|
423 |
|
424 | ```js
|
425 | const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
|
426 |
|
427 | module.exports = {
|
428 | plugins: [
|
429 | new ImageMinimizerPlugin({
|
430 | loader: false,
|
431 | }),
|
432 | ],
|
433 | };
|
434 | ```
|
435 |
|
436 | #### `maxConcurrency`
|
437 |
|
438 | Type: `Number`
|
439 | Default: `Math.max(1, os.cpus().length - 1)`
|
440 |
|
441 | Maximum number of concurrency optimization processes in one time.
|
442 |
|
443 | **webpack.config.js**
|
444 |
|
445 | ```js
|
446 | const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
|
447 |
|
448 | module.exports = {
|
449 | plugins: [
|
450 | new ImageMinimizerPlugin({
|
451 | maxConcurrency: 3,
|
452 | }),
|
453 | ],
|
454 | };
|
455 | ```
|
456 |
|
457 | #### `filename`
|
458 |
|
459 | Type: `String`
|
460 | Default: `'[path][name][ext]'`
|
461 |
|
462 | Allows to set the filename for the generated asset. Useful for converting to a `webp`.
|
463 |
|
464 | **webpack.config.js**
|
465 |
|
466 | ```js
|
467 | const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
|
468 |
|
469 | module.exports = {
|
470 | plugins: [
|
471 | // Images are converted to `webp` and the original assets have been kept
|
472 | new ImageMinimizerPlugin({
|
473 | test: /\.(png)$/i,
|
474 | filename: '[path][name].webp',
|
475 | minimizerOptions: {
|
476 | plugins: ['imagemin-webp'],
|
477 | },
|
478 | }),
|
479 | ],
|
480 | };
|
481 | ```
|
482 |
|
483 | #### `deleteOriginalAssets`
|
484 |
|
485 | Type: `Boolean`
|
486 | Default: `false`
|
487 |
|
488 | Allows to remove original assets. Useful for converting to a `webp` and remove original assets
|
489 |
|
490 | > i Doesn't make sense if you haven't changed the original value of the `filename` option
|
491 |
|
492 | **webpack.config.js**
|
493 |
|
494 | ```js
|
495 | const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
|
496 |
|
497 | module.exports = {
|
498 | plugins: [
|
499 | // Images are converted to `webp` and the original assets have been removed
|
500 | new ImageMinimizerPlugin({
|
501 | test: /\.(png)$/i,
|
502 | deleteOriginalAssets: true,
|
503 | filename: '[path][name].webp',
|
504 | minimizerOptions: {
|
505 | plugins: ['imagemin-webp'],
|
506 | },
|
507 | }),
|
508 | ],
|
509 | };
|
510 | ```
|
511 |
|
512 | To generate and compress the original assets:
|
513 |
|
514 | ```js
|
515 | const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
|
516 |
|
517 | module.exports = {
|
518 | plugins: [
|
519 | // And the original assets will be compressed
|
520 | new ImageMinimizerPlugin({
|
521 | test: /\.(png)$/i,
|
522 | minimizerOptions: {
|
523 | plugins: ['pngquant'],
|
524 | },
|
525 | }),
|
526 | // Images are converted to `webp` and the original assets have been removed
|
527 | new ImageMinimizerPlugin({
|
528 | test: /\.(png)$/i,
|
529 | deleteOriginalAssets: false,
|
530 | filename: '[path][name].webp',
|
531 | minimizerOptions: {
|
532 | plugins: ['imagemin-webp'],
|
533 | },
|
534 | }),
|
535 | ],
|
536 | };
|
537 | ```
|
538 |
|
539 | ### Loader Options
|
540 |
|
541 | | Name | Type | Default | Description |
|
542 | | :------------------------: | :-----------------: | :-------------------: | :------------------------------------------------------------------------------------------------ |
|
543 | | **`filter`** | `{Function}` | `undefined` | Allows filtering of images for optimization |
|
544 | | **`cache`** | `{Boolean\|String}` | `true` | Enable file caching |
|
545 | | **`severityError`** | `{Boolean\|String}` | `'auto'` | Allows to choose how errors are displayed |
|
546 | | **`minimizerOptions`** | `{Object}` | `{ plugins: [] }` | Options for `imagemin` |
|
547 | | **`filename`** | `{string}` | `'[path][name][ext]'` | Allows to set the filename for the generated asset. Useful for converting to a `webp` |
|
548 | | **`deleteOriginalAssets`** | `{Boolean}` | `false` | Allows to delete the original asset. Useful for converting to a `webp` and remove original assets |
|
549 |
|
550 | #### `filter`
|
551 |
|
552 | Type: `Function`
|
553 | Default: `() => true`
|
554 |
|
555 | Allows filtering of images for optimization.
|
556 |
|
557 | Return `true` to optimize the image, `false` otherwise.
|
558 |
|
559 | **webpack.config.js**
|
560 |
|
561 | ```js
|
562 | const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
|
563 |
|
564 | module.exports = {
|
565 | module: {
|
566 | rules: [
|
567 | {
|
568 | test: /\.(jpe?g|png|gif|svg)$/i,
|
569 | use: [
|
570 | {
|
571 | loader: 'file-loader', // Or `url-loader` or your other loader
|
572 | },
|
573 | {
|
574 | loader: ImageMinimizerPlugin.loader,
|
575 | options: {
|
576 | cache: true,
|
577 | filter: (source, sourcePath) => {
|
578 | // The `source` argument is a `Buffer` of source file
|
579 | // The `sourcePath` argument is an absolute path to source
|
580 | if (source.byteLength < 8192) {
|
581 | return false;
|
582 | }
|
583 |
|
584 | return true;
|
585 | },
|
586 | minimizerOptions: {
|
587 | plugins: ['gifsicle'],
|
588 | },
|
589 | },
|
590 | },
|
591 | ],
|
592 | },
|
593 | ],
|
594 | },
|
595 | };
|
596 | ```
|
597 |
|
598 | #### `cache`
|
599 |
|
600 | Type: `Boolean\|String`
|
601 | Default: `true`
|
602 |
|
603 | Enable file caching. Default path to cache directory: `node_modules/.cache/image-minimizer-webpack-plugin`.
|
604 |
|
605 | ##### `{Boolean}`
|
606 |
|
607 | Enable/disable file caching.
|
608 |
|
609 | **webpack.config.js**
|
610 |
|
611 | ```js
|
612 | const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
|
613 |
|
614 | module.exports = {
|
615 | module: {
|
616 | rules: [
|
617 | {
|
618 | test: /\.(jpe?g|png|gif|svg)$/i,
|
619 | use: [
|
620 | {
|
621 | loader: 'file-loader', // Or `url-loader` or your other loader
|
622 | },
|
623 | {
|
624 | loader: ImageMinimizerPlugin.loader,
|
625 | options: {
|
626 | cache: false,
|
627 | minimizerOptions: {
|
628 | plugins: ['gifsicle'],
|
629 | },
|
630 | },
|
631 | },
|
632 | ],
|
633 | },
|
634 | ],
|
635 | },
|
636 | };
|
637 | ```
|
638 |
|
639 | ##### `{String}`
|
640 |
|
641 | Enable file caching and set path to cache directory.
|
642 |
|
643 | **webpack.config.js**
|
644 |
|
645 | ```js
|
646 | const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
|
647 |
|
648 | module.exports = {
|
649 | module: {
|
650 | rules: [
|
651 | {
|
652 | test: /\.(jpe?g|png|gif|svg)$/i,
|
653 | use: [
|
654 | {
|
655 | loader: 'file-loader', // Or `url-loader` or your other loader
|
656 | },
|
657 | {
|
658 | loader: ImageMinimizerPlugin.loader,
|
659 | options: {
|
660 | cache: 'path/to/cache',
|
661 | minimizerOptions: {
|
662 | plugins: ['gifsicle'],
|
663 | },
|
664 | },
|
665 | },
|
666 | ],
|
667 | },
|
668 | ],
|
669 | },
|
670 | };
|
671 | ```
|
672 |
|
673 | #### `severityError`
|
674 |
|
675 | Type: `Boolean|String`
|
676 | Default: `'auto'`
|
677 |
|
678 | Allows to choose how errors are displayed.
|
679 |
|
680 | Сan have the following values:
|
681 |
|
682 | - `'auto'` - emit warnings in `development` mode and emit errors in `production` mode (default behavior)
|
683 | - `false` or `'off'` - suppresses errors and warnings
|
684 | - `'warning'` - emit warnings instead errors
|
685 | - `true` or `'error'` - emit errors
|
686 |
|
687 | **webpack.config.js**
|
688 |
|
689 | ```js
|
690 | const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
|
691 |
|
692 | module.exports = {
|
693 | module: {
|
694 | rules: [
|
695 | {
|
696 | test: /\.(jpe?g|png|gif|svg)$/i,
|
697 | use: [
|
698 | {
|
699 | loader: 'file-loader', // Or `url-loader` or your other loader
|
700 | },
|
701 | {
|
702 | loader: ImageMinimizerPlugin.loader,
|
703 | options: {
|
704 | severityError: 'warning',
|
705 | minimizerOptions: {
|
706 | plugins: ['gifsicle'],
|
707 | },
|
708 | },
|
709 | },
|
710 | ],
|
711 | },
|
712 | ],
|
713 | },
|
714 | };
|
715 | ```
|
716 |
|
717 | #### `minimizerOptions`
|
718 |
|
719 | Type: `Object`
|
720 | Default: `{ plugins: [] }`
|
721 |
|
722 | Options for `imagemin`.
|
723 |
|
724 | Options for [`imagemin`](https://github.com/imagemin/imagemin)
|
725 |
|
726 | **webpack.config.js**
|
727 |
|
728 | ```js
|
729 | const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
|
730 |
|
731 | module.exports = {
|
732 | module: {
|
733 | rules: [
|
734 | {
|
735 | test: /\.(jpe?g|png|gif|svg)$/i,
|
736 | use: [
|
737 | {
|
738 | loader: 'file-loader', // Or `url-loader` or your other loader
|
739 | },
|
740 | {
|
741 | loader: ImageMinimizerPlugin.loader,
|
742 | options: {
|
743 | severityError: 'warning',
|
744 | minimizerOptions: {
|
745 | plugins: [
|
746 | ['gifsicle', { interlaced: true, optimizationLevel: 3 }],
|
747 | ],
|
748 | },
|
749 | },
|
750 | },
|
751 | ],
|
752 | },
|
753 | ],
|
754 | },
|
755 | };
|
756 | ```
|
757 |
|
758 | #### `filename`
|
759 |
|
760 | Type: `String`
|
761 | Default: `'[path][name][ext]'`
|
762 |
|
763 | Allows to set the filename for the generated asset. Useful for converting to a `webp`.
|
764 |
|
765 | **webpack.config.js**
|
766 |
|
767 | ```js
|
768 | const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
|
769 |
|
770 | module.exports = {
|
771 | module: {
|
772 | rules: [
|
773 | {
|
774 | test: /\.(jpe?g|png|gif)$/i,
|
775 | use: [
|
776 | {
|
777 | loader: 'file-loader', // Or `url-loader` or your other loader
|
778 | },
|
779 | {
|
780 | loader: ImageMinimizerPlugin.loader,
|
781 | options: {
|
782 | filename: '[path][name].webp',
|
783 | minimizerOptions: {
|
784 | plugins: ['imagemin-webp'],
|
785 | },
|
786 | },
|
787 | },
|
788 | ],
|
789 | },
|
790 | ],
|
791 | },
|
792 | };
|
793 | ```
|
794 |
|
795 | #### `deleteOriginalAssets`
|
796 |
|
797 | Type: `Boolean`
|
798 | Default: `false`
|
799 |
|
800 | Allows to keep the original asset. Useful for converting to a `webp` and remove original assets.
|
801 |
|
802 | > i Doesn't make sense if you haven't changed the original value of the `filename` option
|
803 |
|
804 | **webpack.config.js**
|
805 |
|
806 | ```js
|
807 | const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
|
808 |
|
809 | module.exports = {
|
810 | module: {
|
811 | rules: [
|
812 | {
|
813 | test: /\.(png)$/i,
|
814 | use: [
|
815 | {
|
816 | loader: 'file-loader', // Or `url-loader` or your other loader
|
817 | },
|
818 | {
|
819 | loader: ImageMinimizerPlugin.loader,
|
820 | options: {
|
821 | // PNG images are converted to WEBP, and the originals will keep
|
822 | deleteOriginalAssets: false,
|
823 | filename: '[path][name].webp',
|
824 | minimizerOptions: {
|
825 | plugins: ['imagemin-webp'],
|
826 | },
|
827 | },
|
828 | },
|
829 | ],
|
830 | },
|
831 | ],
|
832 | },
|
833 | };
|
834 | ```
|
835 |
|
836 | ## Additional API
|
837 |
|
838 | ### `normalizeConfig(config)`
|
839 |
|
840 | The function normalizes configuration (converts plugins names and options to `Function`s) for using in `imagemin` package directly.
|
841 |
|
842 | ```js
|
843 | const imagemin = require('imagemin');
|
844 | const { normalizeConfig } = require('image-minimizer-webpack-plugin');
|
845 | const imageminConfig = normalizeConfig({
|
846 | plugins: [
|
847 | 'jpegtran',
|
848 | [
|
849 | 'pngquant',
|
850 | {
|
851 | quality: [0.6, 0.8],
|
852 | },
|
853 | ],
|
854 | ],
|
855 | });
|
856 |
|
857 | /*
|
858 | console.log(imageminConfig);
|
859 | =>
|
860 | {
|
861 | plugins: [Function, Function],
|
862 | pluginsMeta: [
|
863 | { name: "imagemin-jpegtran", version: "x.x.x", options: {} },
|
864 | { name: "imagemin-pngquant", version: "x.x.x", options: { quality: [0.6, 0.8] }
|
865 | ]
|
866 | }
|
867 | */
|
868 |
|
869 | (async () => {
|
870 | const files = await imagemin(['images/*.{jpg,png}'], {
|
871 | destination: 'build/images',
|
872 | plugins: imageminConfig.plugins,
|
873 | });
|
874 |
|
875 | console.log(files);
|
876 | // => [{data: <Buffer 89 50 4e …>, path: 'build/images/foo.jpg'}, …]
|
877 | })();
|
878 | ```
|
879 |
|
880 | ## Examples
|
881 |
|
882 | ### Optimize images based on size
|
883 |
|
884 | You can use difference options (like `progressive`/`interlaced` and etc) based on image size (example - don't do progressive transformation for small images).
|
885 |
|
886 | What is `progressive` image? [`Answer here`](https://jmperezperez.com/medium-image-progressive-loading-placeholder/).
|
887 |
|
888 | **webpack.config.js**
|
889 |
|
890 | ```js
|
891 | const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
|
892 |
|
893 | module.exports = {
|
894 | minimizer: [
|
895 | new ImageMinimizerPlugin({
|
896 | // Only apply this one to files equal to or over 8192 bytes
|
897 | filter: (source) => {
|
898 | if (source.byteLength >= 8192) {
|
899 | return true;
|
900 | }
|
901 |
|
902 | return false;
|
903 | },
|
904 | minimizerOptions: {
|
905 | plugins: [['jpegtran', { progressive: true }]],
|
906 | },
|
907 | }),
|
908 | new ImageMinimizerPlugin({
|
909 | // Only apply this one to files under 8192
|
910 | filter: (source) => {
|
911 | if (source.byteLength < 8192) {
|
912 | return true;
|
913 | }
|
914 |
|
915 | return false;
|
916 | },
|
917 | minimizerOptions: {
|
918 | plugins: [['jpegtran', { progressive: false }]],
|
919 | },
|
920 | }),
|
921 | ],
|
922 | };
|
923 | ```
|
924 |
|
925 | ### Optimize and transform images to `webp`
|
926 |
|
927 | ```js
|
928 | const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
|
929 |
|
930 | module.exports = {
|
931 | plugins: [
|
932 | new ImageMinimizerPlugin({
|
933 | minimizerOptions: {
|
934 | plugins: ['pngquant'],
|
935 | },
|
936 | }),
|
937 | new ImageMinimizerPlugin({
|
938 | deleteOriginalAssets: false,
|
939 | filename: '[path][name].webp',
|
940 | minimizerOptions: {
|
941 | plugins: ['imagemin-webp'],
|
942 | },
|
943 | }),
|
944 | ],
|
945 | };
|
946 | ```
|
947 |
|
948 | ## Contributing
|
949 |
|
950 | Please take a moment to read our contributing guidelines if you haven't yet done so.
|
951 |
|
952 | [CONTRIBUTING](./.github/CONTRIBUTING.md)
|
953 |
|
954 | ## License
|
955 |
|
956 | [MIT](./LICENSE)
|
957 |
|
958 | [npm]: https://img.shields.io/npm/v/image-minimizer-webpack-plugin.svg
|
959 | [npm-url]: https://npmjs.com/package/image-minimizer-webpack-plugin
|
960 | [node]: https://img.shields.io/node/v/image-minimizer-webpack-plugin.svg
|
961 | [node-url]: https://nodejs.org
|
962 | [deps]: https://david-dm.org/webpack-contrib/image-minimizer-webpack-plugin.svg
|
963 | [deps-url]: https://david-dm.org/webpack-contrib/image-minimizer-webpack-plugin
|
964 | [tests]: https://github.com/webpack-contrib/image-minimizer-webpack-plugin/workflows/image-minimizer-webpack-plugin/badge.svg
|
965 | [tests-url]: https://github.com/webpack-contrib/image-minimizer-webpack-plugin/actions
|
966 | [cover]: https://codecov.io/gh/webpack-contrib/image-minimizer-webpack-plugin/branch/master/graph/badge.svg
|
967 | [cover-url]: https://codecov.io/gh/webpack-contrib/image-minimizer-webpack-plugin
|
968 | [chat]: https://badges.gitter.im/webpack/webpack.svg
|
969 | [chat-url]: https://gitter.im/webpack/webpack
|
970 | [size]: https://packagephobia.now.sh/badge?p=image-minimizer-webpack-plugin
|
971 | [size-url]: https://packagephobia.now.sh/result?p=image-minimizer-webpack-plugin
|