diff --git a/ui/package.json b/ui/package.json
index 9c4907ba4..59595bc03 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -42,7 +42,7 @@
   "devDependencies": {
     "babel": "^6.5.2",
     "babel-core": "^6.18.2",
-    "babel-loader": "^6.2.8",
+    "babel-loader": "^6.4.1",
     "babel-plugin-react-require": "^3.0.0",
     "babel-polyfill": "^6.20.0",
     "babel-preset-es2015": "^6.18.0",
@@ -59,7 +59,7 @@
     "lint-staged": "^3.6.0",
     "node-sass": "^3.13.0",
     "prettier": "^1.4.2",
-    "webpack": "^1.13.3",
+    "webpack": "^2.6.1",
     "webpack-dev-server": "^2.4.4",
     "webpack-notifier": "^1.5.0",
     "webpack-target-electron-renderer": "^0.4.0",
diff --git a/ui/webpack.config.js b/ui/webpack.config.js
index 59c2fd6d5..b0ab6f08a 100644
--- a/ui/webpack.config.js
+++ b/ui/webpack.config.js
@@ -1,23 +1,23 @@
-const path = require('path');
-const webpack = require('webpack')
-const appPath = path.resolve(__dirname, 'js');
+const path = require("path");
+const webpack = require("webpack")
+const appPath = path.resolve(__dirname, "js");
 
 const PATHS = {
-  app: path.join(__dirname, 'app'),
-  dist: path.join(__dirname, 'dist')
+  app: path.join(__dirname, "app"),
+  dist: path.join(__dirname, "dist")
 };
 
 module.exports = {
-  entry: ['babel-polyfill', './js/main.js'],
+  entry: ["babel-polyfill", "./js/main.js"],
   output: {
-    path: path.join(PATHS.dist, 'js'),
-    publicPath: '/js/',
+    path: path.join(PATHS.dist, "js"),
+    publicPath: "/js/",
     filename: "bundle.js"
   },
-  devtool: 'source-map',
+  devtool: "source-map",
   resolve: {
-    root: appPath,
-    extensions: ['', '.js', '.jsx', '.css'],
+    modules: [appPath, "node_modules"],
+    extensions: [".js", ".jsx", ".css"]
   },
   plugins: [
     new webpack.DefinePlugin({
@@ -25,29 +25,30 @@ module.exports = {
     }),
   ],
   module: {
-    preLoaders: [
+    rules: [
       {
         test: /\.jsx?$/,
-        loaders: ['eslint'],
+        enforce: "pre",
+        loaders: ["eslint"],
         // define an include so we check just the files we need
         include: PATHS.app
-      }
-    ],
-    loaders: [
-      { test: /\.css$/, loader: "style!css" },
+      },
+      {
+        test: /\.css$/,
+        use: ["style-loader", "css-loader"]
+      },
       {
         test: /\.jsx?$/,
-        loader: 'babel',
-        query: {
-          cacheDirectory: true,
-          presets:[ 'es2015', 'react', 'stage-2' ]
+        exclude: /node_modules/,
+        use: {
+          loader: "babel-loader",
+          options: {
+            cacheDirectory: true,
+            presets: [ "es2015", "react", "stage-2" ]
+          }
         }
-      },
-      {
-        test: /mime\.json$/,
-        loader: 'json',
-      },
+      }
     ]
   },
-  target: 'electron-main',
-};
\ No newline at end of file
+  target: "electron-main",
+};
diff --git a/ui/webpack.dev.config.js b/ui/webpack.dev.config.js
index 232f6dcc3..42107a3c5 100644
--- a/ui/webpack.dev.config.js
+++ b/ui/webpack.dev.config.js
@@ -1,59 +1,62 @@
-const path = require('path');
-const webpack = require('webpack')
-const WebpackNotifierPlugin = require('webpack-notifier')
+const path = require("path");
+const webpack = require("webpack")
+const WebpackNotifierPlugin = require("webpack-notifier")
 
-const appPath = path.resolve(__dirname, 'js');
+const appPath = path.resolve(__dirname, "js");
 
 const PATHS = {
-  app: path.join(__dirname, 'app'),
-  dist: path.join(__dirname, '..', 'app', 'dist')
+  app: path.join(__dirname, "app"),
+  dist: path.join(__dirname, "..", "app", "dist")
 };
 
 module.exports = {
-  entry: ['babel-polyfill', './js/main.js'],
+  entry: ["babel-polyfill", "./js/main.js"],
   output: {
-    path: path.join(PATHS.dist, 'js'),
-    publicPath: '/js/',
+    path: path.join(PATHS.dist, "js"),
+    publicPath: "/js/",
     filename: "bundle.js",
     pathinfo: true
   },
-  debug: true,
   cache: true,
-  devtool: 'eval',
+  devtool: "eval",
   resolve: {
-    root: appPath,
-    extensions: ['', '.js', '.jsx', '.css'],
+    modules: [appPath, "node_modules"],
+    extensions: [".js", ".jsx", ".css"]
   },
   plugins: [
     new WebpackNotifierPlugin(),
     new webpack.DefinePlugin({
       ENV: JSON.stringify("development"),
     }),
+    new webpack.LoaderOptionsPlugin({
+      debug: true
+    })
   ],
   module: {
-    preLoaders: [
+    rules: [
       {
         test: /\.jsx?$/,
-        loaders: ['eslint'],
+        enforce: "pre",
+        loaders: ["eslint"],
         // define an include so we check just the files we need
         include: PATHS.app
-      }
-    ],
-    loaders: [
-      { test: /\.css$/, loader: "style!css" },
+      },
+      {
+        test: /\.css$/,
+        use: ["style-loader", "css-loader"]
+      },
       {
         test: /\.jsx?$/,
-        loader: 'babel',
-        query: {
-          cacheDirectory: true,
-          presets:[ 'es2015', 'react', 'stage-2' ]
+        exclude: /node_modules/,
+        use: {
+          loader: "babel-loader",
+          options: {
+            cacheDirectory: true,
+            presets: [ "es2015", "react", "stage-2" ]
+          }
         }
-      },
-      {
-        test: /mime\.json$/,
-        loader: 'json',
-      },
+      }
     ]
   },
-  target: 'electron-main',
-};
\ No newline at end of file
+  target: "electron-main",
+};