update all dependencies to newest version

package.json

@@ -5,43 +5,43 @@
   "main": "main.js",
   "scripts": {
     "start": "node src/main.js",
-    "build": "webpack --mode=production --env=production",
+    "build": "webpack --mode='production'",
     "dev": "webpack --watch --mode=development --env=development",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "author": "Felix",
   "license": "MIT",
   "dependencies": {
-    "socket.io": "^2.2.0",
     "express": "^4.16.4",
-    "popper.js": "^1.14.7"
+    "socket.io": "^4.5.1"
   },
   "devDependencies": {
-    "@fortawesome/fontawesome-svg-core": "^1.2.17",
+    "@fortawesome/fontawesome-svg-core": "^6.1.1",
-    "@fortawesome/free-brands-svg-icons": "^5.8.1",
+    "@fortawesome/free-brands-svg-icons": "^6.1.1",
-    "@fortawesome/free-regular-svg-icons": "^5.8.1",
+    "@fortawesome/free-regular-svg-icons": "^6.1.1",
-    "@fortawesome/free-solid-svg-icons": "^5.8.1",
+    "@fortawesome/free-solid-svg-icons": "^6.1.1",
-    "autoprefixer": "^9.5.0",
+    "@popperjs/core": "^2.11.5",
-    "bootstrap": "^4.3.1",
+    "autoprefixer": "^10.4.7",
-    "clean-webpack-plugin": "^2.0.2",
+    "bootstrap": "^5.1.3",
-    "css-loader": "^2.1.1",
+    "clean-webpack-plugin": "^4.0.0",
+    "css-loader": "^6.7.1",
     "datatables": "^1.10.18",
-    "exports-loader": "^0.7.0",
+    "exports-loader": "^4.0.0",
-    "extract-text-webpack-plugin": "^4.0.0-beta.0",
+    "file-loader": "^6.2.0",
-    "file-loader": "^3.0.1",
     "howler": "^2.1.1",
-    "html-loader": "^0.5.5",
+    "html-loader": "^3.1.0",
-    "html-webpack-plugin": "^3.2.0",
+    "html-webpack-plugin": "^5.5.0",
-    "image-webpack-loader": "^4.6.0",
     "jquery": "^3.3.1",
-    "node-sass": "^4.11.0",
+    "mini-css-extract-plugin": "^2.6.0",
     "pdfobject": "^2.1.1",
-    "postcss-loader": "^3.0.0",
+    "postcss": "^8.1.0",
-    "raw-loader": "^2.0.0",
+    "postcss-loader": "^7.0.0",
-    "sass-loader": "^7.1.0",
+    "raw-loader": "^4.0.2",
-    "style-loader": "^0.23.1",
+    "sass": "^1.52.1",
-    "webpack": "^4.29.6",
+    "sass-loader": "^13.0.0",
-    "webpack-merge": "^4.2.1",
+    "socket.io-client": "^4.5.1",
-    "webpack-cli": "^3.3.0"
+    "style-loader": "^3.3.1",
+    "webpack": "^5.72.1",
+    "webpack-cli": "^4.9.2"
   }
 }

webpack.config.development.js

@@ -1,4 +1,4 @@
-const merge = require('webpack-merge');
+const { merge } = require('webpack-merge');
 const baseConfig = require('./webpack.config.production.js');
 
 module.exports = merge(baseConfig, {

webpack.config.js

@@ -1,3 +1,5 @@
 module.exports = (env) => {
-  return require(`./webpack.config.${env}.js`)
+  if(env.production)
+    return require(`./webpack.config.production.js`)
+  return require(`./webpack.config.development.js`)
 }

webpack.config.production.js

@@ -1,7 +1,7 @@
 const webpack = require('webpack');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
-const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin');
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
-const CleanWebpackPlugin = require('clean-webpack-plugin');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const path = require('path');
 
 module.exports = {
@@ -10,46 +10,42 @@ module.exports = {
     sheets: './src/frontend/sheets.js'
   },
   output: {
-    filename: '[name].[hash].js',
+    filename: '[name].[contenthash].js',
     path: path.resolve(__dirname, 'dist')
   },
   module: {
     rules: [
       {
-        test: /\.(scss)$/,
+        test: /\.module\.s(a|c)ss$/,
-        use:  ExtractTextWebpackPlugin.extract({
+        use: [
-          fallback: 'style-loader',
+          MiniCssExtractPlugin.loader,
-          use:  [
+          {
-                  {
+            loader: 'css-loader',
-                    // Interprets `@import` and `url()` like `import/require()` and will resolve them
+            options: {
-                    loader: 'css-loader'
+              modules: true
-                  },
+            },
-                  {
+          },
-                    // Loader for webpack to process CSS with PostCSS
+          {
-                    loader: 'postcss-loader',
+            loader: 'sass-loader',
-                    options: {
+            options: {}
-                      plugins: function () {
+          }
-                        return [
+        ]
-                          require('autoprefixer')
+      },
-                        ];
+      {
-                      }
+        test: /\.s(a|c)ss$/,
-                    }
+        exclude: /\.module.(s(a|c)ss)$/,
-                  },
+        use: [
-                  {
+          MiniCssExtractPlugin.loader,
-                    // Loads a SASS/SCSS file and compiles it to CSS
+          'css-loader',
-                    loader: 'sass-loader'
+          {
-                  }
+            loader: 'sass-loader',
-                ]
+            options: {}
-      })
+          }
+        ]
       },
       {
         test: /\.(png|jpg|gif)$/,
-        use: [
+        type: 'asset/inline',
-          {
-            loader: 'file-loader',
-            options: {},
-          },
-        ],
       },
       {
         test: /\.(html)$/,
@@ -58,11 +54,9 @@ module.exports = {
         ],
         use: {
           loader: 'html-loader',
-          options: {
+          options: {}
-            attrs: ['link:href', 'img:src']
-          },
         }
-      },
+      }
     ]
   },
   plugins: [
@@ -82,13 +76,18 @@ module.exports = {
                         '!songs/*'
                     ]
         }),
-        new ExtractTextWebpackPlugin("[name].[hash].css"),
+        new MiniCssExtractPlugin({
+          filename: '[name].[contenthash].css',
+          chunkFilename: '[id].[contenthash].css'
+        }),
         new HtmlWebpackPlugin({
+            inject: true,
             filename: 'index.html',
             template: './src/frontend/index.ejs',
             chunks: ['bundle']
         }),
         new HtmlWebpackPlugin({
+            inject: true,
             filename: 'sheets.html',
             template: './src/frontend/sheets.ejs',
             chunks: ['sheets']