update webpack stuff

webpack.config.js

@@ -2,7 +2,7 @@ const path = require('path')
 const TerserPlugin = require('terser-webpack-plugin')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const CopyPlugin = require('copy-webpack-plugin')
-const { InjectManifest } = require('workbox-webpack-plugin')
+const { GenerateSW } = 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')
@@ -49,22 +49,18 @@ const htmlMin = {
 }
 
 const productionPlugins = [
-  new InjectManifest({
-    importWorkboxFrom: 'local',
-    swSrc: magicFile(`
-          workbox.core.skipWaiting();
-          workbox.core.clientsClaim();
-          workbox.precaching.cleanupOutdatedCaches()
-          workbox.routing.registerNavigationRoute('/index.html');
-          workbox.precaching.precacheAndRoute(self.__precacheManifest);
-        `),
+  new GenerateSW({
+    navigateFallback: '/index.html',
+    clientsClaim: true,
+    skipWaiting: true,
     swDest: 'sw.js',
   }),
-  // TODO: build .l.pngs into jpgs
+  // smallen images
   new ImageminPlugin({
     jpegtran: { progressive: true },
     svgo: null,
   }),
+  // make the webps (.l.png is for lossy)
   new ImageminWebpWebpackPlugin({
     config: [{
       test: /\.jpe?g$/,
@@ -90,6 +86,7 @@ const productionPlugins = [
     silent: true,
     strict: true,
   }),
+  // make jpgs out of .l.pngs too
   new ImageminJpegifyWebpackPlugin({
     config: [{
       test: /\.l\.png$/,