rewrite for webpack 2

vanwagonet · vanwagonet · commit fcf22938ae39 · 2017-03-14T14:30:14.000-06:00
diff --git a/.travis.yml b/.travis.yml
@@ -1,4 +1,4 @@
 language: node_js
 node_js:
-- '4.1'
+- '4.8'
 - stable
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,10 @@
 # Changelog
 
+## 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
diff --git a/README.md b/README.md
@@ -1,13 +1,13 @@
 # img-loader
 
-[![Greenkeeper badge](https://badges.greenkeeper.io/thetalecrafter/img-loader.svg)](https://greenkeeper.io/)
-
 [![npm Version][npm-image]][npm]
+[![Greenkeeper badge][greenkeeper-image]][greenkeeper]
 [![Build Status][build-image]][build]
+
 [![JS Standard Style][style-image]][style]
 [![MIT License][license-image]][LICENSE]
 
-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)
+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)
 
 > Minify PNG, JPEG, GIF and SVG images with [imagemin](https://github.com/imagemin/imagemin)
 
@@ -16,7 +16,7 @@ Image minimizing loader for webpack, meant to be used with [url-loader](https://
 Comes with the following optimizers:
 
 - [gifsicle](https://github.com/imagemin/imagemin-gifsicle) — *Compress GIF images*
-- [jpegtran](https://github.com/imagemin/imagemin-jpegtran) — *Compress JPEG images*
+- [mozjpeg](https://github.com/imagemin/imagemin-mozjpeg) — *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*
@@ -33,116 +33,79 @@ $ npm install img-loader --save-dev
 
 [Documentation: Using loaders](http://webpack.github.io/docs/using-loaders.html)
 
-``` javascript
-var url = require('file!img!./file.png');
-```
-
-By default the minification is run when webpack is run in production mode (or whenever the UglifyJsPlugin is used).
-
-The default minification includes:
-
-- `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.
-
-
-### Query Parameters
-
-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
-```
-
-``` javascript
-{
-  module: {
-    loaders: [
-      { test: /\.(jpe?g|png|gif|svg)$/i, loader: 'url?limit=10000!img?progressive=true' }
-    ]
-  }
+```javascript
+module: {
+  rules: [
+    {
+      test: /\.(jpe?g|png|gif|svg)$/i,
+      use: [
+        'url-loader?limit=10000',
+        'img-loader'
+      ]
+    }
+  ]
 }
 ```
 
-#### optimizationLevel *(png)*
-
-Shortcut for [optipng `optimizationLevel`](https://github.com/imagemin/imagemin-optipng), which determines the number of trials.
+The default minification includes: `gifsicle`, `mozjpeg`, `optipng`, & `svgo`. Each with their default settings.
 
-#### progressive *(jpg, gif)*
+`pngquant` can be enabled by configuring it in the options.
 
-Shortcut to enable [jpegtran `progressive`](https://github.com/imagemin/imagemin-jpegtran) and enable [gifsicle `interlace`](https://github.com/imagemin/imagemin-gifsicle) for progressive rendering.
 
+### Options
 
-### Advanced Options
+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.
 
-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.
-
-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).
+For more details on each plugin's options, see their documentation on [Github](https://github.com/imagemin).
 
 ``` javascript
 {
   module: {
-    loaders: [
-      { test: /\.(jpe?g|png|gif|svg)$/i, loaders: [ 'url?limit=10000', 'img?minimize' ] }
+    rules: [
+      {
+        test: /\.(jpe?g|png|gif|svg)$/i,
+        use: [
+          'url-loader?limit=10000',
+          {
+            loader: 'img-loader',
+            options: {
+              enabled: process.env.NODE_ENV === 'production',
+              gifsicle: {
+                interlaced: false
+              },
+              mozjpeg: {
+                progressive: true,
+                arithmetic: false
+              },
+              optipng: false, // disabled
+              pngquant: {
+                floyd: 0.5,
+                speed: 2
+              },
+              svgo: {
+                plugins: [
+                  { removeTitle: true },
+                  { convertPathData: false }
+                ]
+              }
+            }
+          }
+        ]
+      }
     ]
-  },
-  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`:
-
-``` 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][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
diff --git a/__tests__/index.spec.js b/__tests__/index.spec.js
@@ -4,27 +4,49 @@
 var assert = require('assert')
 var loader = require('..')
 
-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)
-  })
+describe('img-loader', () => {
+  describe('svgo', () => {
+    it('optimizes svg images by default', (done) => {
+      var img = new Buffer('<svg><g><path d="M0 0" /></g></svg>', 'utf8')
+      var context = {
+        loader,
+        async () {
+          return (error, buffer) => {
+            if (error) return done(error)
+            assert.equal(buffer.toString(), '<svg/>')
+            done()
+          }
+        }
+      }
+      context.loader(img)
+    })
+
+    it('passes content through when whole loader disabled', () => {
+      var img = new Buffer('<svg></svg>', 'utf8')
+      var context = {
+        loader,
+        query: { enabled: false },
+        async () {
+          assert.fail('should not call async')
+        }
+      }
+      assert.equal(context.loader(img), img)
+    })
 
-  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('does not optimize when plugin disabled', (done) => {
+      var img = new Buffer('<svg></svg>', 'utf8')
+      var context = {
+        loader,
+        query: { svgo: false },
+        async () {
+          return (error, buffer) => {
+            if (error) return done(error)
+            assert.equal(buffer.toString(), '<svg></svg>')
+            done()
+          }
+        }
       }
-    }
-    context.loader(img)
+      context.loader(img)
+    })
   })
 })
diff --git a/index.js b/index.js
@@ -2,51 +2,47 @@
 
 var imagemin = require('imagemin')
 var imageminGifsicle = require('imagemin-gifsicle')
-var imageminJpegtran = require('imagemin-jpegtran')
+var imageminMozjpeg = require('imagemin-mozjpeg')
 var imageminOptipng = require('imagemin-optipng')
 var imageminPngquant = require('imagemin-pngquant')
 var imageminSvgo = require('imagemin-svgo')
 var loaderUtils = require('loader-utils')
-var assign = require('object-assign')
+
+var defaults = {
+  enabled: true,
+  gifsicle: {},
+  mozjpeg: {},
+  optipng: {},
+  svgo: {}
+}
 
 module.exports = function (content) {
   this.cacheable && this.cacheable()
 
-  var options = loaderUtils.getLoaderConfig(this, 'imagemin')
-  var minimize = ('minimize' in options) ? options.minimize : this.minimize
-  if (!minimize) {
+  var options = Object.assign(
+    Object.create(defaults),
+    loaderUtils.getOptions(this)
+  )
+  if (!options.enabled) {
     return content
   }
 
-  var progressive = options.progressive || false
-  var optimizationLevel = options.optimizationLevel || 2
-
   var use = [
-    imageminGifsicle(assign({
-      interlaced: progressive
-    }, options.gifsicle)),
-    imageminJpegtran(assign({
-      progressive: progressive
-    }, options.jpegtran)),
-    imageminOptipng(assign({
-      optimizationLevel: optimizationLevel
-    }, options.optipng)),
-    imageminSvgo(assign({
-    }, options.svgo))
-  ]
-  if (options.pngquant) {
-    use.push(imageminPngquant(assign({
-    }, options.pngquant)))
+    options.gifsicle && imageminGifsicle(options.gifsicle),
+    options.mozjpeg && imageminMozjpeg(options.mozjpeg),
+    options.optipng && imageminOptipng(options.optipng),
+    options.svgo && imageminSvgo(options.svgo),
+    options.pngquant && imageminPngquant(options.pngquant)
+  ].filter(Boolean)
+  if (use.length === 0) {
+    return content
   }
+
   var callback = this.async()
   imagemin
     .buffer(content, { use: use })
-    .then(function (buffer) {
-      callback(null, buffer)
-    })
-    .catch(function (error) {
-      callback(error)
-    })
+    .then(function (buffer) { callback(null, buffer) })
+    .catch(function (error) { callback(error) })
 }
 
 module.exports.raw = true
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "img-loader",
-  "version": "1.3.1",
+  "version": "2.0.0",
   "description": "Image minimizing loader for webpack",
   "keywords": [
     "image",
@@ -25,14 +25,13 @@
   },
   "homepage": "https://github.com/thetalecrafter/img-loader",
   "dependencies": {
-    "imagemin": "^5.0.0",
-    "imagemin-gifsicle": "^5.0.0",
-    "imagemin-jpegtran": "^5.0.0",
-    "imagemin-optipng": "^5.0.0",
+    "imagemin": "^5.2.0",
+    "imagemin-gifsicle": "^5.1.0",
+    "imagemin-mozjpeg": "^6.0.0",
+    "imagemin-optipng": "^5.2.0",
     "imagemin-pngquant": "^5.0.0",
-    "imagemin-svgo": "^5.0.0",
-    "loader-utils": "^0.2.15",
-    "object-assign": "^4.0.0"
+    "imagemin-svgo": "^5.2.0",
+    "loader-utils": "^1.0.4"
   },
   "devDependencies": {
     "mocha": "^3.0.0",
