You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

184 lines
5.3 KiB

4 years ago
  1. # img-loader
  2. [![npm Version][npm-image]][npm]
  3. [![Greenkeeper badge][greenkeeper-image]][greenkeeper]
  4. [![Build Status][build-image]][build]
  5. [![JS Standard Style][style-image]][style]
  6. [![MIT License][license-image]][LICENSE]
  7. 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)
  8. > Minify PNG, JPEG, GIF and SVG images with [imagemin](https://github.com/imagemin/imagemin) [plugins](https://www.npmjs.com/search?q=keywords:imageminplugin)
  9. 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.
  10. ## Install
  11. ```sh
  12. $ npm install img-loader --save-dev
  13. ```
  14. ## Usage
  15. [Documentation: Using loaders](https://webpack.js.org/concepts/loaders/)
  16. ```javascript
  17. module: {
  18. rules: [
  19. {
  20. test: /\.(jpe?g|png|gif|svg)$/i,
  21. use: [
  22. 'url-loader?limit=10000',
  23. 'img-loader'
  24. ]
  25. }
  26. ]
  27. }
  28. ```
  29. By default the loader simply passes along the image unmodified.
  30. ### Options
  31. 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.
  32. For more details on each plugin's options, see their documentation on [Github](https://github.com/imagemin).
  33. ```js
  34. {
  35. module: {
  36. rules: [
  37. {
  38. test: /\.(jpe?g|png|gif|svg)$/i,
  39. use: [
  40. 'url-loader?limit=10000',
  41. {
  42. loader: 'img-loader',
  43. options: {
  44. plugins: [
  45. require('imagemin-gifsicle')({
  46. interlaced: false
  47. }),
  48. require('imagemin-mozjpeg')({
  49. progressive: true,
  50. arithmetic: false
  51. }),
  52. require('imagemin-pngquant')({
  53. floyd: 0.5,
  54. speed: 2
  55. }),
  56. require('imagemin-svgo')({
  57. plugins: [
  58. { removeTitle: true },
  59. { convertPathData: false }
  60. ]
  61. })
  62. ]
  63. }
  64. }
  65. ]
  66. }
  67. ]
  68. }
  69. }
  70. ```
  71. `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.
  72. ```js
  73. {
  74. module: {
  75. rules: [
  76. {
  77. test: /\.(jpe?g|png|gif|svg)$/i,
  78. use: [
  79. 'url-loader?limit=10000',
  80. {
  81. loader: 'img-loader',
  82. options: {
  83. plugins (context) {
  84. if (process.env.NODE_ENV === 'production') return []
  85. return [
  86. require('imagemin-svgo')({
  87. plugins: [
  88. { cleanupIDs: false },
  89. {
  90. prefixIds: {
  91. prefix: path.basename(context.resourcePath, 'svg')
  92. }
  93. }
  94. ]
  95. })
  96. ]
  97. }
  98. }
  99. }
  100. ]
  101. }
  102. ]
  103. }
  104. }
  105. ```
  106. 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:
  107. ```js
  108. {
  109. loader: 'img-loader',
  110. options: {
  111. plugins: process.env.NODE_ENV === 'production' && [
  112. require('imagemin-svgo')({})
  113. // etc.
  114. ]
  115. }
  116. }
  117. ```
  118. ## Migrating from 2.x
  119. To get the default behavior from version `2.0.1`, you'll need to install these imagemin plugins:
  120. * [imagemin-gifsicle](https://github.com/imagemin/imagemin-gifsicle)
  121. * [imagemin-mozjpeg](https://github.com/imagemin/imagemin-mozjpeg)
  122. * [imagemin-optipng](https://github.com/imagemin/imagemin-optipng)
  123. * [imagemin-svgo](https://github.com/imagemin/imagemin-svgo)
  124. Then use this loader setup in your webpack configuration file:
  125. ```js
  126. {
  127. loader: 'img-loader',
  128. options: {
  129. plugins: [
  130. require('imagemin-gifsicle')({}),
  131. require('imagemin-mozjpeg')({}),
  132. require('imagemin-optipng')({}),
  133. require('imagemin-svgo')({})
  134. ]
  135. }
  136. }
  137. ```
  138. The options object you had under a plugin's name property, should instead be passed directly to the plugin after you require it.
  139. 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.
  140. ## License
  141. This software is free to use under the MIT license. See the [LICENSE-MIT file][LICENSE] for license text and copyright information.
  142. [npm]: https://www.npmjs.org/package/img-loader
  143. [npm-image]: https://img.shields.io/npm/v/img-loader.svg
  144. [greenkeeper-image]: https://badges.greenkeeper.io/thetalecrafter/img-loader.svg
  145. [greenkeeper]: https://greenkeeper.io/
  146. [build]: https://travis-ci.org/thetalecrafter/img-loader
  147. [build-image]: https://img.shields.io/travis/thetalecrafter/img-loader.svg
  148. [style]: https://github.com/feross/standard
  149. [style-image]: https://img.shields.io/badge/code%20style-standard-brightgreen.svg
  150. [license-image]: https://img.shields.io/npm/l/img-loader.svg
  151. [LICENSE]: https://github.com/thetalecrafter/img-loader/blob/master/LICENSE-MIT