Changes to allow active development of UI using webpack and hotloading. (#22)

* Changes to allow active development of UI using webpack and hotloading.

* Update to webpack 4 (will make this work)
* Update webpack.config.js accordingly
* Move webpack.config.js to its own directory
* Split webpack.config.js into base.config.js, dev.config.js and prod.config.js
* Update configs to be "right" for development vs production using --mode

* Want configuration through (optional) local file that is not
  checked in

* Updated package.json for newer babel-loader

* Put in a proxy to localhost port 8080 for evelopment server.

This allows "yarn start" to work on the machine where MoonFire's
server is running. This would be the default situation. Users in
a different setup can change the proxy settings.

webpack/base.config.js

@@ -0,0 +1,42 @@
+const path = require('path');
+const webpack = require('webpack');
+
+
+const project_root = path.join(__dirname, '../');
+const src_dir = path.join(project_root, 'ui-src');
+const dist_dir = path.join(project_root, 'ui-dist');
+
+module.exports = {
+  entry: {
+    nvr: path.join(src_dir, 'index.js'),
+  },
+  output: {
+    filename: 'bundle.js',
+    path: path.resolve(dist_dir),
+  },
+  module: {
+    rules: [{
+      test: /\.js$/,
+      loader: 'babel',
+      query: {
+        'presets': ['env', {}],
+      },
+      include: [path.resolve(__dirname, './ui-src'), path.resolve(__dirname, './ui-src/lib')],
+    }, {
+      test: /\.png$/,
+      use: ['file-loader'],
+    }, {
+      test: /\.css$/,
+      loader: 'style-loader!css-loader',
+    }],
+  },
+  plugins: [
+    new webpack.IgnorePlugin(/\.\/locale$/),
+    new webpack.NormalModuleReplacementPlugin(
+      /node_modules\/moment\/moment\.js$/,
+      './min/moment.min.js'),
+    new webpack.NormalModuleReplacementPlugin(
+      /node_modules\/moment-timezone\/index\.js$/,
+      './builds/moment-timezone-with-data-2012-2022.min.js'),
+  ],
+};

webpack/dev.config.js

@@ -0,0 +1,26 @@
+const path = require('path');
+const webpack = require('webpack');
+const merge = require('webpack-merge');
+
+const baseConfig = require('./base.config.js');
+
+module.exports = merge(baseConfig, {
+  devtool: 'inline-source-map',
+  devServer: {
+    contentBase: './ui-src',
+    historyApiFallback: true,
+    inline: true,
+    port: 3000,
+    hot: true,
+    clientLogLevel: 'info',
+    proxy: {
+	    '/api': 'http://localhost:8080'
+    }
+  },
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env.NODE_ENV': JSON.stringify('development'),
+    }),
+    new webpack.HotModuleReplacementPlugin(),
+  ],
+});

webpack/prod.config.js

@@ -0,0 +1,15 @@
+const path = require('path');
+const webpack = require('webpack');
+const merge = require('webpack-merge');
+const baseConfig = require('./base.config.js');
+
+const CleanWebpackPlugin = require('clean-webpack-plugin');
+
+module.exports = merge(baseConfig, {
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env.NODE_ENV': JSON.stringify('production'),
+    }),
+    new CleanWebpackPlugin(['ui-dist'], { root: path.resolve(__dirname, '../') }),
+  ],
+});