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,65 +1,75 @@
 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 = {
+module.exports = (env, argv) => {
-    mode: "development",
+    const devMode = argv.mode !== 'production'
-    entry: {
+
-        bundle: path.resolve(__dirname, "src", "index.tsx")
+    return {
-    },
+        mode: devMode ? "development" : "production",
-    output: {
+        entry: {
-        filename: "[name].[contenthash].js",
+            bundle: path.resolve(__dirname, "src", "index.tsx")
-        path: path.resolve(__dirname, "dist")
+        },
-    },
+        output: {
-    module: {
+            filename: "[name].[contenthash:10].js",
-        rules: [
+            path: path.resolve(__dirname, "dist"),
-            {
+            clean: true
-                test: /\.tsx?/,
+        },
-                use: 'ts-loader',
+        module: {
-                exclude: /node_modules/
+            rules: [
-            },
+                {
-            {
+                    test: /\.tsx?/,
-                test: /\.jsx?$/,
+                    use: 'ts-loader',
-                include: path.resolve(__dirname, 'src'),
+                    exclude: /node_modules/
-                exclude: /node_modules/,
+                },
-                use: {
+                {
-                    loader: 'babel-loader',
+                    test: /\.jsx?$/,
-                    options: {
+                    include: path.resolve(__dirname, 'src'),
-                        presets: [
+                    exclude: /node_modules/,
-                            ['@babel/preset-env', { "targets": "defaults" }],
+                    use: {
-                            '@babel/preset-react'
+                        loader: 'babel-loader',
-                        ]
+                        options: {
+                            presets: [
+                                ['@babel/preset-env', { "targets": "defaults" }],
+                                '@babel/preset-react'
+                            ]
+                        }
                     }
-                }
+                },
+                {
+                    test: /\.(sa|sc|c)ss$/,
+                    use: [
+                        // Creates `style` nodes from JS strings
+                        devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
+                        // Translates CSS into CommonJS
+                        "css-loader",
+                        // Compiles Sass to CSS
+                        "sass-loader",
+                    ],
+                },
+                {
+                    test: /\.css$/i,
+                    use: [MiniCssExtractPlugin.loader, "css-loader"],
+                },
+            ]
+        },
+        resolve: {
+            extensions: [".tsx", ".jsx", ".js"],
+            alias: {
+                "@mui/styles": path.resolve(__dirname, "node_modules", "@mui/styles"),
             },
-            {
+            plugins: [new TsconfigPathsPlugin()]
-                test: /\.scss$/,
+        },
-                use: [
+        plugins: [
-                    // Creates `style` nodes from JS strings
+            new HtmlWebpackPlugin({
-                    "style-loader",
+                template: path.join(__dirname, "src", "html", "template.html"),
-                    // Translates CSS into CommonJS
+                filename: "index.html",
-                    "css-loader",
+                title: "React with Webpack",
-                    // Compiles Sass to CSS
+            }),
-                    "sass-loader",
+        ].concat(devMode ? [] : [new MiniCssExtractPlugin({
-                ],
+            filename: '[name].css',
-            },
+            chunkFilename: '[id].css'
-            {
+        })])
-                test: /\.css$/i,
+    }
-                use: [MiniCssExtractPlugin.loader, "css-loader"],
-            },
-        ]
-    },
-    resolve: {
-        extensions: [".tsx", ".jsx", ".js", ".css", ".scss"],
-        alias: {
-            "@mui/styles": path.resolve(__dirname, "node_modules", "@mui/styles"),
-        }
-    },
-    plugins: [
-        new HtmlWebpackPlugin({
-            template: path.join(__dirname, "src", "html", "template.html"),
-            filename: "index.html",
-            title: "React with Webpack",
-        })
-    ]
 }