Short import for *.tsx and *.jsx, do I need to add aliases to both webpack config and tsconfig?

Question

typescript

Hello! So...
I have a folder with modules. Each module has its own folders with components, reducers, actions, types, fixtures, etc.
This folder with modules is periodically replenished.
I decided to simplify the import inside the directories of these modules.
Those.
For example, we have the following folder structure:
---| src
------| modules
--------| about
--------| menu
--------| contacts
--------| orderSuccess

I need, for example, in the about folder, instead of importing "../../../../components/footer/footer" there is an import "@about/components/footer/footer". OK. Since the folder is constantly updated with new modules, I decided to automate the process of adding new aliases.
I wrote a method that reads a directory at the specified path (fs.readdirSync), returns an array of all files and folders in this directory, and after that I form an alias object and spread it in the resolve.alias object in webpack.config. Everything works, everything is ok. BUT.

The project has typescript. Judging by what I read, for typescript (as well as for jest) you need to add aliases in the same way. Everything is fine, but here my method is no longer in the cash register because tsconfig is json. And I don’t really want to add pens every time.

Tell me, plz mb, is there a universal solution in which we write aliases in 1 place and both webpack and typescript will refer to this place?
If there is, then what? If not, is it possible to somehow use my method for typescript configuration?

Answer 1

tsconfig.json

{
    "compilerOptions": {
        "baseUrl": "./",
        "paths": {
            "@*": ["./src/modules/*"]
        }
    }
}

the rest of the parameters to your liking
with webpack, I'm afraid you will have to generate your own alias for each folder, but given that the webpack config is a code, it's not a big problem, but it can take tsconfig.json as the basis for generation