added paths to the tsconfig so that it's not a pain to import stuff

package.json

@@ -12,16 +12,6 @@
     "@babel/core": "^7.19.3",
     "@babel/preset-env": "^7.19.3",
     "@babel/preset-react": "^7.18.6",
-    "babel-loader": "^8.2.5",
-    "css-loader": "^6.7.1",
-    "html-webpack-plugin": "^5.5.0",
-    "mini-css-extract-plugin": "^2.6.1",
-    "sass": "^1.55.0",
-    "sass-loader": "^13.1.0",
-    "style-loader": "^3.3.1",
-    "webpack": "^5.74.0",
-    "webpack-cli": "^4.10.0",
-    "webpack-dev-server": "^4.11.1",
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
     "@mui/material": "^5.10.9",
@@ -30,9 +20,20 @@
     "@types/node-sass": "^4.11.3",
     "@types/react": "^18.0.21",
     "@types/react-dom": "^18.0.6",
+    "babel-loader": "^8.2.5",
+    "css-loader": "^6.7.1",
+    "html-webpack-plugin": "^5.5.0",
+    "mini-css-extract-plugin": "^2.6.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "sass": "^1.55.0",
+    "sass-loader": "^13.1.0",
+    "style-loader": "^3.3.1",
     "ts-loader": "^9.4.1",
-    "typescript": "^4.8.4"
+    "tsconfig-paths-webpack-plugin": "^4.0.0",
+    "typescript": "^4.8.4",
+    "webpack": "^5.74.0",
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "^4.11.1"
   }
 }

tsconfig.json

@@ -7,6 +7,11 @@
         "target": "es5",
         "jsx": "react",
         "allowJs": true,
-        "moduleResolution": "node"
+        "moduleResolution": "node",
+        "baseUrl": "./src",
+        "paths" : {
+            "@components/*": ["components/*"],
+            "@scss/*": ["scss/*"],
+        }
     }
 }

webpack.config.js

@@ -1,15 +1,20 @@
 const path = require("path")
 const HtmlWebpackPlugin = require("html-webpack-plugin")
 const MiniCssExtractPlugin = require("mini-css-extract-plugin")
+const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin")
 
-module.exports = {
-    mode: "development",
+module.exports = (env, argv) => {
+    const devMode = argv.mode !== 'production'
+
+    return {
+        mode: devMode ? "development" : "production",
         entry: {
             bundle: path.resolve(__dirname, "src", "index.tsx")
         },
         output: {
-        filename: "[name].[contenthash].js",
-        path: path.resolve(__dirname, "dist")
+            filename: "[name].[contenthash:10].js",
+            path: path.resolve(__dirname, "dist"),
+            clean: true
         },
         module: {
             rules: [
@@ -33,10 +38,10 @@ module.exports = {
                     }
                 },
                 {
-                test: /\.scss$/,
+                    test: /\.(sa|sc|c)ss$/,
                     use: [
                         // Creates `style` nodes from JS strings
-                    "style-loader",
+                        devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
                         // Translates CSS into CommonJS
                         "css-loader",
                         // Compiles Sass to CSS
@@ -50,16 +55,21 @@ module.exports = {
             ]
         },
         resolve: {
-        extensions: [".tsx", ".jsx", ".js", ".css", ".scss"],
+            extensions: [".tsx", ".jsx", ".js"],
             alias: {
                 "@mui/styles": path.resolve(__dirname, "node_modules", "@mui/styles"),
-        }
+            },
+            plugins: [new TsconfigPathsPlugin()]
         },
         plugins: [
             new HtmlWebpackPlugin({
                 template: path.join(__dirname, "src", "html", "template.html"),
                 filename: "index.html",
                 title: "React with Webpack",
-        })
-    ]
+            }),
+        ].concat(devMode ? [] : [new MiniCssExtractPlugin({
+            filename: '[name].css',
+            chunkFilename: '[id].css'
+        })])
+    }
 }