diff --git a/package.json b/package.json
index 51b90f4ee8..e9bafe874f 100644
--- a/package.json
+++ b/package.json
@@ -10,8 +10,10 @@
     "eslint": "^5.16.0",
     "file-loader": "^3.0.1",
     "style-loader": "^0.23.1",
-    "webpack": "^4.29.5",
-    "webpack-cli": "^3.2.3"
+    "webpack": "^4.41.0",
+    "webpack-cli": "^3.3.9",
+    "webpack-dev-server": "^3.8.1",
+    "webpack-merge": "^4.2.2"
   },
   "dependencies": {
     "jstree": "^3.3.7",
@@ -23,9 +25,8 @@
     "libjass": "^0.11.0"
   },
   "scripts": {
-    "dev": "webpack --mode development",
-    "build": "webpack --mode production",
-    "lint": "eslint \"src\"",
-    "prepare": "webpack --mode production"
+    "serve": "webpack-dev-server --config webpack.dev.js --open",
+    "build": "webpack --config webpack.prod.js",
+    "lint": "eslint \"src\""
   }
 }
diff --git a/webpack.common.js b/webpack.common.js
new file mode 100644
index 0000000000..05b2b0cb46
--- /dev/null
+++ b/webpack.common.js
@@ -0,0 +1,18 @@
+const path = require("path");
+const CopyPlugin = require("copy-webpack-plugin");
+
+module.exports = {
+    context: path.resolve(__dirname, "src"),
+    entry: "./bundle.js",
+    resolve: {
+        modules: [
+            path.resolve(__dirname, "node_modules")
+        ]
+    },
+    plugins: [
+        new CopyPlugin([{
+            from: "**/*",
+            to: "."
+        }])
+    ]
+};
diff --git a/webpack.config.js b/webpack.config.js
deleted file mode 100644
index 9ce0a85b7a..0000000000
--- a/webpack.config.js
+++ /dev/null
@@ -1,35 +0,0 @@
-const path = require('path');
-const CopyPlugin = require('copy-webpack-plugin');
-
-module.exports = {
-    context: path.resolve(__dirname, 'src'),
-    entry: './bundle.js',
-    output: {
-        filename: 'bundle.js',
-        path: path.resolve(__dirname, 'dist'),
-        libraryTarget: 'amd-require'
-    },
-    resolve: {
-        modules: [
-            path.resolve(__dirname, 'node_modules')
-        ]
-    },
-    module: {
-        rules: [
-            {
-                test: /\.css$/i,
-                use: ['style-loader', 'css-loader']
-            },
-            {
-                test: /\.(png|jpg|gif)$/i,
-                use: ['file-loader']
-            }
-        ]
-    },
-    plugins: [
-        new CopyPlugin([{
-            from: '**/*',
-            to: '.'
-        }])
-    ]
-};
diff --git a/webpack.dev.js b/webpack.dev.js
new file mode 100644
index 0000000000..99d7bb1b4a
--- /dev/null
+++ b/webpack.dev.js
@@ -0,0 +1,24 @@
+const path = require("path");
+const common = require("./webpack.common");
+const merge = require("webpack-merge");
+
+module.exports = merge(common, {
+    mode: "development",
+    output: {
+        filename: "bundle.js",
+        path: path.resolve(__dirname, "dist"),
+        libraryTarget: "amd-require"
+    },
+    module: {
+        rules: [
+            {
+                test: /\.css$/i,
+                use: ["style-loader", "css-loader"]
+            },
+            {
+                test: /\.(png|jpg|gif)$/i,
+                use: ["file-loader"]
+            }
+        ]
+    },
+});
diff --git a/webpack.prod.js b/webpack.prod.js
new file mode 100644
index 0000000000..8880a2168c
--- /dev/null
+++ b/webpack.prod.js
@@ -0,0 +1,24 @@
+const path = require("path");
+const common = require("./webpack.common");
+const merge = require("webpack-merge");
+
+module.exports = merge(common, {
+    mode: "production",
+    output: {
+        filename: "bundle.js",
+        path: path.resolve(__dirname, "dist"),
+        libraryTarget: "amd-require"
+    },
+    module: {
+        rules: [
+            {
+                test: /\.css$/i,
+                use: ["style-loader", "css-loader"]
+            },
+            {
+                test: /\.(png|jpg|gif)$/i,
+                use: ["file-loader"]
+            }
+        ]
+    },
+});