Prepared website for production and going live.

Added website title.

Added Unavailability message to steam page.

Added image lossy image minimizers to webpack to production webpack configuration.

Added source mapping to development webpack configuration.

Renamed router paths.

package.json

@@ -18,6 +18,7 @@
   "devDependencies": {
     "@babel/core": "^7.16.7",
     "@babel/preset-env": "^7.16.8",
+    "@squoosh/lib": "^0.4.0",
     "@vue/compiler-sfc": "^3.2.26",
     "babel-loader": "^8.2.3",
     "css-loader": "^6.5.1",
@@ -25,6 +26,11 @@
     "eslint-plugin-vue": "^8.3.0",
     "eslint-webpack-plugin": "^3.1.1",
     "html-webpack-plugin": "^5.5.0",
+    "image-minimizer-webpack-plugin": "^3.2.3",
+    "imagemin-gifsicle": "^7.0.0",
+    "imagemin-mozjpeg": "^10.0.0",
+    "imagemin-pngquant": "^9.0.2",
+    "imagemin-svgo": "^10.0.1",
     "inject-body-webpack-plugin": "^1.3.0",
     "sass": "^1.48.0",
     "sass-loader": "^12.4.0",

src/pages/SteamServer.vue

@@ -1,5 +1,12 @@
 <template>
-  <h1>Steam System</h1>
+  <div class="pages">
+    <div class="page">
+      <div class="title">
+        <h1>Steam System</h1>
+        <p>Currently unavailable.</p>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>

src/router/routes.js

@@ -10,12 +10,12 @@ export const routes = [
   },
   {
       path: "/mcs",
-      name: "RSEMCS",
+      name: "Minecraft Server",
       component: MinecraftServer,
   },
   {
     path: "/steam",
-    name: "RSESteam",
+    name: "Steam System",
     component: SteamServer,
   }
 ];

webpack.common.js

@@ -45,21 +45,25 @@ module.exports = {
                     }
                 }
             },
+            {
+              test: /\.m?js$/,
+              exclude: /(node_modules|bower_components)/,
+              use: {
+                loader: "babel-loader",
+                options: {
+                  presets: ["@babel/preset-env"]
+                }
+              }
+            },
             {
               test: /\.(woff|woff2|eot|ttf|otf)$/i,
               type: "asset/resource",
             },
             {
-                test: /\.m?js$/,
+              test: /\.(jpe?g|png|gif|svg)$/i,
-                exclude: /(node_modules|bower_components)/,
+              type: "asset",
-                use: {
-                    loader: "babel-loader",
-                    options: {
-                        presets: ["@babel/preset-env"]
-                    }
-                }
             }
-        ]
+          ]
     },
     resolve: {
         alias: {
@@ -67,7 +71,9 @@ module.exports = {
         },
     },
     plugins: [
-        new HtmlWebpackPlugin(),
+        new HtmlWebpackPlugin({
+          title: "Reslate SE"
+        }),
         new VueLoaderPlugin(),
     ]
 };

webpack.dev.js

@@ -2,7 +2,12 @@ const { merge } = require("webpack-merge");
 const common = require("./webpack.common");
 
 let config = {
-    mode: "development",
+  mode: "development",
+  devtool: "eval-source-map",
+  cache: {
+    type: "filesystem",
+    allowCollectingMemory: true,
+  }
 };
 
 module.exports = merge(common, config);

webpack.prod.js

@@ -1,8 +1,28 @@
 const { merge } = require("webpack-merge");
 const common = require("./webpack.common");
+const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
 
 let config = {
-    mode: "production",
+  mode: "production",
+  optimization: {
+    minimize: true,
+    usedExports: true,
+    minimizer: [
+      new ImageMinimizerPlugin({
+        minimizer: {
+          implementation: ImageMinimizerPlugin.squooshMinify,
+          options: {
+            encodeOptions: {
+              pngquant: {
+                strip: true,
+              }
+            },
+          },
+        },
+      }),
+    ],
+  },
+  
 };
 
 module.exports = merge(common, config);