generate manifest and compress images

package.json

@@ -1,14 +1,16 @@
 {
   "dependencies": {
-    "copy-webpack-plugin": "^5.1.0",
+    "copy-webpack-plugin": "^5.1.1",
     "elm-webpack-loader": "^6.0.1",
     "html-webpack-plugin": "^3.2.0",
+    "imagemin-webpack-plugin": "^2.4.2",
     "jsdom": "^15.2.1",
     "prerender-spa-plugin": "^3.4.0",
     "tempy": "^0.3.0",
-    "terser-webpack-plugin": "^2.3.0",
+    "terser-webpack-plugin": "^2.3.1",
-    "webpack": "^4.41.2",
+    "webpack": "^4.41.4",
     "webpack-cli": "^3.3.10",
+    "webpack-manifest-plugin": "^2.2.0",
     "workbox-webpack-plugin": "^4.3.1"
   },
   "name": "wand-front-utils",

webpack.config.js

@@ -5,6 +5,8 @@ const PrerenderSPAPlugin = require('prerender-spa-plugin')
 const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
 const CopyPlugin = require('copy-webpack-plugin')
 const { InjectManifest } = require('workbox-webpack-plugin')
+const ManifestPlugin = require('webpack-manifest-plugin')
+const ImageminPlugin = require('imagemin-webpack-plugin').default
 const { JSDOM } = require('jsdom')
 const tempy = require('tempy')
 const fs = require('fs')
@@ -27,77 +29,83 @@ const jsMin = {
   mangle: true,
 }
 
-module.exports =
+module.exports = {
-  {
+  output: {
-    output: {
+    filename: "main.js",
-      filename: "main.js",
+    path: path.join(__dirname, "dist"),
-      path: path.join(__dirname, "dist"),
+    publicPath: "/"
-      publicPath: "/"
+  },
-    },
+  module: {
-    module: {
+    rules: [{
-      rules: [{
+      test: /\.elm$/,
-        test: /\.elm$/,
+      exclude: [/elm-stuff/, /node_modules/],
-        exclude: [/elm-stuff/, /node_modules/],
+      loader: 'elm-webpack-loader',
-        loader: 'elm-webpack-loader',
+      options: {
-        options: {
+        optimize: true
-          optimize: true
+      }
-        }
+    }],
-      }],
+  },
-    },
+  plugins: [
-    plugins: [
+    new ManifestPlugin(),
-      new TerserPlugin({
+    new ImageminPlugin({
-        terserOptions: jsMin,
+      disable: false,
-      }),
+      pngquant: {
-      new HtmlWebpackPlugin({
+        quality: '95-100'
-        hash: true,
+      }
-        meta: {
+    }),
-          viewport: 'width=device-width, initial-scale=1'
+    new TerserPlugin({
-        }
+      terserOptions: jsMin,
-      }),
+    }),
-      new CopyPlugin([{ from: 'data', to: 'data' }, { from: 'wand.js', to: 'wand.js' }]),
+    new HtmlWebpackPlugin({
-      new PrerenderSPAPlugin({
+      hash: true,
-        staticDir: path.join(__dirname, 'dist'),
+      meta: {
-        routes: ROUTES,
+        viewport: 'width=device-width, initial-scale=1'
-        minify: {
+      }
-          minifyCSS: {
+    }),
-            compatibility: 'ie9',
+    new CopyPlugin([{ from: 'data', to: 'data' }, { from: 'wand.js', to: 'wand.js' }]),
-            level: 2
+    new PrerenderSPAPlugin({
-          },
+      staticDir: path.join(__dirname, 'dist'),
-          minifyJS: jsMin,
+      routes: ROUTES,
-
+      minify: {
-          collapseBooleanAttributes: true,
+        minifyCSS: {
-          collapseWhitespace: true,
+          compatibility: 'ie9',
-          removeRedundantAttributes: true,
+          level: 2
-          removeScriptTypeAttributes: true,
-          removeStyleLinkTypeAttributes: true,
-
-          removeComments: true,
-          sortAttributes: true,
-          sortClassName: true,
         },
-        renderer: new Renderer({
+        minifyJS: jsMin,
-          renderAfterTime: 500,
+
-        }),
+        collapseBooleanAttributes: true,
-        postProcess(renderedRoute) {
+        collapseWhitespace: true,
-          const dom = new JSDOM(renderedRoute.html, { runScripts: 'outside-only' })
+        removeRedundantAttributes: true,
-          dom.window.eval(`
+        removeScriptTypeAttributes: true,
+        removeStyleLinkTypeAttributes: true,
+
+        removeComments: true,
+        sortAttributes: true,
+        sortClassName: true,
+      },
+      renderer: new Renderer({
+        renderAfterTime: 500,
+      }),
+      postProcess(renderedRoute) {
+        const dom = new JSDOM(renderedRoute.html, { runScripts: 'outside-only' })
+        dom.window.eval(`
             const wandTarget = document.createElement('script')
             wandTarget.src = '/wand.js'
             document.body.appendChild(wandTarget)
           `)
-          return {
+        return {
-            ...renderedRoute,
+          ...renderedRoute,
-            html: dom.serialize(),
+          html: dom.serialize(),
-          }
+        }
-        },
+      },
-      }),
+    }),
-      new InjectManifest({
+    new InjectManifest({
-        importWorkboxFrom: 'local',
+      importWorkboxFrom: 'local',
-        swSrc: magicFile(`
+      swSrc: magicFile(`
           workbox.routing.registerNavigationRoute('/index.html');
           workbox.precaching.precacheAndRoute(self.__precacheManifest);
         `),
-        swDest: 'sw.js',
+      swDest: 'sw.js',
-      }),
+    }),
-    ]
+  ]
-  }
+}