move imagemin to peer, plugin loading to client, and test with webpack 4

vanwagonet · vanwagonet · commit f0a263912595 · 2018-04-26T14:56:17.000-06:00
diff --git a/.travis.yml b/.travis.yml
@@ -1,4 +1,4 @@
 language: node_js
 node_js:
-- '4.8'
+- 'lts/*'
 - stable
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # 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
diff --git a/README.md b/README.md
@@ -7,19 +7,11 @@
 [![JS Standard Style][style-image]][style]
 [![MIT License][license-image]][LICENSE]
 
-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)
+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)
 
-> Minify PNG, JPEG, GIF and SVG images with [imagemin](https://github.com/imagemin/imagemin)
+> Minify PNG, JPEG, GIF and SVG images with [imagemin](https://github.com/imagemin/imagemin) [plugins](https://www.npmjs.com/search?q=keywords:imageminplugin)
 
-*Issues with the minimized output should be reported [to imagemin](https://github.com/imagemin/imagemin/issues).*
-
-Comes with the following optimizers:
-
-- [gifsicle](https://github.com/imagemin/imagemin-gifsicle) — *Compress GIF 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*
+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
@@ -47,18 +39,56 @@ module: {
 }
 ```
 
-The default minification includes: `gifsicle`, `mozjpeg`, `optipng`, & `svgo`. Each with their default settings.
-
-`pngquant` can be enabled by configuring it in the options.
+By default the loader simply passes along the image unmodified.
 
 
 ### 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.
+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.
 
 For more details on each plugin's options, see their documentation on [Github](https://github.com/imagemin).
 
-``` javascript
+```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 }
+                  ]
+                })
+              ]
+            }
+          }
+        ]
+      }
+    ]
+  }
+}
+```
+
+`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: {
     rules: [
@@ -69,23 +99,19 @@ For more details on each plugin's options, see their documentation on [Github](h
           {
             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 }
+              plugins (context) {
+                if (process.env.NODE_ENV === 'production') return []
+                return [
+                  require('imagemin-svgo')({
+                    plugins: [
+                      { cleanupIDs: false },
+                      {
+                        prefixIds: {
+                          prefix: path.basename(context.resourcePath, 'svg')
+                        }
+                      }
+                    ]
+                  })
                 ]
               }
             }
diff --git a/__tests__/fixture.gif b/__tests__/fixture.gif
diff --git a/__tests__/fixture.svg b/__tests__/fixture.svg
@@ -0,0 +1 @@
+<svg><g><path d="M0 0" /></g></svg>
diff --git a/__tests__/index.spec.js b/__tests__/index.spec.js
@@ -1,53 +1,51 @@
 /* eslint-env mocha */
 'use strict'
-
 var assert = require('assert')
-var Buffer = require('safe-buffer').Buffer
-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', () => {
-  describe('svgo', () => {
-    it('optimizes svg images by default', (done) => {
-      var img = Buffer.from('<svg><g><path d="M0 0" /></g></svg>')
-      var context = {
-        loader,
-        async () {
-          return (error, buffer) => {
-            if (error) return done(error)
-            assert.equal(buffer.toString(), '<svg/>')
-            done()
-          }
-        }
-      }
-      context.loader(img)
+  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('passes content through when whole loader disabled', () => {
-      var img = Buffer.from('<svg></svg>')
-      var context = {
-        loader,
-        query: { enabled: false },
-        async () {
-          assert.fail('should not call async')
-        }
-      }
-      assert.equal(context.loader(img), img)
+  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')
     })
+  })
+
+  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('does not optimize when plugin disabled', (done) => {
-      var img = Buffer.from('<svg></svg>')
-      var context = {
-        loader,
-        query: { svgo: false },
-        async () {
-          return (error, buffer) => {
-            if (error) return done(error)
-            assert.equal(buffer.toString(), '<svg></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')
     })
   })
 })
diff --git a/__tests__/run-webpack.js b/__tests__/run-webpack.js
@@ -0,0 +1,39 @@
+'use strict'
+var path = require('path')
+var webpack = require('webpack')
+var MemoryFS = require('memory-fs')
+
+module.exports = function (entry, options) {
+  var compiler = webpack({
+    context: __dirname,
+    entry: entry,
+    output: {
+      path: path.resolve(__dirname),
+      filename: 'bundle.js'
+    },
+    mode: 'none',
+    module: {
+      rules: [{
+        test: /./,
+        use: [
+          {
+            loader: 'file-loader',
+            options: {
+              name: 'image'
+            }
+          },
+          {
+            loader: path.resolve(__dirname, '../index.js'),
+            options: options
+          }
+        ]
+      }]
+    }
+  })
+  compiler.outputFileSystem = new MemoryFS()
+  return new Promise(function (resolve, reject) {
+    compiler.run(function (error, stats) {
+      return error ? reject(error) : resolve(stats.compilation.assets.image.source())
+    })
+  })
+}
diff --git a/index.js b/index.js
@@ -1,46 +1,19 @@
 'use strict'
-
 var imagemin = require('imagemin')
-var imageminGifsicle = require('imagemin-gifsicle')
-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 defaults = {
-  enabled: true,
-  gifsicle: {},
-  mozjpeg: {},
-  optipng: {},
-  svgo: {}
-}
-
-module.exports = function (content) {
-  this.cacheable && this.cacheable()
-
-  var options = Object.assign(
-    Object.create(defaults),
-    loaderUtils.getOptions(this)
-  )
-  if (!options.enabled) {
-    return content
+module.exports = function (content, map, meta) {
+  var options = Object.assign({}, loaderUtils.getOptions(this))
+  if (typeof options.plugins === 'function') {
+    options.plugins = options.plugins(this)
   }
-
-  var use = [
-    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) {
+  if (!Array.isArray(options.plugins) || options.plugins.length === 0) {
     return content
   }
 
   var callback = this.async()
   imagemin
-    .buffer(content, { use: use })
+    .buffer(content, options)
     .then(function (buffer) { callback(null, buffer) })
     .catch(function (error) { callback(error) })
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json

-Original file line number
+Diff line change
+{
   "name": "img-loader",
 -  "version": "2.0.1",
 -  "description": "Image minimizing loader for webpack",
 +  "version": "3.0.0",
 +  "description": "Image minimizing loader for webpack 4",
   "keywords": [
     "image",
     "imagemin",
   },
   "author": {
     "name": "Andy VanWagoner",
 -    "email": "thetalecrafter@gmail.com"
 +    "email": "andy@thetalecrafter.com"
   },
   "license": "MIT",
   "bugs": {
     "url": "https://github.com/thetalecrafter/img-loader/issues"
   },
   "homepage": "https://github.com/thetalecrafter/img-loader",
   "dependencies": {
 -    "imagemin": "^5.3.1",
 -    "imagemin-gifsicle": "^5.2.0",
 -    "imagemin-mozjpeg": "^7.0.0",
 -    "imagemin-optipng": "^5.2.0",
 -    "imagemin-pngquant": "^5.0.1",
 -    "imagemin-svgo": "^6.0.0",
     "loader-utils": "^1.1.0"
   },
 +  "peerDependencies": {
 +    "imagemin": "^5.0.0"
 +  },
   "devDependencies": {
 +    "file-loader": "^1.1.11",
 +    "imagemin": "^5.3.1",
 +    "imagemin-gifsicle": "^5.2.0",
 +    "imagemin-svgo": "^6.0.0",
 +    "memory-fs": "^0.4.1",
     "mocha": "^5.0.0",
 -    "safe-buffer": "^5.1.1",
 -    "standard": "^11.0.0"
 +    "standard": "^11.0.0",
 +    "webpack": "^4.6.0"
   },
   "scripts": {
     "pretest": "standard",