chore(frontend): moved to webpack v5 (which fixes a vulnerability)

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

frontend/Dockerfile

@@ -3,10 +3,6 @@ FROM node:12
 RUN apt-get update
 RUN apt-get install nginx -y
 
-RUN npm install -g webpack@4.35.3
-RUN npm install -g webpack-cli@3.3.5
-RUN npm install -g webpack-dev-server@3.7.2
-
 RUN mkdir -p /opt
 WORKDIR /opt
 ADD package.json /opt/package.json

frontend/package.json

@@ -9,53 +9,52 @@
   "repository": "https://github.com/Musare/MusareNode",
   "scripts": {
     "lint": "npx eslint src --ext .js,.vue",
-    "bundle-analyse": "webpack --config webpack.prod.js --profile --json > bundle-stats.json && npx webpack-bundle-analyzer bundle-stats.json --mode static --report bundle-report.html --no-open",
-    "dev": "webpack-dev-server --config webpack.dev.js",
-    "prod": "webpack --config webpack.prod.js"
+    "bundle-analyse": "npx webpack --config webpack.prod.js --profile --json > bundle-stats.json && npx webpack-bundle-analyzer bundle-stats.json --mode static --report bundle-report.html --no-open",
+    "dev": "npx webpack serve --config webpack.dev.js",
+    "prod": "npx webpack --config webpack.prod.js"
   },
   "devDependencies": {
-    "@babel/core": "^7.5.4",
-    "@babel/plugin-proposal-object-rest-spread": "^7.5.4",
+    "@babel/core": "^7.13.10",
+    "@babel/plugin-proposal-object-rest-spread": "^7.13.8",
     "@babel/plugin-syntax-dynamic-import": "^7.2.0",
-    "@babel/plugin-transform-runtime": "^7.5.0",
-    "@babel/preset-env": "^7.5.4",
+    "@babel/plugin-transform-runtime": "^7.13.10",
+    "@babel/preset-env": "^7.13.12",
     "babel-eslint": "^10.0.2",
-    "babel-loader": "^8.0.6",
-    "css-loader": "^3.0.0",
+    "babel-loader": "^8.2.2",
+    "css-loader": "^3.6.0",
     "eslint": "^6.1.0",
     "eslint-config-prettier": "^6.15.0",
     "eslint-loader": "^2.2.1",
-    "eslint-plugin-import": "^2.17.2",
-    "eslint-plugin-prettier": "^3.1.4",
-    "eslint-plugin-vue": "^7.1.0",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-prettier": "^3.3.1",
+    "eslint-plugin-vue": "^7.8.0",
     "fetch": "^1.1.0",
     "node-sass": "^4.14.1",
     "prettier": "1.18.2",
     "sass-loader": "^7.1.0",
     "vue-hot-reload-api": "^2.3.3",
-    "vue-style-loader": "^4.1.2",
-    "vue-template-compiler": "^2.6.10",
-    "webpack": "^4.35.3",
-    "webpack-bundle-analyzer": "^3.4.1",
-    "webpack-cli": "^3.3.5",
-    "webpack-dev-server": "^3.11.0"
+    "vue-style-loader": "^4.1.3",
+    "vue-template-compiler": "^2.6.12",
+    "webpack": "^5.27.2",
+    "webpack-bundle-analyzer": "^4.4.0",
+    "webpack-cli": "^4.5.0",
+    "webpack-dev-server": "^3.11.2"
   },
   "dependencies": {
-    "@babel/runtime": "^7.5.4",
-    "chart.js": "^2.5.0",
+    "@babel/runtime": "^7.13.10",
+    "chart.js": "^2.9.4",
     "chartjs-adapter-date-fns": "^0.1.2",
-    "config": "^3.2.2",
-    "date-fns": "^2.0.1",
+    "config": "^3.3.6",
+    "date-fns": "^2.19.0",
     "eslint-config-airbnb-base": "^13.2.0",
-    "html-webpack-plugin": "^3.2.0",
-    "toasters": "^2.1.0",
-    "vue": "^2.6.10",
+    "html-webpack-plugin": "^5.3.1",
+    "toasters": "^2.1.1",
+    "vue": "^2.6.12",
     "vue-content-loader": "^0.2.3",
-    "vue-loader": "^15.7.0",
-    "vue-router": "^3.0.7",
+    "vue-loader": "^15.9.6",
+    "vue-router": "^3.5.1",
     "vuedraggable": "^2.24.3",
-    "vuex": "^3.1.1",
-    "webpack-md5-hash": "0.0.6",
-    "webpack-merge": "^4.2.1"
+    "vuex": "^3.6.2",
+    "webpack-merge": "^5.7.3"
   }
 }

frontend/webpack.common.js

@@ -1,16 +1,14 @@
-const VueLoaderPlugin = require("vue-loader/lib/plugin");
-const WebpackMd5Hash = require("webpack-md5-hash");
+const { VueLoaderPlugin } = require("vue-loader");
 const HtmlWebpackPlugin = require("html-webpack-plugin");
 
 module.exports = {
 	entry: "./src/main.js",
 	output: {
 		path: `${__dirname}/dist/build/`,
-		filename: "[name].[hash].js"
+		filename: "[name].[contenthash].js"
 	},
 	plugins: [
 		new VueLoaderPlugin(),
-		new WebpackMd5Hash(),
 		new HtmlWebpackPlugin({
 			hash: true,
 			template: "dist/index.tpl.html",

frontend/webpack.dev.js

@@ -1,7 +1,7 @@
 process.env.NODE_CONFIG_DIR = `${__dirname}/dist/config/`;
 const config = require("config");
 
-const merge = require("webpack-merge");
+const { merge } = require("webpack-merge");
 const common = require("./webpack.common.js");
 
 module.exports = merge(common, {

frontend/webpack.prod.js

@@ -1,4 +1,4 @@
-const merge = require("webpack-merge");
+const { merge } = require("webpack-merge");
 const common = require("./webpack.common.js");
 
 module.exports = merge(common, {