more dev friendly I think

package.json

@@ -1,6 +1,7 @@
 {
   "dependencies": {
     "copy-webpack-plugin": "^5.1.1",
+    "elm-hot-webpack-loader": "^1.1.6",
     "elm-webpack-loader": "^6.0.1",
     "favicons-webpack-plugin": "^1.0.2",
     "html-loader": "^0.5.5",
@@ -12,8 +13,8 @@
     "terser-webpack-plugin": "^2.3.4",
     "webpack": "^4.41.6",
     "webpack-cli": "^3.3.11",
-    "workbox-webpack-plugin": "^4.3.1",
+    "webpack-dev-server": "^3.10.3",
-    "webpack-dev-server": "^3.10.3"
+    "workbox-webpack-plugin": "^4.3.1"
   },
   "name": "wand-front-utils",
   "version": "1.0.0",

pnpm-lock.yaml

@@ -1,5 +1,6 @@
 dependencies:
   copy-webpack-plugin: 5.1.1_webpack@4.41.6
+  elm-hot-webpack-loader: 1.1.6_elm-webpack-loader@6.0.1
   elm-webpack-loader: 6.0.1
   favicons-webpack-plugin: 1.0.2_webpack@4.41.6
   html-loader: 0.5.5
@@ -2408,6 +2409,19 @@ packages:
     dev: false
     resolution:
       integrity: sha512-f4x70okzZbIQl/NSRLkI/+tteV/9WqL98zx+SQ69KbXxmVrmjwsNUPn/gYJJ0sHvEak24cZgHIPegRePAtA/xw==
+  /elm-hot-webpack-loader/1.1.6_elm-webpack-loader@6.0.1:
+    dependencies:
+      elm-hot: 1.1.4
+      elm-webpack-loader: 6.0.1
+    dev: false
+    peerDependencies:
+      elm-webpack-loader: ^6.0.0
+    resolution:
+      integrity: sha512-fY+36uG8/h/PvlO2HZSXBa6qGNkVCwn+QjoL/5WWHOocf7EfYAYFgJlWQqsgNQi/eYO4/dt/OglRuSsFfkFvtA==
+  /elm-hot/1.1.4:
+    dev: false
+    resolution:
+      integrity: sha512-qPDP/o/Fkifriaxaf3E7hHFB5L6Ijihyg8is4A6xna6/h/zebUiNssbQrxywI2oxNUkr6W/leEu/WlIC1tmVnw==
   /elm-webpack-loader/6.0.1:
     dependencies:
       glob: 7.1.6
@@ -8359,6 +8373,7 @@ packages:
       integrity: sha1-lSj0QtqxsihOWLQ3m7GU4i4MQAU=
 specifiers:
   copy-webpack-plugin: ^5.1.1
+  elm-hot-webpack-loader: ^1.1.6
   elm-webpack-loader: ^6.0.1
   favicons-webpack-plugin: ^1.0.2
   html-loader: ^0.5.5

webpack.config.js

@@ -76,7 +76,53 @@ prerenderOpts = (width, height, name) => ({
   }
 })
 
