Load index.html with file-loader, instead of being a static file

package-lock.json

@@ -20,6 +20,7 @@
         "@types/intl": "^1.2.0",
         "babel-loader": "^8.2.3",
         "css-loader": "^6.5.1",
+        "file-loader": "^6.2.0",
         "style-loader": "^3.3.1",
         "ts-loader": "^9.2.6",
         "typescript": "^4.2.3",
@@ -3163,6 +3164,58 @@
         "node": ">=0.8.0"
       }
     },
+    "node_modules/file-loader": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/file-loader/-/file-loader-6.2.0.tgz",
+      "integrity": "sha512-qo3glqyTa61Ytg4u73GultjHGjdRyig3tG6lPtyX/jOEJvHif9uB0/OCI2Kif6ctF3caQTW2G5gym21oAsI4pw==",
+      "dev": true,
+      "dependencies": {
+        "loader-utils": "^2.0.0",
+        "schema-utils": "^3.0.0"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^4.0.0 || ^5.0.0"
+      }
+    },
+    "node_modules/file-loader/node_modules/loader-utils": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.2.tgz",
+      "integrity": "sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==",
+      "dev": true,
+      "dependencies": {
+        "big.js": "^5.2.2",
+        "emojis-list": "^3.0.0",
+        "json5": "^2.1.2"
+      },
+      "engines": {
+        "node": ">=8.9.0"
+      }
+    },
+    "node_modules/file-loader/node_modules/schema-utils": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",
+      "integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==",
+      "dev": true,
+      "dependencies": {
+        "@types/json-schema": "^7.0.8",
+        "ajv": "^6.12.5",
+        "ajv-keywords": "^3.5.2"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
     "node_modules/fill-range": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
@@ -8676,6 +8729,40 @@
         "websocket-driver": ">=0.5.1"
       }
     },
+    "file-loader": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/file-loader/-/file-loader-6.2.0.tgz",
+      "integrity": "sha512-qo3glqyTa61Ytg4u73GultjHGjdRyig3tG6lPtyX/jOEJvHif9uB0/OCI2Kif6ctF3caQTW2G5gym21oAsI4pw==",
+      "dev": true,
+      "requires": {
+        "loader-utils": "^2.0.0",
+        "schema-utils": "^3.0.0"
+      },
+      "dependencies": {
+        "loader-utils": {
+          "version": "2.0.2",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.2.tgz",
+          "integrity": "sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==",
+          "dev": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        },
+        "schema-utils": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",
+          "integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==",
+          "dev": true,
+          "requires": {
+            "@types/json-schema": "^7.0.8",
+            "ajv": "^6.12.5",
+            "ajv-keywords": "^3.5.2"
+          }
+        }
+      }
+    },
     "fill-range": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",

package.json

@@ -15,6 +15,7 @@
     "@types/intl": "^1.2.0",
     "babel-loader": "^8.2.3",
     "css-loader": "^6.5.1",
+    "file-loader": "^6.2.0",
     "style-loader": "^3.3.1",
     "ts-loader": "^9.2.6",
     "typescript": "^4.2.3",

src/index.css

@@ -0,0 +1,4 @@
+.fc .fc-toolbar.fc-header-toolbar {
+  margin-bottom: 0;
+  text-align: center;
+}

src/index.html

@@ -10,10 +10,3 @@
     <script src="bundle.js"></script>
   </body>
 </html>
-
-<style>
-  .fc .fc-toolbar.fc-header-toolbar {
-    margin-bottom: 0;
-    text-align: center;
-  }
-</style>

src/index.ts

@@ -13,6 +13,9 @@ import resourceTimeGridPlugin from '@fullcalendar/resource-timegrid';
 
 import { unique_colors } from 'unique-colors';
 
+import './index.html';
+import './index.css';
+
 const calendars: { [key: string]: string } = {
   computer_lab: '6mmjp85e4732ru6skf1dda54ls@group.calendar.google.com',
   electronics: '1g8atbdschshrg2inf162rcqt4@group.calendar.google.com',

webpack.config.js

@@ -4,12 +4,6 @@ module.exports = {
   mode: 'development',
   entry: './src/index.ts',
   devServer: {
-    static: {
-      directory: path.join(__dirname, 'public'),
-      watch: {
-        ignored: /\.#.*/,
-      }
-    },
     proxy: {
       '/calendar': {
         target: 'https://calendar.google.com',
@@ -41,7 +35,16 @@ module.exports = {
       {
         test: /\.css$/i,
         use: ["style-loader", "css-loader"],
-      }
+      },
+      {
+        test: /\/index.html$/i,
+        use: {
+          loader: "file-loader",
+          options: {
+            name: '[name].[ext]',
+          }
+        },
+      },
     ],
   },
   resolve: {