Convert webpack config to ts

package.json

@@ -25,9 +25,11 @@
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.10",
     "@types/clamp": "^1.0.1",
     "@types/color-convert": "^2.0.0",
+    "@types/node": "^22.13.0",
     "@types/react": "^18.0.28",
     "@types/react-copy-to-clipboard": "^5.0.4",
     "@types/react-dom": "^18.0.11",
+    "@types/webpack": "^5.28.5",
     "clamp": "^1.0.1",
     "color-convert": "^2.0.1",
     "css-loader": "^6.7.3",
@@ -39,6 +41,7 @@
     "react-refresh": "^0.14.0",
     "style-loader": "^3.3.1",
     "ts-loader": "^9.5.2",
+    "ts-node": "^10.9.2",
     "typescript": "^4.9.5",
     "webpack": "^5.94.0",
     "webpack-cli": "^4.9.2",

tsconfig.json

@@ -23,7 +23,8 @@
     "noUnusedParameters": true, // Report errors on unused parameters
     "incremental": true, // Enable incremental compilation by reading/writing information from prior compilations to a file on disk
     "noFallthroughCasesInSwitch": true, // Report errors for fallthrough cases in switch statement
-    "experimentalDecorators": true
+    "experimentalDecorators": true,
+    "types": ["node"]
   },
   "include": [
     "src/**/*" // *** The files TypeScript should type check ***

webpack.config.js → webpack.config.ts

@@ -1,13 +1,15 @@
-const path = require('path');
+import path from 'path';
+import webpack from 'webpack';
+import 'webpack-dev-server';
 
 const isDevelopment = process.env.NODE_ENV !== 'production';
 
-module.exports = {
+const config: webpack.Configuration = {
   mode: isDevelopment ? 'development' : 'production',
   entry: './src/index.tsx',
   output: {
     filename: 'main.js',
-    path: path.resolve(__dirname, 'dist'),
+    path: path.resolve(import.meta.dirname, 'dist'),
   },
   module: {
     rules: [
@@ -33,8 +35,10 @@ module.exports = {
   devServer: {
     hot: true,
     static: {
-      directory: path.join(__dirname, 'dist'),
+      directory: path.join(import.meta.dirname, 'dist'),
     },
     compress: true,
   },
 };
+
+export default config;