ui: Production optimization, basic babel config

ui/webpack.config.js

@@ -1,55 +1,70 @@
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const webpack = require('webpack')
 
-module.exports = {
-  mode: 'development',
-  output: {
-    filename: 'static/[name].js',
-    publicPath: '/',
-  },
-  module: {
-    rules: [
-      {
-        test: /\.elm$/,
-        exclude: [/elm-stuff/, /node_modules/],
-        use: [
-          { loader: 'elm-hot-webpack-loader' },
-          {
-            loader: 'elm-webpack-loader',
-            options: {
-              debug: true
-            },
-          },
-        ],
-      },
-      {
-        test: /\.css$/,
-        exclude: [/node_modules/],
-        loader: ['style-loader', 'css-loader'],
-      },
-    ]
-  },
-  plugins: [
-    new HtmlWebpackPlugin({
-      template: 'public/index.html',
-      favicon: 'public/favicon.png',
-    }),
-    new webpack.HotModuleReplacementPlugin(),
-  ],
-  devServer: {
-    inline: true,
-    historyApiFallback: true,
-    hot: true,
-    stats: { colors: true },
-    overlay: true,
-    open: true,
-    proxy: [{
-      context: ['/api', '/debug', '/serve'],
-      target: 'http://localhost:9000',
-      ws: true,
-    }],
-    watchOptions: {
-      ignored: /node_modules/,
+module.exports = (env, argv) => {
+  const production = argv.mode === 'production'
+  const config = {
+    output: {
+      filename: 'static/[name].js',
+      publicPath: '/',
     },
-  },
-};
+    module: {
+      rules: [
+        {
+          test: /\.js$/,
+          exclude: [/elm-stuff/, /node_modules/],
+          loader: 'babel-loader',
+          query: {
+            presets: [
+              '@babel/preset-env',
+            ],
+          },
+        },
+        {
+          test: /\.elm$/,
+          exclude: [/elm-stuff/, /node_modules/],
+          use: [
+            { loader: 'elm-hot-webpack-loader' },
+            {
+              loader: 'elm-webpack-loader',
+              options: {
+                debug: !production,
+                optimize: production,
+              },
+            },
+          ],
+        },
+        {
+          test: /\.css$/,
+          exclude: [/node_modules/],
+          loader: ['style-loader', 'css-loader'],
+        },
+      ]
+    },
+    plugins: [
+      new HtmlWebpackPlugin({
+        template: 'public/index.html',
+        favicon: 'public/favicon.png',
+      }),
+    ],
+    devServer: {
+      inline: true,
+      historyApiFallback: true,
+      stats: { colors: true },
+      overlay: true,
+      open: true,
+      proxy: [{
+        context: ['/api', '/debug', '/serve'],
+        target: 'http://localhost:9000',
+        ws: true,
+      }],
+      watchOptions: {
+        ignored: /node_modules/,
+      },
+    },
+  }
+  if (argv.hot) {
+    config.plugins.push(new webpack.HotModuleReplacementPlugin())
+  }
+  return config
+}