From 1002d2fd0fa4875d2d067fdc80a9aa32cda29118 Mon Sep 17 00:00:00 2001
From: Arnaud Fauconnet <faucoa@usi.ch>
Date: Thu, 13 Oct 2022 17:06:43 +0200
Subject: [PATCH] added paths to the tsconfig so that it's not a pain to import
 stuff

---
 package.json      |  23 +++++----
 tsconfig.json     |   7 ++-
 webpack.config.js | 126 +++++++++++++++++++++++++---------------------
 3 files changed, 86 insertions(+), 70 deletions(-)

diff --git a/package.json b/package.json
index 244d447..eea5d4d 100644
--- a/package.json
+++ b/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"
   }
 }
diff --git a/tsconfig.json b/tsconfig.json
index c262bc6..4ac0a70 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -7,6 +7,11 @@
         "target": "es5",
         "jsx": "react",
         "allowJs": true,
-        "moduleResolution": "node"
+        "moduleResolution": "node",
+        "baseUrl": "./src",
+        "paths" : {
+            "@components/*": ["components/*"],
+            "@scss/*": ["scss/*"],
+        }
     }
 }
\ No newline at end of file
diff --git a/webpack.config.js b/webpack.config.js
index 6fa81c1..72d34d4 100644
--- a/webpack.config.js
+++ b/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 = {
-    mode: "development",
-    entry: {
-        bundle: path.resolve(__dirname, "src", "index.tsx")
-    },
-    output: {
-        filename: "[name].[contenthash].js",
-        path: path.resolve(__dirname, "dist")
-    },
-    module: {
-        rules: [
-            {
-                test: /\.tsx?/,
-                use: 'ts-loader',
-                exclude: /node_modules/
-            },
-            {
-                test: /\.jsx?$/,
-                include: path.resolve(__dirname, 'src'),
-                exclude: /node_modules/,
-                use: {
-                    loader: 'babel-loader',
-                    options: {
-                        presets: [
-                            ['@babel/preset-env', { "targets": "defaults" }],
-                            '@babel/preset-react'
-                        ]
+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:10].js",
+            path: path.resolve(__dirname, "dist"),
+            clean: true
+        },
+        module: {
+            rules: [
+                {
+                    test: /\.tsx?/,
+                    use: 'ts-loader',
+                    exclude: /node_modules/
+                },
+                {
+                    test: /\.jsx?$/,
+                    include: path.resolve(__dirname, 'src'),
+                    exclude: /node_modules/,
+                    use: {
+                        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"),
             },
-            {
-                test: /\.scss$/,
-                use: [
-                    // Creates `style` nodes from JS strings
-                    "style-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", ".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",
-        })
-    ]
+            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'
+        })])
+    }
 }
\ No newline at end of file