build(npm): add babel and postcss webpack rules

static/package.json

@@ -16,12 +16,18 @@
     "flag-icons": "^7.5.0"
   },
   "devDependencies": {
+    "@babel/core": "^8.0.1",
+    "@babel/preset-env": "^8.0.2",
     "@types/bootstrap": "^5.2.11",
     "@types/node": "^26.1.0",
+    "babel-loader": "^10.1.1",
     "copy-webpack-plugin": "^14.0.0",
+    "core-js": "^3.49.0",
     "css-loader": "^7.1.4",
     "file-loader": "^6.2.0",
     "mini-css-extract-plugin": "^2.10.2",
+    "postcss": "^8.5.22",
+    "postcss-loader": "^8.2.1",
     "sass": "^1.101.0",
     "sass-loader": "^17.0.0",
     "style-loader": "^4.0.0",
@@ -30,5 +36,9 @@
     "typescript": "^6.0.3",
     "webpack": "^5.108.3",
     "webpack-cli": "^7.1.0"
-  }
+  },
+  "browserslist": [
+    "> 0.5%",
+    "last 2 versions"
+  ]
 }

static/webpack.config.ts

@@ -9,26 +9,26 @@ const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
 const config: webpack.Configuration = {
+  target: ["web", "es6"],
   entry: ["./src/index.ts", "./src/main.scss"],
   module: {
     rules: [
       { test: /\.svg$/, use: ["file-loader"] },
       {
         test: /\.tsx?$/,
-        use: {
-          loader: "ts-loader",
-        },
+        use: [{ loader: "babel-loader" }, { loader: "ts-loader" }],
         exclude: /node_modules/,
       },
       {
         test: /\.s[ac]ss$/i,
         use: [
           MiniCssExtractPlugin.loader,
-          { loader: "css-loader", options: { sourceMap: true, url: false } },
+          { loader: "css-loader", options: { sourceMap: false, url: false } },
+          { loader: "postcss-loader", options: { sourceMap: false } },
           {
             loader: "sass-loader",
             options: {
-              sourceMap: true,
+              sourceMap: false,
               sassOptions: { quietDeps: true, silenceDeprecations: ["color-functions", "global-builtin", "import"] },
             },
           },