ui: Production optimization, basic babel config

ui/package.json

@@ -6,11 +6,14 @@
   "scripts": {
     "build": "webpack --mode production",
     "watch": "webpack --mode development --watch",
-    "dev": "webpack-dev-server --mode development --port 3000",
+    "dev": "webpack-dev-server --mode development --port 3000 --hot",
     "errors": "webpack --mode development --display-error-details"
   },
   "dependencies": {},
   "devDependencies": {
+    "@babel/core": "^7.1.6",
+    "@babel/preset-env": "^7.1.6",
+    "babel-loader": "^8.0.4",
     "css-loader": "^1.0.1",
     "elm-hot-webpack-loader": "^1.0.2",
     "elm-webpack-loader": "^5.0.0",

ui/src/Main.elm

@@ -154,11 +154,10 @@ update msg model =
                 )
 
             UpdateSession (Err error) ->
-                let
+                ( model
-                    _ =
+                , Cmd.none
-                        Debug.log "Error decoding session" error
+                , Session.SetFlash ("Error decoding session: " ++ D.errorToString error)
-                in
+                )
-                ( model, Cmd.none, Session.none )
 
             MailboxNameInput name ->
                 ( { model | mailboxName = name }, Cmd.none, Session.none )

ui/webpack.config.js

@@ -1,55 +1,70 @@
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const webpack = require('webpack')
 
-module.exports = {
+module.exports = (env, argv) => {
-  mode: 'development',
+  const production = argv.mode === 'production'
-  output: {
+  const config = {
-    filename: 'static/[name].js',
+    output: {
-    publicPath: '/',
+      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: {
-};
+      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
+}