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,110 +76,29 @@ prerenderOpts = (width, height, name) => ({
   }
 })
 
-module.exports = {
+const productionPlugins = [
-  target: 'web',
+  new PrerenderSPAPlugin(prerenderOpts(1920, 1080, 'desktop')),
-  externals: {
+  new PrerenderSPAPlugin(prerenderOpts(375, 667, 'phone')),
-    svgo: 'svgo'
+  new PrerenderSPAPlugin(prerenderOpts(768, 1024, 'tablet')),
-  },
+  new InjectManifest({
-  entry: magicFile(`
+    importWorkboxFrom: 'local',
-    if ('serviceWorker' in navigator) {
+    swSrc: magicFile(`
-      window.addEventListener('load', () => navigator.serviceWorker.register('/sw.js'));
+          workbox.core.skipWaiting();
-    }
+          workbox.core.clientsClaim();
-
+          workbox.precaching.cleanupOutdatedCaches()
-    require('${process.env.PWD}/src/index.js')
+          workbox.routing.registerNavigationRoute('/index.html');
+          workbox.precaching.precacheAndRoute(self.__precacheManifest);
         `),
-  output: {
+    swDest: 'sw.js',
-    filename: 'main.js',
+  }),
-    path: path.join(__dirname, 'dist'),
-    publicPath: '/'
-  },
-  module: {
-    rules: [
-      {
-        test: /\.elm$/,
-        exclude: [/elm-stuff/, /node_modules/],
-        loader: 'elm-webpack-loader',
-        options: {
-          optimize: true
-        }
-      },
-      {
-        test: /\.html$/,
-        loader: 'html-loader',
-        options: {
-          minimize: true,
-          ...htmlMin
-        },
-      }
-    ],
-  },
-  optimization: {
-    minimize: true,
-    minimizer: [
-      new TerserPlugin({ terserOptions: jsMin }),
-      new TerserPlugin({ terserOptions: jsMin }),
-    ],
-  },
-  plugins: [
-    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: [] } },
-      //   ]
-      // },
   }),
+];
+
+let plugins = [
+  new CopyPlugin([{ from: 'data', to: 'data' }, { from: 'wand.js', to: 'wand.js' }]),
   new HtmlWebpackPlugin({
     hash: true,
     inject: true,
@@ -201,19 +120,56 @@ module.exports = {
       theme_color: THEME_COLOR,
     }
   }),
-    new PrerenderSPAPlugin(prerenderOpts(1920, 1080, 'desktop')),
+];
-    new PrerenderSPAPlugin(prerenderOpts(375, 667, 'phone')),
+
-    new PrerenderSPAPlugin(prerenderOpts(768, 1024, 'tablet')),
+module.exports = (env, argv) => ({
-    new InjectManifest({
+  target: 'web',
-      importWorkboxFrom: 'local',
+  externals: {
-      swSrc: magicFile(`
+    svgo: 'svgo'
-          workbox.core.skipWaiting();
+  },
-          workbox.core.clientsClaim();
+  entry: magicFile(`
-          workbox.precaching.cleanupOutdatedCaches()
+    if ('serviceWorker' in navigator) {
-          workbox.routing.registerNavigationRoute('/index.html');
+      window.addEventListener('load', () => navigator.serviceWorker.register('/sw.js'));
-          workbox.precaching.precacheAndRoute(self.__precacheManifest);
-        `),
-      swDest: 'sw.js',
-    }),
-  ]
     }
+
+    require('${process.env.PWD}/src/index.js')
+  `),
+  output: {
+    filename: 'main.js',
+    path: path.join(__dirname, 'dist'),
+    publicPath: '/'
+  },
+  module: {
+    rules: [
+      {
+        test: /\.elm$/,
+        exclude: [/elm-stuff/, /node_modules/],
+        use: [
+          { loader: 'elm-hot-webpack-loader' },
+          {
+            loader: 'elm-webpack-loader',
+            options: {
+              optimize: argv.mode == 'production'
+            },
+          },
+        ],
+      },
+      {
+        test: /\.html$/,
+        loader: 'html-loader',
+        options: {
+          minimize: true,
+          ...htmlMin
+        },
+      }
+    ],
+  },
+  optimization: {
+    minimize: argv.mode == 'production',
+    minimizer: [
+      new TerserPlugin({ terserOptions: jsMin }),
+      new TerserPlugin({ terserOptions: jsMin }),
+    ],
+  },
+  plugins: [...plugins, ...(argv.mode == 'production' ? productionPlugins : [])],
+})