Webpack无法解析文件夹中的索引文件

Question

我有一个项目，其中我将React与Typescript和Webpack结合使用。
我知道如果导出所有必需文件的文件夹中有index.tsx个文件，我可以像

这样从folder导入项目

import { item } from 'path/to/folder'

代替

import { item } from 'path/to/folder/and/file.tsx'

但是由于某种原因，Webpack无法解析我的文件。

// webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/index.tsx',
    output: {
        path: path.join(__dirname, '/dist'),
        filename: 'bundle.js',
    },
    resolve: {
        extensions: [ '.ts', '.tsx', '.js', '.jsx' ],
    },
    module: {
        rules: [
            {
                test: /\.(ts|js)x?$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
            },

            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader',
                ],
            },

            {
                test: /\.s[ac]ss$/i,
                use: [
                    'style-loader',
                    'css-loader',
                    'sass-loader',
                ],
            },
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
        }),
    ],
};

// file structure

+ src
| + components
| | + App
| | | - App.tsx
| | | - types.ts
| | | - index.tsx
| | - index.tsx
| - index.html
| - index.tsx

// src/components/App/App.tsx

export const App: FC<AppProps> = ({ text }: AppProps) => {
    return (
        <div>{text || "No text"}</div>
    );
}

// src/components/App/types.ts

export interface AppProps {
    text?: string,
}

// src/components/App/index.tsx

export { App } from './App';
export * from './types';

// src/components/index.tsx

export * from './App';

// src/index.tsx

import React from 'react';
import ReactDOM from 'react-dom';

import { App }  from './components';

ReactDOM.render(
    <App />,
    document.getElementById('reactRoot') as HTMLElement
);

此代码在捆绑时发生错误：

ERROR in ./src/components/App.tsx
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: ENOENT: no such file or directory, open 'C:\programming\index\web\projects\xmlSmartGenerator\src\components\App.tsx'

我会很感激。