-module.exports = {
+const productionPlugins = [
+  new PrerenderSPAPlugin(prerenderOpts(1920, 1080, 'desktop')),
+  new PrerenderSPAPlugin(prerenderOpts(375, 667, 'phone')),
+  new PrerenderSPAPlugin(prerenderOpts(768, 1024, 'tablet')),
+  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);
+        `),
+    swDest: 'sw.js',
+  }),
+  new ImageminPlugin({
+    jpegtran: { progressive: true },
+    svgo: null,
+  }),
+];
+
+let plugins = [
+  new CopyPlugin([{ from: 'data', to: 'data' }, { from: 'wand.js', to: 'wand.js' }]),
+  new HtmlWebpackPlugin({
+    hash: true,
+    inject: true,
+    minify: htmlMin,
+    template: './template.html',
+    meta: {
+      viewport: 'width=360, initial-scale=1, maximum-scale=1'
+    }
+  }),
+  new FaviconsWebpackPlugin({
+    logo: path.join(__dirname, 'data', 'images', 'icon.png'),
+    inject: false, // manually in our template for now cos its fuckd
+    mode: 'webapp',
+    prefix: 'appdata',
+    favicons: {
+      appName: PRETTY_NAME,
+      appDescription: DESCRIPTION,
+      background: BACKGROUND_COLOR,
+      theme_color: THEME_COLOR,
+    }
+  }),
+];
+
+module.exports = (env, argv) => ({
   target: 'web',
   externals: {
     svgo: 'svgo'
@@ -98,10 +144,15 @@ module.exports = {
       {
         test: /\.elm$/,
         exclude: [/elm-stuff/, /node_modules/],
-        loader: 'elm-webpack-loader',
+        use: [
-        options: {
+          { loader: 'elm-hot-webpack-loader' },
-          optimize: true
+          {
-        }
+            loader: 'elm-webpack-loader',
+            options: {
+              optimize: argv.mode == 'production'
+            },
+          },
+        ],
       },
       {
         test: /\.html$/,
@@ -114,106 +165,11 @@ module.exports = {
     ],
   },
   optimization: {
-    minimize: true,
+    minimize: argv.mode == 'production',
     minimizer: [
       new TerserPlugin({ terserOptions: jsMin }),
       new TerserPlugin({ terserOptions: jsMin }),
     ],
   },
-  plugins: [
+  plugins: [...plugins, ...(argv.mode == 'production' ? productionPlugins : [])],
-    new CopyPlugin([{ from: 'data', to: 'data' }, { from: 'wand.js', to: 'wand.js' }]),
+})
-    new ImageminPlugin({
-      jpegtran: { progressive: true },
-      svgo: null,
-      // svgo: {
-      //   full: true,
-      //   plugins: [
-      //     { 'removeDoctype': { className: 'removeDoctype', attributes: [] } },
-      //     { 'removeXMLProcInst': { className: 'removeXMLProcInst', attributes: [] } },
-      //     { 'removeComments': { className: 'removeComments', attributes: [] } },
-      //     { 'removeMetadata': { className: 'removeMetadata', attributes: [] } },
-      //     { 'removeXMLNS': { className: 'removeXMLNS', attributes: [] } },
-      //     { 'removeEditorsNSData': { className: 'removeEditorsNSData', attributes: [] } },
-      //     { 'cleanupAttrs': { className: 'cleanupAttrs', attributes: [] } },
-      //     { 'inlineStyles': { className: 'inlineStyles', attributes: [] } },
-      //     { 'minifyStyles': { className: 'minifyStyles', attributes: [] } },
-      //     { 'convertStyleToAttrs': { className: 'convertStyleToAttrs', attributes: [] } },
-      //     { 'cleanupIDs': { className: 'cleanupIDs', attributes: [] } },
-      //     { 'prefixIds': { className: 'prefixIds', attributes: [] } },
-      //     { 'removeRasterImages': { className: 'removeRasterImages', attributes: [] } },
-      //     { 'removeUselessDefs': { className: 'removeUselessDefs', attributes: [] } },
-      //     { 'cleanupNumericValues': { className: 'cleanupNumericValues', attributes: [] } },
-      //     { 'cleanupListOfValues': { className: 'cleanupListOfValues', attributes: [] } },
-      //     { 'convertColors': { className: 'convertColors', attributes: [] } },
-      //     { 'removeUnknownsAndDefaults': { className: 'removeUnknownsAndDefaults', attributes: [] } },
-      //     { 'removeNonInheritableGroupAttrs': { className: 'removeNonInheritableGroupAttrs', attributes: [] } },
-      //     { 'removeUselessStrokeAndFill': { className: 'removeUselessStrokeAndFill', attributes: [] } },
-      //     { 'removeViewBox': { className: 'removeViewBox', attributes: [] } },
-      //     { 'cleanupEnableBackground': { className: 'cleanupEnableBackground', attributes: [] } },
-      //     { 'removeHiddenElems': { className: 'removeHiddenElems', attributes: [] } },
-      //     { 'removeEmptyText': { className: 'removeEmptyText', attributes: [] } },
-      //     { 'convertShapeToPath': { className: 'convertShapeToPath', attributes: [] } },
-      //     { 'convertEllipseToCircle': { className: 'convertEllipseToCircle', attributes: [] } },
-      //     { 'moveElemsAttrsToGroup': { className: 'moveElemsAttrsToGroup', attributes: [] } },
-      //     { 'moveGroupAttrsToElems': { className: 'moveGroupAttrsToElems', attributes: [] } },
-      //     { 'collapseGroups': { className: 'collapseGroups', attributes: [] } },
-      //     { 'convertPathData': { className: 'convertPathData', attributes: [] } },
-      //     { 'convertTransform': { className: 'convertTransform', attributes: [] } },
-      //     { 'removeEmptyAttrs': { className: 'removeEmptyAttrs', attributes: [] } },
-      //     { 'removeEmptyContainers': { className: 'removeEmptyContainers', attributes: [] } },
-      //     { 'mergePaths': { className: 'mergePaths', attributes: [] } },
-      //     { 'removeUnusedNS': { className: 'removeUnusedNS', attributes: [] } },
-      //     { 'sortAttrs': { className: 'sortAttrs', attributes: [] } },
-      //     { 'sortDefsChildren': { className: 'sortDefsChildren', attributes: [] } },
-      //     { 'removeTitle': { className: 'removeTitle', attributes: [] } },
-      //     { 'removeDesc': { className: 'removeDesc', attributes: [] } },
-      //     { 'removeDimensions': { className: 'removeDimensions', attributes: [] } },
-      //     { 'removeAttrs': { className: 'removeAttrs', attributes: [] } },
-      //     { 'removeAttributesBySelector': { className: 'removeAttributesBySelector', attributes: [] } },
-      //     { 'removeElementsByAttr': { className: 'removeElementsByAttr', attributes: [] } },
-      //     { 'addClassesToSVGElement': { className: 'addClassesToSVGElement', attributes: [] } },
-      //     { 'removeStyleElement': { className: 'removeStyleElement', attributes: [] } },
-      //     { 'removeScriptElement': { className: 'removeScriptElement', attributes: [] } },
-      //     { 'addAttributesToSVGElement': { className: 'addAttributesToSVGElement', attributes: [] } },
-      //     { 'removeOffCanvasPaths': { className: 'removeOffCanvasPaths', attributes: [] } },
-      //     { 'reusePaths': { className: 'reusePaths', attributes: [] } },
-      //   ]
-      // },
-    }),
-    new HtmlWebpackPlugin({
-      hash: true,
-      inject: true,
-      minify: htmlMin,
-      template: './template.html',
-      meta: {
-        viewport: 'width=360, initial-scale=1, maximum-scale=1'
-      }
-    }),
-    new FaviconsWebpackPlugin({
-      logo: path.join(__dirname, 'data', 'images', 'icon.png'),
-      inject: false, // manually in our template for now cos its fuckd
-      mode: 'webapp',
-      prefix: 'appdata',
-      favicons: {
-        appName: PRETTY_NAME,
-        appDescription: DESCRIPTION,
-        background: BACKGROUND_COLOR,
-        theme_color: THEME_COLOR,
-      }
-    }),
-    new PrerenderSPAPlugin(prerenderOpts(1920, 1080, 'desktop')),
-    new PrerenderSPAPlugin(prerenderOpts(375, 667, 'phone')),
-    new PrerenderSPAPlugin(prerenderOpts(768, 1024, 'tablet')),
-    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);
-        `),
-      swDest: 'sw.js',
-    }),
-  ]
-}