is it possible to make webpack 5 compile typescript like tsc

Question

When I compile the typescript project, I could use this command:

"tscbuild": "tsc",

this will compile the *.ts file to *.js file and keep the folder structure. I also compile the project using this command:

"build": "rm -rf dist && webpack --mode development --config src/config/webpack.config.js",

but when I use webpack 5 to compile the project, it will only generate one bundle file and did not generate the js file for each ts file. is it possible to make webpack 5 compile like tsc command to generate js file for each ts? this is my current webpack config:

import webpack from 'webpack';
// https://stackoverflow.com/questions/41553291/can-you-import-nodes-path-module-using-import-path-from-path
import * as path from 'path';

const __dirname = path.resolve();

export default {
  entry : {
    'index' : './index.ts', 
  } ,
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
    alias: {
      '@': path.resolve(__dirname, '../'),
  },
  },
  output : {
    path :  '/Users/xxx/source/frontend/wheel/dist' ,
    filename : '[name].js'
  },
  module : {
    rules : [
      {
        test: /\.ts$/,
        loader: 'ts-loader',
        options: {
          appendTsSuffixTo: [/\.vue$/],
        },
        exclude: /node_modules|\.d\.ts$/
      },
      {
        test : /\.js$/ ,
        exclude : [ /node_modules(?!(\/|\\?\\)(translation\.js|selection-widget|connect\.io|chrome-env)\1)/ ] ,
        loader : 'babel-loader'
      } ,
    ]
  }
};

PS: I did not want to add multiple entry to make the webpack generate multiple js file, what I want is to make the webpack compile each ts file separate and generate the mapping js file for each ts file and keep the folder structure.For example, the source look like this:

-src
 - folderA
  - foo.ts
 - folderB
  - bar.ts

what I want the webpack compile output like this:

-dist
 - folderA
  - foo.js
 - folderB
  - bar.js