Move to using hashed CSS files too

package.json

@@ -8,7 +8,9 @@
     "build-dev": "webpack --mode development && mkdir -p dist && cp src/robots.txt src/style.css src/favicon.ico dist/"
   },
   "devDependencies": {
+    "css-loader": "^6.7.4",
     "html-webpack-plugin": "^5.5.1",
+    "mini-css-extract-plugin": "^2.7.6",
     "webpack": "^5.73.0",
     "webpack-cli": "^4.7.2"
   },
@@ -16,6 +18,7 @@
     "cash-dom": "^8.1.5",
     "chart.js": "^4.3.0",
     "chartjs-adapter-dayjs-3": "^1.2.3",
+    "css-minimizer-webpack-plugin": "^5.0.0",
     "dayjs": "^1.11.7"
   }
 }

src/index.html

@@ -5,7 +5,6 @@
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <meta name="description" content="Track current and historical gold price trends for the World of Warcraft (WoW) in game token, including the US, EU, TW, and KR regions. Prices updated every minute. Simple, quick, and easy info, no ads or tracking, ever.">
-        <link rel="stylesheet" href="style.css">
         <link rel="preconnect" href="https://data.wowtoken.app">
 	    <link rel="dns-prefetch" href="https://data.wowtoken.app">
         <link rel="preload" href="https://data.wowtoken.app/token/current.json" as="fetch" type="application/json" crossorigin="anonymous">

src/index.js

@@ -11,7 +11,7 @@ import {
 } from 'chart.js';
 import $ from 'cash-dom';
 import 'chartjs-adapter-dayjs-3';
-
+import "./style.css"
 
 Chart.register(
     LineElement,

webpack.config.js

@@ -1,9 +1,29 @@
 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
+
 
 module.exports = {
   entry: './src/index.js',
+  module: {
+    rules: [
+      {
+        test: /.s?css$/,
+        use: [MiniCssExtractPlugin.loader, "css-loader"],
+      },
+    ],
+  },
+  optimization: {
+    minimize: true,
+    minimizer: [
+      new CssMinimizerPlugin(),
+    ],
+  },
   plugins: [
+    new MiniCssExtractPlugin({
+      filename: '[name].[contenthash].css'
+    }),
     new HtmlWebpackPlugin({
       template: "src/index.html"
     }),