Merge pull request #492 from grafixeyehero/webpack

Add webpack-dev-server

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": "^4.41.0",
-    "webpack-cli": "^3.2.3"
+    "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",
+    "serve": "webpack-dev-server --config webpack.dev.js --open",
-    "build": "webpack --mode production",
+    "build": "webpack --config webpack.prod.js",
-    "lint": "eslint \"src\"",
+    "lint": "eslint \"src\""
-    "prepare": "webpack --mode production"
   }
 }

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: "."
+        }])
+    ]
+};

webpack.config.js

@@ -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: '.'
-        }])
-    ]
-};

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"]
+            }
+        ]
+    },
+});

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"]
+            }
+        ]
+    },
+});