.travis.yml

@@ -0,0 +1,4 @@
+language: node_js
+node_js:
+- 'lts/*'
+- stable

CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## 3.0.0
+
+**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.
+
+## 2.0.1
+
+Updated dependencies
+
+## 2.0.0
+
+Require Node 4. Support only webpack 2. Switch from jpegtran to mozjpeg.
+Switch to `enabled` option instead of detecting `minimize` from UglifyJSPlugin.
+
 ## 1.3.1
 
 Updated dependencies

README.md

@@ -1,18 +1,17 @@
 # img-loader
 
-Image minimizing loader for webpack, 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)
+[![npm Version][npm-image]][npm]
+[![Greenkeeper badge][greenkeeper-image]][greenkeeper]
+[![Build Status][build-image]][build]
 
-> Minify PNG, JPEG, GIF and SVG images with [imagemin](https://github.com/imagemin/imagemin)
+[![JS Standard Style][style-image]][style]
+[![MIT License][license-image]][LICENSE]
 
-*Issues with the minimized output should be reported [to imagemin](https://github.com/imagemin/imagemin/issues).*
+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)
 
-Comes with the following optimizers:
+> Minify PNG, JPEG, GIF and SVG images with [imagemin](https://github.com/imagemin/imagemin) [plugins](https://www.npmjs.com/search?q=keywords:imageminplugin)
 
-- [gifsicle](https://github.com/imagemin/imagemin-gifsicle) — *Compress GIF images*
-- [jpegtran](https://github.com/imagemin/imagemin-jpegtran) — *Compress JPEG images*
-- [optipng](https://github.com/imagemin/imagemin-optipng) — *Compress PNG images*
-- [pngquant](https://github.com/imagemin/imagemin-pngquant) — *Compress PNG images*
-- [svgo](https://github.com/imagemin/imagemin-svgo) — *Compress SVG images*
+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
@@ -24,112 +23,162 @@ $ npm install img-loader --save-dev
 
 ## Usage
 
-[Documentation: Using loaders](http://webpack.github.io/docs/using-loaders.html)
+[Documentation: Using loaders](https://webpack.js.org/concepts/loaders/)
 
-``` javascript
-var url = require('file!img!./file.png');
+```javascript
+module: {
+  rules: [
+    {
+      test: /\.(jpe?g|png|gif|svg)$/i,
+      use: [
+        'url-loader?limit=10000',
+        'img-loader'
+      ]
+    }
+  ]
+}
 ```
 
-By default the minification is run when webpack is run in production mode (or whenever the UglifyJsPlugin is used).
-
-The default minification includes:
+By default the loader simply passes along the image unmodified.
 
-- `gifsicle` with `interlaced: false`
-- `jpegtran` with `progressive: false`
-- `optipng` with `optimizationLevel: 2`
-- `svgo` with default plugins
 
-`pngquant` is disabled by default, and can be enabled by configuring it in the advanced options.
+### 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.
 
-### Query Parameters
+For more details on each plugin's options, see their documentation on [Github](https://github.com/imagemin).
 
-These are common options you can specify in the `require` or `loaders` config.
-
-* `minimize` - Minify regardless of webpack mode.
-* `optimizationLevel` Select an optipng optimization level between `0` and `7`.
-* `progressive` Convert to jpg and gif to progressive.
-
-``` javascript
-require('img?optimizationLevel=5');
-require('img?progressive=true');
-require('img?minimize&optimizationLevel=5&progressive=true');
-require('img?-minimize'); // makes the loader a simple passthrough
+```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 }
+                  ]
+                })
+              ]
+            }
+          }
+        ]
+      }
+    ]
+  }
+}
 ```
 
-``` javascript
+`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: {
-    loaders: [
-      { test: /\.(jpe?g|png|gif|svg)$/i, loader: 'url?limit=10000!img?progressive=true' }
+    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')
+                        }
+                      }
+                    ]
+                  })
+                ]
+              }
+            }
+          }
+        ]
+      }
     ]
   }
 }
 ```
 
-#### optimizationLevel *(png)*
-
-Shortcut for [optipng `optimizationLevel`](https://github.com/imagemin/imagemin-optipng), which determines the number of trials.
+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:
 
-#### progressive *(jpg, gif)*
+```js
+{
+  loader: 'img-loader',
+  options: {
+    plugins: process.env.NODE_ENV === 'production' && [
+      require('imagemin-svgo')({})
+      // etc.
+    ]
+  }
+}
+```
 
-Shortcut to enable [jpegtran `progressive`](https://github.com/imagemin/imagemin-jpegtran) and enable [gifsicle `interlace`](https://github.com/imagemin/imagemin-gifsicle) for progressive rendering.
 
+## Migrating from 2.x
 
-### Advanced Options
+To get the default behavior from version `2.0.1`, you'll need to install these imagemin plugins:
 
-Advanced options can also be passed by specifying an `imagemin` property on your webpack config object. Each optimizer will be passed the corresponding property on the `imagemin` object as options.
+* [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)
 
-Any options specified this way override basic `optimizationLevel` and `progressive` options set. For more details on each plugin's options, see their documentation on [Github](https://github.com/imagemin).
+Then use this loader setup in your webpack configuration file:
 
-``` javascript
+```js
 {
-  module: {
-    loaders: [
-      { test: /\.(jpe?g|png|gif|svg)$/i, loaders: [ 'url?limit=10000', 'img?minimize' ] }
+  loader: 'img-loader',
+  options: {
+    plugins: [
+      require('imagemin-gifsicle')({}),
+      require('imagemin-mozjpeg')({}),
+      require('imagemin-optipng')({}),
+      require('imagemin-svgo')({})
     ]
-  },
-  imagemin: {
-    gifsicle: { interlaced: false },
-    jpegtran: {
-      progressive: true,
-      arithmetic: false
-    },
-    optipng: { optimizationLevel: 5 },
-    pngquant: {
-      floyd: 0.5,
-      speed: 2
-    },
-    svgo: {
-      plugins: [
-        { removeTitle: true },
-        { convertPathData: false }
-      ]
-    }
   }
 }
 ```
 
