Preliminary V3.0.0 with support for webpack-dev-server and path hashes

iampava · Dec 27, 2018 · 7409e6f · 7409e6f
1 parent 5415c98
commit 7409e6f
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 53 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "imagemin-webp-webpack-plugin",
-    "version": "2.0.1",
+    "version": "3.0.0",
     "description": "Webpack plugin which converts images to the WebP format while also keeping the original files.",
     "author": {
         "name": "Alexandru Pavaloi",
@@ -20,7 +20,7 @@
     "bugs": "https://github.com/iampava/imagemin-webp-webpack-plugin/issues",
     "homepage": "https://github.com/iampava/imagemin-webp-webpack-plugin",
     "dependencies": {
-        "imagemin": "^6.0.0",
+        "imagemin": "^6.1.0",
         "imagemin-webp": "^5.0.0"
     }
 }
diff --git a/plugin.js b/plugin.js
@@ -1,11 +1,13 @@
 const imagemin = require('imagemin');
 const webp = require('imagemin-webp');
-const fs = require('fs');
+
+const GREEN = '\x1b[32m%s\x1b[0m';
+const RED = '\x1b[31m%s\x1b[0m';
 
 class ImageminWebpWebpackPlugin {
     constructor({
         config = [{
-            test: /\.(jpe?g|png)$/,
+            test: /\.(jpe?g|png)/,
             options: {
                 quality: 75
             }
@@ -19,42 +21,40 @@ class ImageminWebpWebpackPlugin {
     }
 
     apply(compiler) {
-        compiler.hooks.afterEmit.tapAsync('ImageminWebpWebpackPlugin', (compilation, cb) => {
+        compiler.hooks.emit.tapAsync('ImageminWebpWebpackPlugin', (compilation, cb) => {
             let assetNames = Object.keys(compilation.assets);
-            let path = compilation.options.output.path;
             let nrOfImagesFailed = 0;
 
             Promise.all(assetNames.map(name => {
                 for (let i = 0; i < this.config.length; i++) {
                     if (this.config[i].test.test(name)) {
-                        let outputFolder = name
-                            .split('/')
-                            .slice(0, -1)
-                            .join('/');
+                        let nameWithoutExtension = name.split(".").slice(0, -1).join(".");
+                        let currentAsset = compilation.assets[name];
 
-                        return imagemin([`${path}/${name}`], `${path}/${outputFolder}`, {
+                        return imagemin.buffer(currentAsset.source(), {
                             plugins: [webp(this.config[i].options)]
-                        }).then(resp => {
-                            let path = resp[0].path;
-                            if (path.indexOf(".webp") === path.length - 5 && path.length >= 5) {
-                                let stats = fs.statSync(path);
-                                let savedKB = Math.round((compilation.assets[name].size() - stats.size) / 1000);
-
-                                if (this.detailedLogs) {
-                                    console.log('\x1b[32m%s\x1b[0m', `${savedKB} KB saved from ${path}`);
-                                }
+                        }).then((buffer) => {
+                            let savedKB = (currentAsset.size() - buffer.length) / 1000;
 
-                                return savedKB;
-                            } else {
-                                throw new Error(`ImageminWebpWebpackPlugin: "${name}" wasn't converted, most likely because the conversion would result in a bigger file!`);
+                            if (this.detailedLogs) {
+                                console.log(GREEN, `${savedKB.toFixed(1)} KB saved from '${name}'`);
                             }
+
+                            compilation.assets[`${nameWithoutExtension}.webp`] = {
+                                source: () => buffer,
+                                size: () => buffer.length
+                            };
+
+                            return savedKB;
                         }).catch(err => {
+                            let customErr = new Error(`ImageminWebpWebpackPlugin: "${name}" wasn't converted, most likely because the conversion would result in a bigger file!`);
+
                             nrOfImagesFailed++;
 
                             if (this.strict) {
-                                compilation.errors.push(err);
+                                compilation.errors.push(err, customErr);
                             } else if (this.detailedLogs) {
-                                compilation.warnings.push(err);
+                                compilation.warnings.push(err, customErr);
                             }
 
                             return 0;
@@ -65,15 +65,14 @@ class ImageminWebpWebpackPlugin {
             })).then(savedKBArr => {
                 let totalKBSaved = savedKBArr.reduce((acc, cur) => acc + cur, 0);
 
-                console.log(
-                    '\x1b[32m%s\x1b[0m',
-                    `imagemin-webp-webpack-plugin: ${Math.floor(totalKBSaved / 100) / 10} MB saved`
-                );
+                if (totalKBSaved < 100) {
+                    console.log(GREEN, `imagemin-webp-webpack-plugin: ${Math.floor(totalKBSaved)} KB saved`);
+                } else {
+                    console.log(GREEN, `imagemin-webp-webpack-plugin: ${Math.floor(totalKBSaved / 100) / 10} MB saved`);
+                }
+
                 if (nrOfImagesFailed > 0) {
-                    console.log(
-                        '\x1b[31m%s\x1b[0m',
-                        `imagemin-webp-webpack-plugin: ${nrOfImagesFailed} images failed to convert to webp`
-                    );
+                    console.log(RED, `imagemin-webp-webpack-plugin: ${nrOfImagesFailed} images failed to convert to webp`);
                 }
                 cb();
             });