Frontend: Update package information and webpack config.

Frontend/package.json

@@ -13,20 +13,23 @@
   },
   "author": "AMIV IT team",
   "dependencies": {
-    "babel": "^6.23.0",
-    "babel-core": "^6.26.0",
-    "babel-loader": "^7.1.2",
-    "babel-preset-env": "^1.6.1",
-    "compression-webpack-plugin": "^1.0.1",
     "local-storage": "^1.4.2",
-    "mithril": "^1.1.5",
-    "uglifyjs-webpack-plugin": "^1.0.1",
-    "webpack": "^3.8.1"
+    "mithril": "^1.1.5"
   },
   "devDependencies": {
     "eslint": "^4.10.0",
     "eslint-config-airbnb-base": "^12.1.0",
     "eslint-plugin-import": "^2.8.0",
-    "webpack-dev-server": "^2.9.3"
+    "webpack-dev-server": "^2.9.3",
+    "babel-core": "^6.26.0",
+    "babel-cli": "^6.26.0",
+    "babel-loader": "^7.1.2",
+    "babel-preset-env": "^1.6.1",
+    "compression-webpack-plugin": "^1.0.1",
+    "file-loader": "^1.1.5",
+    "css-loader": "^0.28.7",
+    "style-loader": "^0.19.0",
+    "uglifyjs-webpack-plugin": "^1.0.1",
+    "webpack": "^3.8.1"
   }
 }

Frontend/webpack.config.js

-var webpack = require('webpack');
-
-var config = {
-    context: __dirname + '/src', // `__dirname` is root of project and `src` is source
-
-    entry: './index.js',
-
-    output: {
-        path: __dirname + '/dist', // `dist` is the destination
-        filename: 'bundle.js'
-    },
-
-    //To run development server
-    devServer: {
-        contentBase: __dirname,
-        publicPath: '/dist',
-        compress: true,
-        port: 9000,
-        hot: true,
-        index: "index.html"
-    },
-
-    module: {
-        rules: [
-            {
-                test: /\.js$/, // Check for all js files
-                exclude: /node_modules/,
-                use: [{
-                    loader: 'babel-loader',
-                    options: { presets: ['env'] }
-                }]
-            }
-        ]
-    },
-
-    devtool: "eval-source-map" // Default development sourcemap
+const publicPath = '/dist';
+
+const config = {
+  context: `${__dirname}/src`, // `__dirname` is root of project
+
+  entry: './index.js',
+
+  output: {
+    path: `${__dirname}/dist`, // `dist` is the destination
+    filename: 'bundle.js',
+  },
+
+  // To run development server
+  devServer: {
+    contentBase: __dirname,
+    publicPath,
+    compress: true,
+    port: 9000,
+    hot: true,
+    index: 'index.html',
+  },
+
+  module: {
+    rules: [
+      {
+        test: /\.js$/, // Check for all js files
+        exclude: /node_modules/,
+        use: [{
+          loader: 'babel-loader',
+          options: { presets: ['env'] },
+        }],
+      },
+      {
+        test: /\.(png|jpe?g|gif|svg)$/,
+        use: [
+          {
+            loader: 'file-loader',
+            options: {
+              useRelativePath: true,
+              publicPath,
+            },
+          },
+        ],
+      },
+      {
+        test: /\.css$/,
+        use: ['style-loader', 'css-loader'],
+      },
+    ],
+
+  },
+
+  devtool: 'eval-source-map', // Default development sourcemap
 };
 
 module.exports = config;

Frontend/webpack.config.prod.js

-var webpack = require('webpack');
-var CompressionPlugin = require('compression-webpack-plugin');
-
-var config = {
-    context: __dirname + '/src', // `__dirname` is root of project and `src` is source
-
-    entry: './index.js',
-
-    output: {
-        path: __dirname + '/dist', // `dist` is the destination
-        filename: 'bundle.js'
-    },
-
-    //To run development server
-    devServer: {
-        contentBase: __dirname,
-        publicPath: '/dist',
-        compress: true,
-        port: 9000,
-        hot: true,
-        index: "index.html"
-    },
-
-    module: {
-        rules: [
-            {
-                test: /\.js$/, // Check for all js files
-                exclude: /node_modules/,
-                use: [{
-                    loader: 'babel-loader',
-                    options: { presets: ['env'] }
-                }]
-            }
-        ]
-    },
-
-    plugins: [
-        new webpack.optimize.UglifyJsPlugin(),
-        new webpack.optimize.AggressiveMergingPlugin(),
-        new CompressionPlugin({
-            asset: "[path].gz[query]",
-            algorithm: "gzip",
-            test: /\.js$|\.css$|\.html$/,
-            threshold: 10240,
-            minRatio: 0.8
-        })
-    ],
-
-    devtool: "" // No source map for production build
-};
-
-module.exports = config;
\ No newline at end of file
+const webpack = require('webpack');
+const CompressionPlugin = require('compression-webpack-plugin');
+
+// Start with dev config
+const config = require('./webpack.config.js');
+
+// Remove development server and code map
+config.devServer = undefined;
+config.devtool = '';
+
+// Add optimization plugins
+config.plugins = [
+  new webpack.optimize.UglifyJsPlugin(),
+  new webpack.optimize.AggressiveMergingPlugin(),
+  new CompressionPlugin({
+    asset: '[path].gz[query]',
+    algorithm: 'gzip',
+    test: /\.js$|\.css$|\.html$/,
+    threshold: 10240,
+    minRatio: 0.8,
+  }),
+];
+
+module.exports = config;