Fixed some minor project setup issues

babel.config.ts

@@ -4,7 +4,7 @@ export = api => {
         [
             "@babel/preset-env",
             {
-                "corejs": { "version":3 },
+                "corejs": {"version": 3},
                 "useBuiltIns": "usage",
                 "targets": {
                     "edge": "17",
@@ -16,10 +16,12 @@ export = api => {
             }
         ]
     ];
+
     const plugins = [
         ["@babel/transform-runtime"],
         ["@babel/plugin-transform-modules-commonjs"]
     ];
+
     return {
         presets,
         plugins

loader/app/css/index.ts

@@ -1,3 +1,3 @@
 import "./index.scss";
 import "./loader.scss";
-import "./overlay.css";
+import "./overlay.scss";

loader/app/css/overlay.scss

@@ -45,9 +45,11 @@
             margin-top: .5em
         }
     }
+}
 
 
-    @media (max-height: 750px) {
+@media (max-height: 750px) {
+    :global {
         #critical-load .container {
             top: unset;
         }

setup_devel_environment.md

@@ -5,7 +5,6 @@ The following tools or applications are required to develop the web client:
 - [1.2 NodeJS](#12-nodejs)
 - [1.2.2 NPM](#122-npm)
 - [1.3 Git bash](#13-git-bash)
-- [1.4 Rust (Options)](#14-rust-optional-will-be-installed-automatically)
 
 ### 1.1 IDE
 It does not matter which IDE you use,  
@@ -27,10 +26,6 @@ IMPORTANT: NPM must be available within the PATH environment variable!
 For using the `.sh` build scripts you require Git Bash.  
 A minimum of 4.2 is recommend, but in general every modern version should work.  
 
-### 1.4 Rust (Optional, will be installed automatically)
-For building the web client audio library, you may want to install rust in advance.  
-Since it will be installed when executing the install libraries script, I'm not going into more detail here.  
-  
 ## 2.0 Project initialization
 
 ### 2.1 Cloning the WebClient

webpack.config.ts

@@ -3,11 +3,9 @@ import * as fs from "fs";
 import trtransformer from "./tools/trgen/ts_transformer";
 import {exec} from "child_process";
 import * as util from "util";
+import * as path from "path";
 
-import {Configuration} from "webpack";
+import { DefinePlugin, Configuration } from "webpack";
-
-const path = require('path');
-const webpack = require("webpack");
 
 import { Plugin as SvgSpriteGenerator } from "webpack-svg-sprite-generator";
 const ManifestGenerator = require("./webpack/ManifestPlugin");
@@ -53,17 +51,7 @@ const generateDefinitions = async (target: string) => {
             timestamp: timestamp,
             entry_chunk_name: JSON.stringify(target === "web" ? "shared-app" : "client-app")
         } as BuildDefinitions
-    };
+    } as any;
-};
-
-const isLoaderFile = (file: string) => {
-    if(file.startsWith(__dirname)) {
-        const path = file.substr(__dirname.length).replace(/\\/g, "/");
-        if(path.startsWith("/loader/")) {
-            return true;
-        }
-    }
-    return false;
 };
 
 const generateIndexPlugin = (target: "web" | "client"): HtmlWebpackPlugin => {
@@ -102,21 +90,23 @@ export const config = async (target: "web" | "client"): Promise<Configuration &
         //"devel-main": "./shared/js/devel_main.ts"
     },
 
-    devtool: isDevelopment ? "inline-source-map" : undefined,
+    devtool: isDevelopment ? "inline-source-map" : "source-map",
     mode: isDevelopment ? "development" : "production",
     plugins: [
         new CleanWebpackPlugin(),
+        new DefinePlugin(await generateDefinitions(target)),
+
         new MiniCssExtractPlugin({
-            filename: isDevelopment ? '[name].css' : '[name].[contenthash].css',
+            filename: isDevelopment ? "[name].[contenthash].css" : "[contenthash].css",
-            chunkFilename: isDevelopment ? '[id].css' : '[id].[contenthash].css',
+            chunkFilename: isDevelopment ? "[name].[contenthash].css" : "[contenthash].css",
             ignoreOrder: true
         }),
+
         new ManifestGenerator({
             outputFileName: "manifest.json",
             context: __dirname
         }),
-        //new BundleAnalyzerPlugin(),
+
-        new webpack.DefinePlugin(await generateDefinitions(target)),
         new SvgSpriteGenerator({
             dtsOutputFolder: path.join(__dirname, "shared", "svg-sprites"),
             publicPath: "js/",
@@ -154,8 +144,11 @@ export const config = async (target: "web" | "client"): Promise<Configuration &
                 }
             }
         }),
+
         generateIndexPlugin(target),
         new HtmlWebpackInlineSourcePlugin(HtmlWebpackPlugin),
+
+        //new BundleAnalyzerPlugin(),
     ].filter(e => !!e),
 
     module: {
@@ -189,12 +182,18 @@ export const config = async (target: "web" | "client"): Promise<Configuration &
                 ]
             },
             {
-                test: (module: string) => module.match(/\.tsx?$/) && !isLoaderFile(module),
+                test: /\.tsx?$/,
                 exclude: /node_modules/,
 
                 use: [
                     {
-                        loader: 'ts-loader',
+                        loader: "babel-loader",
+                        options: {
+                            presets: ["@babel/preset-env"]
+                        }
+                    },
+                    {
+                        loader: "ts-loader",
                         options: {
                             context: __dirname,
                             colors: true,
@@ -212,52 +211,28 @@ export const config = async (target: "web" | "client"): Promise<Configuration &
                     }
                 ]
             },
-            {
-                test: (module: string) => module.match(/\.tsx?$/) && isLoaderFile(module),
-                exclude: /(node_modules|bower_components)/,
-
-                use: [
-                    {
-                        loader: "babel-loader",
-                        options: {
-                            presets: ["@babel/preset-env"]  //Preset used for env setup
-                        }
-                    },
-                    {
-                        loader: "ts-loader",
-                        options: {
-                            transpileOnly: true
-                        }
-                    }
-                ]
-            },
             {
                 test: /\.was?t$/,
                 use: [
                     "./webpack/WatLoader.js"
                 ]
             },
+            {
+                test: /ChangeLog\.md$|\.html$/i,
+                type: "asset/source",
+            },
             {
                 test: /\.svg$/,
                 use: 'svg-inline-loader'
             },
-            {
-                test: /ChangeLog\.md$|\.html$/i,
-                use: {
-                    loader: "raw-loader",
-                    options: {
-                        esModule: false
-                    }
-                },
-            },
             {
                 test: /\.(png|jpg|jpeg|gif)?$/,
-                use: 'file-loader',
+                type: "asset/resource"
             },
         ]
     } as any,
     resolve: {
-        extensions: ['.tsx', '.ts', '.js', ".scss", ".css", ".wasm"],
+        extensions: ['.tsx', '.ts', '.js', ".scss"],
         alias: {
             "vendor/xbbcode": path.resolve(__dirname, "vendor/xbbcode/src"),
             "tc-events": path.resolve(__dirname, "vendor/TeaEventBus/src/index.ts"),