Webpack 5 support (#38)

.gitignore

@@ -1,4 +1,8 @@
 node_modules/
 test-project/node_modules/
 test-project/dist/
-test-project/plugin.js
+test-project/plugin.js
+
+test-project-webpack5/node_modules/
+test-project-webpack5/dist/
+test-project-webpack5/plugin.js

README.md

@@ -1,7 +1,7 @@
 # imagemin-webp-webpack-plugin
 
 
-**Webpack** plugin which converts images to the [WebP](https://developers.google.com/speed/webp/) format while also keeping the original files. Built for **webpack 4** but should work in previous versions as well.
+**Webpack** plugin which converts images to the [WebP](https://developers.google.com/speed/webp/) format while also keeping the original files. Compatible with **webpack 5**, **webpack 4** and previous versions as well.
 
 
 It uses [imagemin](https://www.npmjs.com/package/imagemin), [imagemin-webp](https://www.npmjs.com/package/imagemin-webp) and [imagemin-gif2webp](https://www.npmjs.com/package/imagemin-gif2webp) under the hood.
@@ -13,7 +13,7 @@ Although WebP images are not currently supported in all browsers, they are at le
 
 Check the support tables on [Can I use](https://caniuse.com/#feat=webp)
 
- 
+
 ## Installation
 
 
@@ -122,12 +122,28 @@ By default the webpack build will fail if any of the images that match your RegE
 
 This option tells the plugin to not crash the build and keep going :)
 
+## Compatibility & known issues
+
+Recently we updated this plugin to make it compatible with **webpack 5**. Originally it was built for **webpack 4** and earlier versions, so I expect it would be compatible no matter the project :)
+
+However, there is a known issue with `css-loader@latest` where importing `.webp` images will fail because they don't exist prior the build time. For example this CSS code:
+
+```
+body {
+  backgrund-image: url('/assets/cover.webp')
+}
+```
+
+will fail since initially only `cover.jpg` exists, and `cover.webp` is created dynamically by this Plugin. 
+
+Please read some more about this [here](https://github.com/iampava/imagemin-webp-webpack-plugin/issues/56) and upvote [the issue](https://github.com/iampava/imagemin-webp-webpack-plugin/issues/56) if you want me to implement a fix :D
+
 
 ## Other mentions
 
 * it doesn't re-convert images while developing
 * if you change the actual image but keep the name, somehow `webpack` is smart enough to detect this and it will re-convert just that image
-* there's a [test-project](https://github.com/iampava/imagemin-webp-webpack-plugin/tree/master/test-project) included in this repo for easy testing and tweaking of the plugin (in case you find bugs)
+* there are  2 projects used to test if/how this plugin works in **webpack 5** and **webpack 4**. The projects are: [test-project](https://github.com/iampava/imagemin-webp-webpack-plugin/tree/master/test-project) and [test-project-webpack5](https://github.com/iampava/imagemin-webp-webpack-plugin/tree/master/test-project-webpack5).
 
 <hr/>
 

plugin.js

@@ -64,11 +64,8 @@ class ImageminWebpWebpackPlugin {
                                     if (this.detailedLogs && !this.silent) {
                                         console.log(GREEN, `${savedKB.toFixed(1)} KB saved from '${name}'`);
                                     }
-                                    compilation.assets[outputName] = {
-                                        source: () => buffer,
-                                        size: () => buffer.length
-                                    };
 
+                                    emitAsset(outputName, buffer, compilation);
                                     return savedKB;
                                 })
                                 .catch(err => {
@@ -107,13 +104,42 @@ class ImageminWebpWebpackPlugin {
             });
         };
 
-        if (compiler.hooks) {
-            // webpack 4.x
-            compiler.hooks.emit.tapAsync('ImageminWebpWebpackPlugin', onEmit);
-        } else {
-            // older versions
-            compiler.plugin('emit', onEmit);
-        }
+        hookPlugin(compiler, onEmit);
+    }
+}
+
+function hookPlugin(compiler, onEmit) {
+    if (compiler.hooks && compiler.hooks.thisCompilation && compiler.hooks.processAssets) {
+        // webpack 5.x
+        compiler.hooks.thisCompilation.tap('ImageminWebpWebpackPlugin', compilation => {
+            compilation.hooks.processAssets.tapAsync({
+                name: 'ImageminWebpWebpackPlugin',
+                stage: compiler.webpack.Compilation.PROCESS_ASSETS_STAGE_SUMMARIZE
+            }, (assets, cb) => onEmit(compilation, cb));
+        })
+    }
+    else if (compiler.hooks) {
+        // webpack 4.x
+        compiler.hooks.emit.tapAsync('ImageminWebpWebpackPlugin', onEmit);
+    } else {
+        // older versions
+        compiler.plugin('emit', onEmit);
+    }
+}
+
+function emitAsset(name, buffer, compilation) {
+    if (compilation.emitAsset) {
+        // webpack 5.x
+        compilation.emitAsset(name, {
+            source: () => buffer,
+            size: () => buffer.length
+        })
+    } else {
+        // webpack 4.x & 3.x
+        compilation.assets[outputName] = {
+            source: () => buffer,
+            size: () => buffer.length
+        };
     }
 }