Update webpack to 5.4.0 and rework "output" part of the build process

package.json

@@ -11,13 +11,7 @@
     "url": "https://github.com/jellyfin/jellyfin-chromecast/issues"
   },
   "homepage": "https://jellyfin.org/",
-  "dependencies": {
-    "clean-webpack-plugin": "^3.0.0",
-    "copy-webpack-plugin": "^5.1.1",
-    "file-loader": "^6.0.0",
-    "webpack": "4.42.1",
-    "webpack-cli": "^3.3.11"
-  },
+  "dependencies": {},
   "scripts": {
     "prepare": "webpack --config webpack.config.js --mode=production",
     "build:production": "webpack --config webpack.config.js --mode=production",
@@ -28,10 +22,17 @@
     "@types/chromecast-caf-receiver": "^5.0.12",
     "@typescript-eslint/eslint-plugin": "^4.6.0",
     "@typescript-eslint/parser": "^4.6.0",
+    "clean-webpack-plugin": "^3.0.0",
     "eslint": "6.8.0",
     "eslint-plugin-eslint-comments": "^3.1.2",
+    "file-loader": "^6.2.0",
+    "html-loader": "^1.3.2",
+    "html-webpack-plugin": "^4.5.0",
     "source-map-loader": "^1.1.2",
     "ts-loader": "^8.0.7",
-    "typescript": "^4.0.5"
+    "typescript": "^4.0.5",
+    "url-loader": "^4.1.1",
+    "webpack": "^5.4.0",
+    "webpack-cli": "^4.2.0"
   }
 }

src/css/jellyfin.css

@@ -300,13 +300,13 @@ body {
 }
 
 cast-media-player {
-    --spinner-image: url("img/spinner.png");
-    --playback-logo-image: url("img/banner.png");
+    --spinner-image: url("../img/spinner.png");
+    --playback-logo-image: url("../img/banner.png");
 
-    --watermark-image: url("img/banner-reverse.png");
+    --watermark-image: url("../img/banner-reverse.png");
     --watermark-size: 225px;
     --watermark-position: top right;
 
     --theme-hue: 195.3; /* Jellyfin blue */
     --progress-color: #00a4dc;
-}
+}

src/index.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <title>Jellyfin</title>
     <link rel="stylesheet" href="css/glyphicons.css">
-    <link rel="stylesheet" href="css/jellyfin.css?hash=001">
+    <link rel="stylesheet" href="css/jellyfin.css">
     <style>
         @import url('https://fonts.googleapis.com/css?family=Quicksand');
     </style>
@@ -41,6 +41,5 @@ <h2>Select your media in Jellyfin and play it here</h2>
         </div>
     </div>
     <div class="detailLogo"></div>
-    <script src="bundle.js"></script>
 </body>
 </html>

webpack.config.js

@@ -1,28 +1,32 @@
 const path = require("path");
-const CopyWebpackPlugin = require("copy-webpack-plugin");
-const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const { CleanWebpackPlugin } = require("clean-webpack-plugin");
 const webpack = require("webpack");
+const HtmlWebpackPlugin = require('html-webpack-plugin');
 
 let config = {
     context: path.resolve(__dirname, "src"),
     entry: "./app.ts",
     output: {
-        filename: "bundle.js",
-        path: path.resolve(__dirname, "dist")
+        filename: "[name].[fullhash].js",
+        path: path.resolve(__dirname, "dist"),
+        publicPath: './'
     },
     resolve: {
-        extensions: [".webpack.js", ".web.js", ".ts", ".js"]
+        extensions: [".ts", ".js"]
     },
     plugins: [
         new CleanWebpackPlugin(),
-        new CopyWebpackPlugin([{
-            from: "**/*",
-            to: ".",
-            ignore: ['*.js']
-        }])
+        new HtmlWebpackPlugin({
+            filename: 'index.html',
+            template: 'index.html',
+            hash: false
+        })
     ],
     module: {
         rules: [
+            { test: /\.html$/, loader: "html-loader"},
+            { test: /\.(svg|png|jpe?g|gif|eot|woff|tff)$/i, loader: "url-loader" },
+            { test: /\.css$/i, loader: 'file-loader' },
             { test: /\.tsx?$/, loader: "ts-loader" },
             { test: /\.js$/, loader: "source-map-loader" }
         ]