add directory aliases

src/api/apiService.ts

@@ -1,5 +1,4 @@
 import axios, { AxiosPromise, AxiosRequestConfig, AxiosResponse } from "axios";
-
 class ApiService {
   async callApi(config: AxiosRequestConfig): Promise<AxiosPromise<AxiosResponse>> {
     return axios.request(config);

src/components/App/App.test.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import renderConnected from "../../utilities/test/renderConnected";
+import renderConnected from "utilities/test/renderConnected";
 
 import App from "./App";
 

src/components/App/App.tsx

@@ -1,13 +1,13 @@
 import React, { FC, useEffect } from "react";
 import { useDispatch, useSelector } from "react-redux";
 
-import { fetchUserById } from "../../state/userProfile/actions";
-import { getUsername } from "../../state/userProfile/selectors";
+import { fetchUserById } from "state/userProfile/actions";
+import { getUsername } from "state/userProfile/selectors";
 
 import Loader from "../Loader/Loader";
 import UserHeader from "../UserHeader/UserHeader";
 
-import "../../styles/app.scss";
+import "styles/app.scss";
 
 const App: FC = () => {
   const dispatch = useDispatch();

src/components/UserHeader/UserHeader.test.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { screen } from "@testing-library/react";
-import renderConnected from "../../utilities/test/renderConnected";
+import renderConnected from "utilities/test/renderConnected";
 
 import UserHeader from "./UserHeader";
 

src/components/UserHeader/UserHeader.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from "react";
 import { useSelector } from "react-redux";
 
-import { getUsername } from "../../state/userProfile/selectors";
+import { getUsername } from "state/userProfile/selectors";
 
 const UserHeader: FC = () => {
   const userName = useSelector(getUsername);

src/index.tsx

@@ -2,8 +2,8 @@ import React from "react";
 import { render } from "react-dom";
 import { Provider } from "react-redux";
 
-import store from "./state/store";
-import App from "./components/App/App";
+import store from "state/store";
+import App from "components/App/App";
 
 render(
   <Provider store={store}>

src/state/userProfile/actions.ts

@@ -1,6 +1,6 @@
 import { createAsyncThunk } from "@reduxjs/toolkit";
-import ApiService from "../../api/apiService";
-import apiConfig from "../../api/apiConfig";
+import ApiService from "api/apiService";
+import apiConfig from "api/apiConfig";
 
 export const fetchUserById = createAsyncThunk("users/fetchById", async () => {
   const response = await ApiService.callApi({

tsconfig.json

@@ -6,6 +6,13 @@
     "outDir": "./dist",
     "jsx": "react",
     "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true
-  },
-}
+    "allowSyntheticDefaultImports": true,
+    "paths": {
+      "api/*": ["./src/api/*"],
+      "components/*": ["./src/components/*"],
+      "state/*": ["./src/state/*"],
+      "styles/*": ["./src/styles/*"],
+      "utilities/*": ["./src/utilities/*"]
+    }
+  }
+}

webpack.config.js

@@ -1,23 +1,23 @@
-const path = require('path');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
+const path = require("path");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
 
-const buildPath = path.join(__dirname, './dist');
-const sourcePath = path.join(__dirname, './src');
-const publicPath = path.join(__dirname, './public');
+const buildPath = path.join(__dirname, "./dist");
+const sourcePath = path.join(__dirname, "./src");
+const publicPath = path.join(__dirname, "./public");
 
 module.exports = () => ({
   entry: {
     app: `${sourcePath}/index.tsx`,
   },
   output: {
     path: buildPath,
-    filename: '[name].[hash].js',
-    chunkFilename: '[name].[hash].js',
+    filename: "[name].[hash].js",
+    chunkFilename: "[name].[hash].js",
   },
-  mode: 'development',
-  devtool: 'source-map',
+  mode: "development",
+  devtool: "source-map",
   devServer: {
-    contentBase: './dist',
+    contentBase: "./dist",
     historyApiFallback: true,
     compress: true,
     open: true,
@@ -29,32 +29,39 @@ module.exports = () => ({
     minimize: false,
   },
   resolve: {
-    modules: ['node_modules'],
-    extensions: ['.ts', '.tsx', '.js', '.jsx'],
+    modules: ["node_modules"],
+    extensions: [".ts", ".tsx", ".js", ".jsx"],
+    alias: {
+      api: path.resolve(sourcePath, "api/"),
+      components: path.resolve(sourcePath, "components/"),
+      state: path.resolve(sourcePath, "state/"),
+      styles: path.resolve(sourcePath, "styles/"),
+      utilities: path.resolve(sourcePath, "utilities/"),
+    },
   },
   module: {
     rules: [
       {
         test: /\.(ts)x?$/,
         exclude: /node_modules/,
         use: {
-          loader: 'ts-loader',
+          loader: "ts-loader",
         },
       },
       {
         test: /\.(scss|css)$/,
         use: [
           {
-            loader: 'style-loader',
+            loader: "style-loader",
           },
           {
-            loader: 'css-loader',
+            loader: "css-loader",
           },
           {
-            loader: 'postcss-loader',
+            loader: "postcss-loader",
           },
           {
-            loader: 'sass-loader',
+            loader: "sass-loader",
             options: {
               sourceMap: true,
             },
@@ -67,9 +74,9 @@ module.exports = () => ({
 
   plugins: [
     new HtmlWebpackPlugin({
-      chunks: ['vendor', 'app'],
-      filename: 'index.html',
-      template: path.join(publicPath, '/index.html'),
+      chunks: ["vendor", "app"],
+      filename: "index.html",
+      template: path.join(publicPath, "/index.html"),
     }),
   ],
 });