chore(webpack): increased webpack dev speed, added webpack-dev-server

Signed-off-by: Jonathan <theflametrooper@gmail.com>

.gitignore

@@ -18,10 +18,10 @@ backend/config/default.json
 
 # Front End
 frontend/node_modules/
-frontend/build/*.js
-!frontend/build/lofig.min.js
-frontend/build/index.html
-frontend/build/config/default.json
+frontend/dist/build/
+!frontend/dist/lofig.min.js
+frontend/dist/index.html
+frontend/dist/config/default.json
 
 npm
 

README.md

@@ -54,8 +54,9 @@ Once you've installed the required tools:
 
 3. `cp backend/config/template.json backend/config/default.json`
 
-Values:  
- The `secret` key can be whatever. It's used by express's session module.
+Values:
+The `mode` should be either "development" or "production". No more explanation needed.
+The `secret` key can be whatever. It's used by express's session module.
 The `domain` should be the url where the site will be accessible from, usually `http://localhost` for non-Docker.
 The `serverDomain` should be the url where the backend will be accessible from, usually `http://localhost:8080` for non-Docker.
 The `serverPort` should be the port where the backend will listen on, usually `8080` for non-Docker.
@@ -203,7 +204,7 @@ Steps 1-4 are things you only have to do once. The steps to start servers follow
 
 1. Run `startRedis.cmd` and `startMongo.cmd` to start Redis and Mongo.
 
-2. In a command prompt with the pwd of frontend, run `yarn run development-watch`
+2. In a command prompt with the pwd of frontend, run `yarn run dev`
 
 3. In a command prompt with the pwd of backend, run `nodemon`
 

backend/Dockerfile

@@ -12,4 +12,4 @@ RUN npm install
 
 EXPOSE 80
 
-CMD npm run development
+CMD npm run docker:dev

backend/config/template.json

@@ -1,4 +1,5 @@
 {
+	"mode": "development",
 	"secret": "",
 	"domain": "",
 	"frontendPort": 80,

backend/index.js

@@ -5,7 +5,6 @@ process.env.NODE_CONFIG_DIR = `${__dirname}/config`;
 const async = require('async');
 const fs = require('fs');
 
-
 //const Discord = require("discord.js");
 //const client = new Discord.Client();
 const db = require('./logic/db');
@@ -183,11 +182,11 @@ async.waterfall([
 		initializedComponents.push(tasks);
 		currentComponent = 'Windows';
 		moduleStartFunction();
-		if (!config.get("isDocker")) {
+		if (!config.get("isDocker") && !(config.get("mode") === "development" || config.get("mode") === "dev")) {
 			const express = require('express');
 			const app = express();
 			app.listen(config.get("frontendPort"));
-			const rootDir = __dirname.substr(0, __dirname.lastIndexOf("backend")) + "frontend/build/";
+			const rootDir = __dirname.substr(0, __dirname.lastIndexOf("backend")) + "frontend/dist/build";
 
 			app.use(express.static(rootDir, {
 				setHeaders: function(res, path) {
@@ -197,7 +196,7 @@ async.waterfall([
 			}));
 
 			app.get("/*", (req, res) => {
-				res.sendFile(rootDir + "index.html");
+				res.sendFile(`${rootDir}/index.html`);
 			});
 		}
 		if (lockdownB) return;

backend/package.json

@@ -6,8 +6,8 @@
   "author": "Musare Team",
   "repository": "https://github.com/Musare/MusareNode",
   "scripts": {
-    "development": "nodemon -L /opt/app",
-    "production": "node /opt/app"
+    "docker:dev": "nodemon -L /opt/app",
+    "docker:prod": "node /opt/app"
   },
   "dependencies": {
     "async": "3.1.0",

frontend/Dockerfile

@@ -16,4 +16,4 @@ RUN mkdir -p /run/nginx
 
 EXPOSE 80
 
-CMD nginx -c /opt/app/nginx.conf; cd /opt/app; yarn run development-watch
+CMD nginx -c /opt/app/nginx.conf; cd /opt/app; yarn run dev

frontend/package.json

@@ -7,9 +7,8 @@
 	"repository": "https://github.com/Musare/MusareNode",
 	"scripts": {
 		"lint": "npx eslint . --ext .js,.vue",
-		"development": "webpack --mode development",
-		"development-watch": "webpack --watch --watch-poll",
-		"production": "webpack --mode production"
+		"dev": "webpack-dev-server --open --config webpack.dev.js",
+		"build": "webpack --config webpack.prod.js"
 	},
 	"devDependencies": {
 		"@babel/core": "^7.5.4",
@@ -37,7 +36,8 @@
 		"webpack": "^4.35.3",
 		"webpack-cli": "^3.3.5",
 		"webpack-dev-server": "^3.7.2",
-		"webpack-md5-hash": "0.0.6"
+		"webpack-md5-hash": "0.0.6",
+		"webpack-merge": "^4.2.1"
 	},
 	"dependencies": {
 		"@babel/runtime": "^7.5.4",

frontend/webpack.config.js → frontend/webpack.common.js

@@ -3,20 +3,18 @@ const WebpackMd5Hash = require("webpack-md5-hash");
 const HtmlWebpackPlugin = require("html-webpack-plugin");
 
 module.exports = {
-	mode: "none",
-	devtool: "eval-source-map",
 	entry: "./main.js",
 	output: {
-		path: __dirname + "/build/",
+		path: __dirname + "/dist/build/",
 		publicPath: "/",
-		filename: "[name].[chunkhash].js"
+		filename: "[name].[hash].js"
 	},
 	plugins: [
 		new VueLoaderPlugin(),
 		new WebpackMd5Hash(),
 		new HtmlWebpackPlugin({
 			hash: true,
-			template: "build/index.tpl.html",
+			template: "dist/index.tpl.html",
 			inject: "body",
 			filename: "index.html"
 		})

frontend/webpack.dev.js

@@ -0,0 +1,13 @@
+const merge = require("webpack-merge");
+const common = require("./webpack.common.js");
+
+module.exports = merge(common, {
+	mode: "development",
+	devtool: "inline-source-map",
+	devServer: {
+		contentBase: "./dist/",
+		historyApiFallback: true,
+		hot: true,
+		port: 3000
+	}
+});

frontend/webpack.prod.js

@@ -0,0 +1,7 @@
+const merge = require("webpack-merge");
+const common = require("./webpack.common.js");
+
+module.exports = merge(common, {
+	mode: "production",
+	devtool: "source-map"
+});

frontend/yarn.lock

@@ -702,6 +702,11 @@
     lodash "^4.17.13"
     to-fast-properties "^2.0.0"
 
+"@types/anymatch@*":
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/@types/anymatch/-/anymatch-1.3.1.tgz#336badc1beecb9dacc38bea2cf32adf627a8421a"
+  integrity sha512-/+CRPXpBDpo2RK9C68N3b2cOvO0Cf5B9aPijHsoDQTHivnGSObdOF2BRQOYjojWTDy6nQvMjmqRXIxH55VjxxA==
+
 "@types/events@*":
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/@types/events/-/events-3.0.0.tgz#2862f3f58a9a7f7c3e78d79f130dd4d71c25c2a7"
@@ -726,6 +731,29 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-12.6.2.tgz#a5ccec6abb6060d5f20d256fb03ed743e9774999"
   integrity sha512-gojym4tX0FWeV2gsW4Xmzo5wxGjXGm550oVUII7f7G5o4BV6c7DBdiG1RRQd+y1bvqRyYtPfMK85UM95vsapqQ==
 
+"@types/tapable@*":
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@types/tapable/-/tapable-1.0.4.tgz#b4ffc7dc97b498c969b360a41eee247f82616370"
+  integrity sha512-78AdXtlhpCHT0K3EytMpn4JNxaf5tbqbLcbIRoQIHzpTIyjpxLQKRoxU55ujBXAtg3Nl2h/XWvfDa9dsMOd0pQ==
+
+"@types/uglify-js@*":
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/@types/uglify-js/-/uglify-js-3.0.4.tgz#96beae23df6f561862a830b4288a49e86baac082"
+  integrity sha512-SudIN9TRJ+v8g5pTG8RRCqfqTMNqgWCKKd3vtynhGzkIIjxaicNAMuY5TRadJ6tzDu3Dotf3ngaMILtmOdmWEQ==
+  dependencies:
+    source-map "^0.6.1"
+
+"@types/webpack@^4.4.31":
+  version "4.32.0"
+  resolved "https://registry.yarnpkg.com/@types/webpack/-/webpack-4.32.0.tgz#bd4a149964cd471538f2781f2be5f9815175463b"
+  integrity sha512-kpz5wHDyG/WEpzX9gcwFp/w0oSsq0n/rmFdJelk/QBMHmNIOZdiTDInV0Lj8itGKBahQrBgJGJRss/6UHgLuKg==
+  dependencies:
+    "@types/anymatch" "*"
+    "@types/node" "*"
+    "@types/tapable" "*"
+    "@types/uglify-js" "*"
+    source-map "^0.6.0"
+
 "@vue/component-compiler-utils@^2.5.1":
   version "2.6.0"
   resolved "https://registry.yarnpkg.com/@vue/component-compiler-utils/-/component-compiler-utils-2.6.0.tgz#aa46d2a6f7647440b0b8932434d22f12371e543b"
@@ -1690,6 +1718,14 @@ clean-css@4.2.x:
   dependencies:
     source-map "~0.6.0"
 
+clean-webpack-plugin@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/clean-webpack-plugin/-/clean-webpack-plugin-3.0.0.tgz#a99d8ec34c1c628a4541567aa7b457446460c62b"
+  integrity sha512-MciirUH5r+cYLGCOL5JX/ZLzOZbVr1ot3Fw+KcvbhUb6PM+yycqd9ZhIlcigQ5gl+XhppNmw3bEFuaaMNyLj3A==
+  dependencies:
+    "@types/webpack" "^4.4.31"
+    del "^4.1.1"
+
 cli-cursor@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-2.1.0.tgz#b35dac376479facc3e94747d41d0d0f5238ffcb5"
@@ -3698,11 +3734,16 @@ ip@^1.1.0, ip@^1.1.5:
   resolved "https://registry.yarnpkg.com/ip/-/ip-1.1.5.tgz#bdded70114290828c0a039e72ef25f5aaec4354a"
   integrity sha1-vd7XARQpCCjAoDnnLvJfWq7ENUo=
 
-ipaddr.js@1.9.0, ipaddr.js@^1.9.0:
+ipaddr.js@1.9.0:
   version "1.9.0"
   resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.9.0.tgz#37df74e430a0e47550fe54a2defe30d8acd95f65"
   integrity sha512-M4Sjn6N/+O6/IXSJseKqHoFc+5FdGJ22sXqnjTpdZweHK64MzEPAyQZyEU3R/KRv2GLoa7nNtg/C2Ev6m7z+eA==
 
+ipaddr.js@^1.9.0:
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.9.1.tgz#bff38543eeb8984825079ff3a2a8e6cbd46781b3"
+  integrity sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==
+
 is-accessor-descriptor@^0.1.6:
   version "0.1.6"
   resolved "https://registry.yarnpkg.com/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz#a9e12cb3ae8d876727eeef3843f8a0897b5c98d6"
@@ -4179,7 +4220,7 @@ lodash@^4.0.0, lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.14, lodash@^4.17.3
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.14.tgz#9ce487ae66c96254fe20b599f21b6816028078ba"
   integrity sha512-mmKYbW3GLuJeX+iGP+Y7Gp1AiGHGbXHCOh/jZmrawMmsE7MS4znI3RL2FsjbqOyMayHInjOeykW7PEajUk1/xw==
 
-lodash@^4.17.13:
+lodash@^4.17.13, lodash@^4.17.5:
   version "4.17.15"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
   integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==
@@ -6958,6 +6999,13 @@ webpack-md5-hash@0.0.6:
   dependencies:
     md5 "^2.0.0"
 
+webpack-merge@^4.2.1:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/webpack-merge/-/webpack-merge-4.2.1.tgz#5e923cf802ea2ace4fd5af1d3247368a633489b4"
+  integrity sha512-4p8WQyS98bUJcCvFMbdGZyZmsKuWjWVnVHnAS3FFg0HDaRVrPbkivx2RYCre8UiemD67RsiFFLfn4JhLAin8Vw==
+  dependencies:
+    lodash "^4.17.5"
+
 webpack-sources@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.3.0.tgz#2a28dcb9f1f45fe960d8f1493252b5ee6530fa85"