-If you need to define two different loader configs, you can also change the config's property name via `img?config=otherConfig`:
+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.
 
-``` javascript
-{
-  module: {
-    loaders: [
-      { test: /\.svg$/i, loaders: [ 'url?limit=10000', 'img?config=svgOpts' ] }
-    ]
-  },
-  svgOpts: {
-    svgo: {
-      plugins: [
-        { removeTitle: true },
-        { convertPathData: false }
-      ]
-    }
-  }
-}
-```
 
 ## License
 
-This software is free to use under the MIT license. See the [LICENSE-MIT file](https://github.com/thetalecrafter/img-loader/blob/master/LICENSE-MIT) for license text and copyright information.
+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
+[greenkeeper-image]: https://badges.greenkeeper.io/thetalecrafter/img-loader.svg
+[greenkeeper]: https://greenkeeper.io/
+[build]: https://travis-ci.org/thetalecrafter/img-loader
+[build-image]: https://img.shields.io/travis/thetalecrafter/img-loader.svg
+[style]: https://github.com/feross/standard
+[style-image]: https://img.shields.io/badge/code%20style-standard-brightgreen.svg
+[license-image]: https://img.shields.io/npm/l/img-loader.svg
+[LICENSE]: https://github.com/thetalecrafter/img-loader/blob/master/LICENSE-MIT

__tests__/index.spec.js

@@ -1,29 +1,51 @@
+/* eslint-env mocha */
 'use strict'
-
 var assert = require('assert')
-var loader = require('..')
+var fs = require('fs')
+var path = require('path')
+var gifsicle = require('imagemin-gifsicle')
+var svgo = require('imagemin-svgo')
+var run = require('./run-webpack')
+
+var fixtureGif = fs.readFileSync(path.resolve(__dirname, './fixture.gif'))
+var fixtureSvg = fs.readFileSync(path.resolve(__dirname, './fixture.svg'))
+
+describe('img-loader', () => {
+  it('passes the img though unchanged by default', function () {
+    return run('./fixture.gif').then(function (image) {
+      assert(image.equals(fixtureGif), 'gif should be unchanged')
+    })
+  })
+
+  it('can apply optimizations for gif', function () {
+    return run('./fixture.gif', {
+      plugins: [ gifsicle({}) ]
+    }).then(function (image) {
+      assert(!image.equals(fixtureGif), 'gif should be changed')
+      assert(image.length < fixtureGif.length, 'optimized gif should be smaller')
+    })
+  })
 
-describe('img-loader', function () {
-  it('passes content through unmodified without minimize option', function () {
-    var img = new Buffer('<svg></svg>', 'utf8')
-    var context = { loader: loader, options: {} }
-    context.async = function () {
-      assert.fail('should not call async')
-    }
-    var buffer = context.loader(img)
-    assert.equal(buffer, img)
+  it('can apply optimizations for svg', function () {
+    return run('./fixture.svg', {
+      plugins: [ svgo({}) ]
+    }).then(function (image) {
+      assert(!image.equals(fixtureSvg), 'svg should be changed')
+      assert(image.length < fixtureSvg.length, 'optimized svg should be smaller')
+      assert.equal(image.toString('utf8'), '<svg/>')
+    })
   })
 
-  it('optimizes svg images', function (done) {
-    var img = new Buffer('<svg><g><path d="M0 0" /></g></svg>', 'utf8')
-    var context = { loader: loader, options: {}, minimize: true }
-    context.async = function () {
-      return function (error, buffer) {
-        if (error) return done(error)
-        assert.equal(buffer.toString(), '<svg/>')
-        done()
+  it('can use a function for plugins', function () {
+    var context
+    return run('./fixture.svg', {
+      plugins: function (ctx) {
+        context = ctx
+        return [ svgo({}) ]
       }
-    }
-    context.loader(img)
+    }).then(function (image) {
+      assert.equal(path.basename(context.resourcePath), 'fixture.svg')
+      assert(image.length < fixtureSvg.length, 'optimized svg should be smaller')
+    })
   })
 })