diff --git a/.babelrc b/.babelrc
index 84b2eaa5..2359bbe0 100644
--- a/.babelrc
+++ b/.babelrc
@@ -1,5 +1,5 @@
 {
-  "presets": [["env", {
+  "presets": [["@babel/preset-env", {
       "targets": {
         "chrome": 45,
         "firefox": 42,
@@ -8,8 +8,8 @@
         "edge": 12,
         "iOS": 9
       },
-      "loose": true,
-      "useBuiltIns": true
+      "loose": false,
+      "useBuiltIns": "entry"
       }]
     ],
   "plugins": [
diff --git a/package.json b/package.json
index 7a6191a5..dbf9777a 100644
--- a/package.json
+++ b/package.json
@@ -13,9 +13,9 @@
     "build:watch": "webpack --watch"
   },
   "dependencies": {
-    "bootstrap": "^3.3.7",
-    "chart.js": "^1.0.2",
+    "bootstrap": "^3",
     "eonasdan-bootstrap-datetimepicker": "^4.17.47",
+    "chart.js": "^1",
     "jquery": "^3.3.1",
     "jquery-ui": "^1.11.2",
     "moment": "^2.8.2",
@@ -24,19 +24,21 @@
     "select2-bootstrap-theme": "0.1.0-beta.10"
   },
   "devDependencies": {
-    "babel-core": "^6.26.0",
-    "babel-loader": "^7.1.2",
-    "babel-preset-env": "^1.6.1",
-    "css-loader": "^0.28.7",
-    "extract-text-webpack-plugin": "^3.0.2",
-    "file-loader": "^1.1.6",
+    "@babel/core": "^7.1.6",
+    "@babel/preset-env": "^7.1.6",
+    "babel-loader": "^8.0.4",
+    "css-loader": "^1.0.1",
+    "file-loader": "^2.0.0",
     "imports-loader": "^0.8.0",
     "less": "^3.0.2",
     "less-loader": "^4.0.5",
+    "mini-css-extract-plugin": "^0.4.5",
     "mkdirp": "^0.5.1",
     "npm-run-all": "^4.1.3",
+    "optimize-css-assets-webpack-plugin": "^5.0.1",
     "rimraf": "^2.6.2",
-    "style-loader": "^0.21.0",
-    "webpack": "^3"
+    "style-loader": "^0.23.1",
+    "webpack": "^4.26.1",
+    "webpack-cli": "^3.1.2"
   }
 }
diff --git a/webpack.config.js b/webpack.config.js
index 010a9667..8f1021fe 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,6 +1,7 @@
 const path = require('path');
 const webpack = require('webpack');
-const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 const nodeEnv = (process.env.NODE_ENV || 'development').trim();
 
 // eslint-disable-next-line
@@ -14,7 +15,10 @@ const plugins = [
       NODE_ENV: JSON.stringify(nodeEnv),
     },
   }),
-  new ExtractTextPlugin('[name].css'),
+  new MiniCssExtractPlugin({
+    filename: '[name].css',
+    chunkFilename: '[id]-[hash].css',
+  }),
 ];
 
 
@@ -24,6 +28,7 @@ for (let i = 0; i < 8; i++) {
 }
 
 module.exports = {
+  mode: __DEV__ ? 'development' : 'production',
   context: __dirname,
   resolve: {
     extensions: ['.js', '.jsx'],
@@ -37,6 +42,9 @@ module.exports = {
     filename: '[name].js',
     publicPath: '',
   },
+  optimization: {
+    minimizer: __DEV__ ? [] : [new OptimizeCSSAssetsPlugin({})],
+  },
   module: {
     rules: [
       {
@@ -47,11 +55,16 @@ module.exports = {
       },
       { test: /\.(eot|ttf|otf|svg|woff2?)(\?.*)?$/, loader: 'file-loader' },
       { test: /\.json$/, loader: 'json-loader' },
-      { test: /\.css$/, loader: 'style-loader!css-loader' },
-      { test: /\.less$/, use: ExtractTextPlugin.extract({
-          fallback: 'style-loader',
-          use: 'css-loader!less-loader'
-        })}
+      {
+        test: /\.(less|css)$/,
+        use: [
+          {
+            loader: __DEV__ ? 'style-loader' : MiniCssExtractPlugin.loader,
+          },
+          { loader: 'css-loader', options: { importLoaders: 1 } },
+          { loader: 'less-loader' },
+        ]
+      }
     ],
   },
   plugins,