webpack: replace style-loader with mini-css-extract-plugin

will allow to have css files instead of style blocks in the html file

package-lock.json

@@ -168,6 +168,7 @@
         "esm": "3.2.25",
         "jsdoc": "4.0.4",
         "lorem-ipsum": "2.0.8",
+        "mini-css-extract-plugin": "2.9.2",
         "nodemon": "3.1.9",
         "postcss-loader": "8.1.1",
         "prettier": "3.5.1",
@@ -13062,6 +13063,27 @@
       "integrity": "sha512-Ja8zcKAwjYG180ZGB8WKygmbqs4RFEQZ0JTE1T49/6nCHWXVcA0WNW8Syl0sMbMyYZvQ5kOZWzLylgCvplqhRw==",
       "license": "MIT"
     },
+    "node_modules/mini-css-extract-plugin": {
+      "version": "2.9.2",
+      "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-2.9.2.tgz",
+      "integrity": "sha512-GJuACcS//jtq4kCtd5ii/M0SZf7OZRH+BxdqXZHaJfb8TJiVl+NgQRPwiYt2EuqeSkNydn/7vP+bcE27C5mb9w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "schema-utils": "^4.0.0",
+        "tapable": "^2.2.1"
+      },
+      "engines": {
+        "node": ">= 12.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^5.0.0"
+      }
+    },
     "node_modules/minimalistic-assert": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",

package.json

@@ -215,6 +215,7 @@
     "esm": "3.2.25",
     "jsdoc": "4.0.4",
     "lorem-ipsum": "2.0.8",
+    "mini-css-extract-plugin": "2.9.2",
     "nodemon": "3.1.9",
     "postcss-loader": "8.1.1",
     "prettier": "3.5.1",

webpack.config.ts

@@ -2,6 +2,7 @@ import { fileURLToPath } from "url";
 import path from "path";
 import autoprefixer from "autoprefixer";
 import assetPath from "./src/services/asset_path.js";
+import miniCssExtractPlugin from "mini-css-extract-plugin";
 import type { Configuration } from "webpack";
 
 const rootDir = path.dirname(fileURLToPath(import.meta.url));
@@ -18,6 +19,9 @@ const config: Configuration = {
         path: path.resolve(rootDir, "src/public/app-dist"),
         filename: "[name].js"
     },
+    plugins: [
+        new miniCssExtractPlugin()
+    ],
     module: {
         rules: [
             {
@@ -37,7 +41,7 @@ const config: Configuration = {
                 test: /\.(scss)$/,
                 use: [
                     {
-                        loader: "style-loader"
+                        loader: miniCssExtractPlugin.loader
                     },
                     {
                         loader: "css-loader"