update webpack dev server

build/631.css

@@ -1 +1 @@
-@media only screen and (min-width:975px){.pack{max-width:90%}.pack .card{width:20%}}@media only screen and (max-width:975px){.pack{max-width:90%}.pack .card{width:40%}}.packsim input[type=number]::-webkit-inner-spin-button,.packsim input[type=number]::-webkit-outer-spin-button{opacity:1}.enterthecode .card{height:350px;width:250px}.pack{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;margin:auto}.pack .card{margin:5px}.pack .card:hover{height:350px;width:250px}.pack .card>div{background-size:cover;-webkit-border-radius:5px;box-sizing:content-box;height:210px;-webkit-transition:-webkit-transform 1s,opacity 1s,background 1s,width 1s,height 1s,font-size 1s,top 1s,left 1s;-o-transition-duration:1s,1s,1s,1s,1s,1s,1s,1s;-moz-transition-duration:1s,1s,1s,1s,1s,1s,1s,1s;transition-duration:1s,1s,1s,1s,1s,1s,1s,1s;-o-transition-property:width,height,-o-transform,background,font-size,opacity,top,left;-moz-transition-property:width,height,-o-transform,background,font-size,opacity,top,left;transition-property:width,height,transform,background,font-size,opacity,top,left;width:150px}.pack .card>div:hover{height:350px;width:250px}.pack .card.locations{height:210px;width:150px}.pack .card.locations:hover{height:350px;width:250px}.pack .card.locations div{height:150px;transform:rotate(270deg);transform-origin:50% 70%;width:210px}.pack .card.locations div:hover{height:250px;width:350px}.pack .stats{height:100%;text-align:left;width:100%}.pack .stats span{color:#000;display:block;font-size:12px;left:10px;position:relative}.pack .stats span:first-of-type{top:130px}.pack .stats span:nth-of-type(2){top:128px}.pack .stats span:nth-of-type(3){top:126px}.pack .stats span:nth-of-type(4){top:124px}.pack .stats span:nth-of-type(5){font-size:14px;left:-11px;text-align:right;top:125px}.pack .card:hover .stats span{font-size:14px;font-weight:700;left:20px}.pack .card:hover .stats span:first-of-type{top:220px}.pack .card:hover .stats span:nth-of-type(2){top:229px}.pack .card:hover .stats span:nth-of-type(3){top:237px}.pack .card:hover .stats span:nth-of-type(4){top:245px}.pack .card:hover .stats span:nth-of-type(5){font-size:20px;left:-21px;text-align:right;top:258px}
+@media only screen and (min-width:975px){.pack{max-width:90%}.pack .card{width:20%}}@media only screen and (max-width:975px){.pack{max-width:90%}.pack .card{width:40%}}.packsim input[type=number]::-webkit-inner-spin-button,.packsim input[type=number]::-webkit-outer-spin-button{opacity:1}.enterthecode .card{height:350px;width:250px}.pack{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;margin:auto}.pack .card{margin:5px}.pack .card:hover{height:350px;width:250px}.pack .card>div{background-size:cover;-webkit-border-radius:5px;box-sizing:initial;height:210px;-webkit-transition:-webkit-transform 1s,opacity 1s,background 1s,width 1s,height 1s,font-size 1s,top 1s,left 1s;-o-transition-duration:1s,1s,1s,1s,1s,1s,1s,1s;-moz-transition-duration:1s,1s,1s,1s,1s,1s,1s,1s;transition-duration:1s,1s,1s,1s,1s,1s,1s,1s;-o-transition-property:width,height,-o-transform,background,font-size,opacity,top,left;-moz-transition-property:width,height,-o-transform,background,font-size,opacity,top,left;transition-property:width,height,transform,background,font-size,opacity,top,left;width:150px}.pack .card>div:hover{height:350px;width:250px}.pack .card.locations{height:210px;width:150px}.pack .card.locations:hover{height:350px;width:250px}.pack .card.locations div{height:150px;transform:rotate(270deg);transform-origin:50% 70%;width:210px}.pack .card.locations div:hover{height:250px;width:350px}.pack .stats{height:100%;text-align:left;width:100%}.pack .stats span{color:#000;display:block;font-size:12px;left:10px;position:relative}.pack .stats span:first-of-type{top:130px}.pack .stats span:nth-of-type(2){top:128px}.pack .stats span:nth-of-type(3){top:126px}.pack .stats span:nth-of-type(4){top:124px}.pack .stats span:nth-of-type(5){font-size:14px;left:-11px;text-align:right;top:125px}.pack .card:hover .stats span{font-size:14px;font-weight:700;left:20px}.pack .card:hover .stats span:first-of-type{top:220px}.pack .card:hover .stats span:nth-of-type(2){top:229px}.pack .card:hover .stats span:nth-of-type(3){top:237px}.pack .card:hover .stats span:nth-of-type(4){top:245px}.pack .card:hover .stats span:nth-of-type(5){font-size:20px;left:-21px;text-align:right;top:258px}

build/669.css

@@ -1 +1 @@
-.icon14{height:14px;width:14px}.icon14,.icon16{vertical-align:middle}.icon16{height:16px;width:16px}.icon20{height:20px;width:20px}.icon20,.icon24{vertical-align:middle}.icon24{height:24px;width:24px}.name{-webkit-user-select:all;-moz-user-select:all;-ms-user-select:all;user-select:all}.name .subname:before{content:"\a  ";white-space:pre}.name .subname{display:inherit;font-size:13px;padding-bottom:4px}.image-cover{background-size:cover;box-sizing:content-box;height:350px;position:absolute;width:250px}.image-cover>div{height:100%;text-align:left;width:100%}.image-cover>div span{color:#000;display:block;font-size:12px;font-weight:700;left:28px;position:relative}.image-cover>div span.long{left:22px}.image-cover>div span:first-of-type{top:222px}.image-cover>div span:nth-of-type(2){top:232px}.image-cover>div span:nth-of-type(3){top:242px}.image-cover>div span:nth-of-type(4){top:252px}.image-cover>div span:nth-of-type(5){font-size:21px;left:-17px;text-align:right;top:260px}.image-cover>div span:nth-of-type(5).long{left:-12px}
+.icon14{height:14px;width:14px}.icon14,.icon16{vertical-align:middle}.icon16{height:16px;width:16px}.icon20{height:20px;width:20px}.icon20,.icon24{vertical-align:middle}.icon24{height:24px;width:24px}.name{-webkit-user-select:all;-moz-user-select:all;-ms-user-select:all;user-select:all}.name .subname:before{content:"\a  ";white-space:pre}.name .subname{display:inherit;font-size:13px;padding-bottom:4px}.image-cover{background-size:cover;box-sizing:initial;height:350px;position:absolute;width:250px}.image-cover>div{height:100%;text-align:left;width:100%}.image-cover>div span{color:#000;display:block;font-size:12px;font-weight:700;left:28px;position:relative}.image-cover>div span.long{left:22px}.image-cover>div span:first-of-type{top:222px}.image-cover>div span:nth-of-type(2){top:232px}.image-cover>div span:nth-of-type(3){top:242px}.image-cover>div span:nth-of-type(4){top:252px}.image-cover>div span:nth-of-type(5){font-size:21px;left:-17px;text-align:right;top:260px}.image-cover>div span:nth-of-type(5).long{left:-12px}

build/vendor.js.LICENSE.txt

@@ -29,7 +29,25 @@ and limitations under the License.
 /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */
 
 /**
- * React Router DOM v6.3.0
+ * @license React
+ * react-is.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @mui/styled-engine v5.11.9
+ *
+ * @license MIT
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @remix-run/router v1.3.2
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -40,7 +58,18 @@ and limitations under the License.
  */
 
 /**
- * React Router v6.3.0
+ * React Router DOM v6.8.1
+ *
+ * Copyright (c) Remix Software Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.md file in the root directory of this source tree.
+ *
+ * @license MIT
+ */
+
+/**
+ * React Router v6.8.1
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -57,12 +86,6 @@ and limitations under the License.
  * @copyright 2014-2019 Yotam Mann
  */
 
-/** @license MUI v5.8.0
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
 /** @license React v0.19.1
  * scheduler.production.min.js
  *
@@ -107,12 +130,3 @@ and limitations under the License.
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-
-/** @license React v17.0.2
- * react-is.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */

package.json

@@ -75,6 +75,7 @@
     "eslint-plugin-react": "^7.27.1",
     "eslint-plugin-react-hooks": "^4.3.0",
     "fsevents": "^2.3.2",
+    "html-webpack-plugin": "^5.5.0",
     "ignore-styles": "^5.0.1",
     "jsdom": "^17.0.0",
     "jsdom-global": "^3.0.2",
@@ -88,8 +89,8 @@
     "ts-node": "^10.4.0",
     "typescript": "^4.5.4",
     "webpack": "^5.65.0",
-    "webpack-cli": "^4.9.1",
-    "webpack-dev-server": "^3.11.3"
+    "webpack-cli": "^5.0.1",
+    "webpack-dev-server": "^4.11.1"
   },
   "browser": {
     "fs": false

webpack.config.babel.js

@@ -1,10 +1,11 @@
 /*eslint global-require: "off"*/
-const path = require('path');
-const webpack = require('webpack');
-const TerserWebpackPlugin = require('terser-webpack-plugin');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const path = require('path');
+const TerserWebpackPlugin = require('terser-webpack-plugin');
+const webpack = require('webpack');
 require('@babel/register');
 
 module.exports = (env, argv) => {
@@ -27,19 +28,19 @@ module.exports = (env, argv) => {
       host: '0.0.0.0',
       port: 8000,
       hot: true,
-      publicPath: '/build/',
-      contentBase: __dirname,
-      watchContentBase: true,
-      historyApiFallback: {
-        index: 'index.html',
+      static: {                               
+        directory: path.join(__dirname, './public'),
+        publicPath: '/public',
+        watch: true
       },
+      historyApiFallback: true
     },
 
     output: {
       path: path.resolve(__dirname, 'build'),
       filename: '[name].js',
       chunkFilename: '[name].js',
-      publicPath: '/build/',
+      publicPath: devMode ? '/' : '/build/',
     },
 
     optimization: {
@@ -49,9 +50,6 @@ module.exports = (env, argv) => {
           parallel: true,
           extractComments: true,
           terserOptions: {
-            parse: {
-              ecma: 8
-            },
             output: {
               comments: false
             }
@@ -126,6 +124,9 @@ module.exports = (env, argv) => {
     // First array is dev only, second is production
     plugins: devMode 
       ? [
+        new HtmlWebpackPlugin({
+          template: 'index.html'
+        })
       ] : [
         new CleanWebpackPlugin(),
         new webpack.DefinePlugin({