Upgrade all javascript dependencies

assets/static/app.js.map

@@ -1 +1 @@
-{"version":3,"file":"app.js","sources":["webpack:///app.js"],"mappings":"AAAA;;;;;;;;;;;;;AAwMA;;;;;;;;;;AAgfA;AA6uIA;AA8iJA;AA46EA;;;;;AAs1BA","sourceRoot":""}
+{"version":3,"file":"app.js","sources":["webpack:///app.js"],"mappings":"AAAA;;;;;;;;;;;;;AAwMA;;;;;;;;;;AAwgBA;AAwxIA;AAyzJA;AA29EA;;;;;AAyqCA","sourceRoot":""}

webpack/package.json

@@ -6,23 +6,20 @@
   "main": "static/gen/host.js",
   "scripts": {},
   "devDependencies": {
-    "babel": "^6.5.2",
-    "babel-core": "^6.11.4",
-    "babel-eslint": "^6.1.2",
-    "babel-loader": "^6.2.4",
-    "babel-preset-es2015": "^6.9.0",
+    "@babel/core": "^7.16.0",
+    "@babel/eslint-parser": "^7.16.3",
+    "@babel/preset-env": "^7.16.4",
+    "babel-loader": "^8.2.3",
     "bootstrap": "^3.3.6",
     "bootstrap-sass": "^3.3.6",
-    "css-loader": "^0.23.1",
-    "extract-text-webpack-plugin": "^1.0.1",
-    "file-loader": "^0.9.0",
+    "css-loader": "^6.5.1",
+    "font-awesome": "^4.6.3",
     "jquery": "^3.1.0",
-    "node-sass": "^3.8.0",
-    "sass-loader": "^4.0.0",
-    "style-loader": "^0.13.1",
-    "query-string": "^4.2.2",
-    "url-loader": "^0.5.7",
-    "webpack": "^1.13.1",
-    "font-awesome": "^4.6.3"
+    "mini-css-extract-plugin": "^2.4.5",
+    "query-string": "^7.0.1",
+    "sass": "^1.43.5",
+    "sass-loader": "^12.3.0",
+    "webpack": "^5.64.4",
+    "webpack-cli": "^4.9.1"
   }
 }

webpack/webpack.config.js

@@ -1,62 +1,57 @@
-var webpack = require('webpack');
-var path = require('path');
-var ExtractTextPlugin = require('extract-text-webpack-plugin');
-
+var webpack = require("webpack");
+var path = require("path");
+var MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
 var options = {
   entry: {
-    'app': './js/app.js',
-    'styles': './scss/main.scss'
+    app: "./js/app.js",
+    styles: "./scss/main.scss",
   },
   output: {
-    path: path.dirname(__dirname) + '/assets/static',
-    filename: '[name].js'
+    path: path.dirname(__dirname) + "/assets/static",
+    filename: "[name].js",
   },
-  devtool: '#cheap-module-source-map',
+  devtool: "cheap-module-source-map",
+  mode: "production",
   resolve: {
-    modulesDirectories: ['node_modules'],
-    extensions: ['', '.js']
+    modules: ["node_modules"],
+    extensions: ["", ".js"],
   },
   module: {
-    loaders: [
+    rules: [
       {
         test: /\.js$/,
         exclude: /node_modules/,
-        loader: 'babel',
-        query: {
-          presets: ['es2015'],
-        }
+        use: [
+          {
+            loader: "babel-loader",
+            options: {
+              presets: ["es2015"],
+            },
+          },
+        ],
       },
       {
         test: /\.scss$/,
-        loader: ExtractTextPlugin.extract('style-loader', 'css-loader!sass-loader')
+        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
       },
       {
         test: /\.css$/,
-        loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
+        use: [MiniCssExtractPlugin.loader, "css-loader"],
       },
       {
         test: /\.(woff2?|ttf|eot|svg|png)(\?.*?)?$/,
-        loader: 'file'
-      }
-    ]
+        use: ["file"],
+      },
+    ],
   },
   plugins: [
-    new webpack.optimize.UglifyJsPlugin({
-      compress: {
-        warnings: false
-      }
-    }),
-    new webpack.optimize.DedupePlugin(),
-    new webpack.optimize.OccurenceOrderPlugin(),
     new webpack.ProvidePlugin({
-      $: 'jquery',
-      jQuery: 'jquery'
+      $: "jquery",
+      jQuery: "jquery",
     }),
-    new ExtractTextPlugin('styles.css', {
-      allChunks: true
-    })
-  ]
+    new MiniCssExtractPlugin(),
+  ],
 };
 
 module.exports = options;