Solve the issue of Paths in tsconfig not properly resolved by Webpack plugin

When i was using webpack plugin for Typescript, Paths are not getting resolved properly and I am getting the following error.

ERROR in ./src/handler.ts
Module not found: Error: Can't resolve '@app' in '/serverless/V2Starter/src'
 @ ./src/handler.ts 5:39-54

and my tsconfig is

"paths": {
      "@app": ["app"],
      "@controllers/*": ["controllers/*"],
      "@interfaces/*": ["interfaces/*"],
      "@middlewares/*": ["middlewares/*"],
      "@models/*": ["models/*"],
      "@routes/*": ["routes/*"]
    }

We can solve this issue by installing a resolver plugin to the webpack paths.

npm install tsconfig-paths-webpack-plugin

and add the following plugin to webpack.config.js

resolve: {
    extensions: [".mjs", ".json", ".ts"],
    symlinks: false,
    cacheWithContext: false,
    plugins: [new TsconfigPathsPlugin({})],
  }