Fix the build and update packages

package.json

@@ -1,26 +1,28 @@
 {
   "scripts": {
-    "start": "webpack-dev-server",
-    "start:production": "webpack-dev-server --env.production",
-    "build": "webpack --env.production"
+    "start": "webpack-dev-server --mode development",
+    "start:production": "webpack-dev-server --mode production",
+    "build": "webpack --mode production"
   },
   "dependencies": {
-    "dat.gui": "0.7.3",
-    "gl-matrix": "2.4.0",
-    "spectorjs": "0.9.0",
-    "stats-js": "1.0.0-alpha1",
-    "three": "0.87.1",
+    "dat.gui": "0.7.7",
+    "gl-matrix": "3.4.3",
+    "html-webpack-plugin": "^5.4.0",
+    "spectorjs": "0.9.27",
+    "stats-js": "1.0.1",
+    "terser-webpack-plugin": "^5.2.4",
+    "three": "0.133.1",
     "three-js": "79.0.0",
-    "three-orbitcontrols": "1.2.1",
-    "webgl-debug": "1.0.2"
+    "three-orbitcontrols": "2.110.2",
+    "webgl-debug": "2.0.1"
   },
   "devDependencies": {
-    "babel-core": "6.26.0",
-    "babel-loader": "7.1.2",
-    "babel-minify-webpack-plugin": "0.2.0",
-    "babel-preset-env": "1.6.0",
-    "webpack": "3.7.1",
-    "webpack-dev-server": "2.9.2",
+    "@babel/core": "7.15.8",
+    "@babel/preset-env": "7.15.8",
+    "babel-loader": "8.2.3",
+    "webpack": "5.59.1",
+    "webpack-cli": "^4.9.1",
+    "webpack-dev-server": "4.3.1",
     "webpack-glsl-loader": "1.0.1"
   }
 }

webpack.config.js

@@ -1,53 +1,66 @@
 const path = require('path');
 const webpack = require('webpack');
-const MinifyPlugin = require('babel-minify-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const MinifyPlugin = require('terser-webpack-plugin');
 
-module.exports = function(env) {
-  const isProduction = env && env.production === true;
+module.exports = function(env, argv) {
+  const isProduction = argv.mode && argv.mode === 'production';
 
   return {
+    context: __dirname,
     entry: path.join(__dirname, 'src/init'),
     output: {
       path: path.join(__dirname, 'build'),
       filename: 'bundle.js',
     },
     module: {
-      loaders: [
+      rules: [
         {
           test: /\.js$/,
           exclude: /(node_modules|bower_components)/,
-          loader: 'babel-loader',
-          query: {
-            presets: [['env', {
-              targets: {
-                browsers: ['> 1%', 'last 2 major versions'],
-              },
-              loose: true,
-              modules: false,
-            }]],
+          use: {
+              loader: 'babel-loader',
+              options: {
+                  presets: [['@babel/preset-env', {
+                      targets: {
+                          browsers: ['> 1%', 'last 2 major versions'],
+                      },
+                      loose: true,
+                      modules: false,
+                  }]],
+              }
           },
         },
         {
           test: /\.glsl$/,
-          loader: 'webpack-glsl-loader'
+          use: 'webpack-glsl-loader'
         },
       ],
     },
     plugins: [
       isProduction ? new MinifyPlugin({
-        keepFnName: true,
-        keepClassName: true,
+        terserOptions: {
+          keep_fnames: true,
+          keep_classnames: true,
+        }
       }) : undefined,
       new webpack.DefinePlugin({
         'process.env': {
           'NODE_ENV':  (isProduction ? JSON.stringify('production'): JSON.stringify('development')),
         }
       }),
+      new HtmlWebpackPlugin({
+        template: "./index.html"
+      })
     ].filter(p => p),
+    performance: {
+        hints: false,
+        maxEntrypointSize:2048000,
+        maxAssetSize: 2048000
+    },
     devtool: 'source-map',
     devServer: {
-      port: 5650,
-      publicPath: '/build/'
+      port: 5650
     },
   };
 };