Как отлаживать файлы tsx при использовании webpack

Я новичок во фронтенд-разработке.

Я пишу компонент reactjs в формате tsx. это один из моих файлов tsx:

import * as React from "react";
import {observer} from "mobx-react";
import {observable} from "mobx";
import {TileGrid, Tile} from "./GridStack"




@observer
export class Dashboard extends React.Component<any, any>{

    addTiles() {

        this.props.data.push(
            {title: "I'm a !"}
        );
    }

    render() {
        return (
            <div>
                <h1>I'm dashboard !</h1>
                <button onClick={this.addTiles.bind(this)}>Add some tiles</button>
                <TileGrid columnCount="12">
                    {this.props.data.map((x) => {
                        return (
                            <Tile x="1" minWidth="2" minHeight="3">
                                {x.title}
                            </Tile>
                        )
                    })}
                </TileGrid>
            </div>
        )
    }
}

Как видите, он имеет формат Node Module. и он зависит от модуля GridStack.

Это мой файл tsconfig.json:

{
    "compileOnSave": true,
    "compilerOptions": {
        "sourceMap": true,
        "target": "es5",
        "module": "commonjs",
        "declaration": false,
        "noImplicitAny": false,
        "removeComments": true,
        "experimentalDecorators": true,
        "noLib": false,
        "jsx": "react"

    },
    "exclude": [
        "node_modules",
        "static"
    ]
}

выходные файлы js содержат такие команды, как reuqire(...), которые не определены для браузеров.

для решения этой проблемы я решил использовать webpack .

Это решает эту проблему, но теперь я столкнулся с новой проблемой.

Я не могу отлаживать файл GridStack.tsx, потому что веб-пакет просто позволяет мне отлаживать файл tsx корневого уровня.

это мой файл webpack.config.js:

module.exports = {
    entry: './TS/controllers/App.tsx',
    output: {
        filename: './dist/app.js'
    },
    devtool: 'source-map',
    resolve: {
        extensions: ['', '.Webpack.js', '.web.js', '.ts', '.js', '.tsx']
    },
    module: {
        loaders: [
                {
                    test: /\.tsx?$/,
                    exclude: /(node_modules|bower_components)/,
                    loader: 'ts-loader'
                }
        ],
        preLoaders: [
                // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
                { test: /\.tsx$/, loader: "source-map-loader" }
        ]
    }
}

Сборка и упаковка не являются моей текущей проблемой. Мне просто нужны js-файлы, дружественные для браузера, и возможность отладки каждого tsx-файла.

Ваша помощь будет оценена по достоинству.