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.

package.json

@@ -4,13 +4,14 @@
     "url": "https://github.com/scottlamb/moonfire-nvr/issues"
   },
   "scripts": {
-    "clean": "scripts/clean.sh",
-    "build": "webpack && ln -f ui-src/index.html ui-dist/"
+    "start": "webpack-dev-server --mode development --config webpack/dev.config.js --progress",
+    "build": "webpack --mode production --config webpack/prod.config.js && cp ui-src/index.html ui-dist/"
   },
   "dependencies": {
     "jquery": "^3.2.1",
     "jquery-ui": "^1.12.1",
-    "moment-timezone": "^0.5.13"
+    "moment-timezone": "^0.5.13",
+    "webpack-merge": "^4.1.2"
   },
   "homepage": "https://github.com/scottlamb/moonfire-nvr",
   "license": "GPL-3.0",
@@ -19,12 +20,15 @@
   "version": "0.1.0",
   "devDependencies": {
     "babel-core": "^6.26.0",
-    "babel-loader": "^7.1.2",
-    "babel-minify-webpack-plugin": "^0.2.0",
+    "babel-loader": "^7.1.4",
+    "babel-minify-webpack-plugin": "^0.3.0",
     "babel-preset-env": "^1.6.1",
-    "css-loader": "^0.28.7",
-    "file-loader": "^1.1.5",
+    "clean-webpack-plugin": "^0.1.18",
+    "css-loader": "^0.28.10",
+    "file-loader": "^1.1.11",
     "style-loader": "^0.19.0",
-    "webpack": "3.8.1"
+    "webpack": "^4.0.1",
+    "webpack-cli": "^2.0.10",
+    "webpack-dev-server": "^3.1.0"
   }
 }

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, '../') }),
+  ],
+});