heavy optimization - generate jpgs to l.pngs

default.nix

@@ -178,6 +178,9 @@ let
       patchPhase = ''
         ln -sf ${nodeSource}/node_modules .
         cp ${webpackConfigFile} webpack.config.js
+        cp ${
+          ./imagemin-jpgify-webpack-plugin.js
+        } .imagemin-jpgify-webpack-plugin.js
         cp ${wandInit} wand.js
         cp ${templateHtml} template.html
       '';
@@ -188,6 +191,9 @@ let
         rm -f wand.js
         rm -f template.html
         cp ${webpackConfigFile} webpack.config.js
+        cp ${
+          ./imagemin-jpgify-webpack-plugin.js
+        } .imagemin-jpgify-webpack-plugin.js
         cp ${wandInit} wand.js
         cp ${templateHtml} template.html
         export NODE_PATH=$PWD/node_modules

package.json

@@ -1,19 +1,21 @@
 {
   "dependencies": {
     "copy-webpack-plugin": "^5.1.1",
-    "css-loader": "^3.4.2",
+    "css-loader": "^3.5.2",
     "elm-hot-webpack-loader": "^1.1.6",
     "elm-webpack-loader": "^6.0.1",
     "favicons-webpack-plugin": "^1.0.2",
     "html-loader": "^0.5.5",
     "html-webpack-plugin": "^3.2.0",
+    "imagemin": "^7.0.1",
     "imagemin-webp-webpack-plugin": "^3.3.1",
     "imagemin-webpack-plugin": "^2.4.2",
     "jsdom": "^15.2.1",
-    "style-loader": "^1.1.3",
+    "png-to-jpeg": "^1.0.1",
+    "style-loader": "^1.1.4",
     "tempy": "^0.3.0",
     "terser-webpack-plugin": "^2.3.5",
-    "webpack": "^4.41.6",
+    "webpack": "^4.42.1",
     "webpack-cli": "^3.3.11",
     "webpack-dev-server": "^3.10.3",
     "workbox-webpack-plugin": "^4.3.1"

webpack.config.js

@@ -5,6 +5,7 @@ const CopyPlugin = require('copy-webpack-plugin')
 const { InjectManifest } = require('workbox-webpack-plugin')
 const ImageminPlugin = require('imagemin-webpack-plugin').default
 const ImageminWebpWebpackPlugin = require('imagemin-webp-webpack-plugin')
+const ImageminJpegifyWebpackPlugin = require('./.imagemin-jpgify-webpack-plugin.js')
 const FaviconsWebpackPlugin = require('favicons-webpack-plugin')
 const { JSDOM } = require('jsdom')
 const tempy = require('tempy')
@@ -59,25 +60,26 @@ const productionPlugins = [
         `),
     swDest: 'sw.js',
   }),
+  // TODO: build .l.pngs into jpgs
   new ImageminPlugin({
     jpegtran: { progressive: true },
     svgo: null,
   }),
   new ImageminWebpWebpackPlugin({
     config: [{
-      test: /\.jpe?g/,
+      test: /\.jpe?g$/,
       options: {
         force: true,
         quality: 75
       }
     }, {
-      test: /\.l\.png/,
+      test: /\.l\.png$/,
       options: {
         force: true,
         quality: 75
       }
     }, {
-      test: /\.png/,
+      test: /\.png$/,
       options: {
         force: true,
         lossless: true
@@ -88,6 +90,19 @@ const productionPlugins = [
     silent: true,
     strict: true,
   }),
+  new ImageminJpegifyWebpackPlugin({
+    config: [{
+      test: /\.l\.png$/,
+      options: {
+        force: true,
+        quality: 50
+      }
+    }],
+    overrideExtension: false,
+    detailedLogs: false,
+    silent: true,
+    strict: true,
+  }),
   new FaviconsWebpackPlugin({
     logo: path.join(__dirname, 'data', 'images', 'icon.png'),
     inject: false, // manually in our template for now cos its fuckd