Не удается отладить React + Typescript в браузере. JS-файлы не генерируются в выходном каталоге

Question

Я настроил Typescript с Webpack для проекта React. Проблема в том, что я не могу отлаживать в своем браузере, используя источник .JS. Только bundle.js генерируется.

tsconfig.json

{
    "compilerOptions": {
        "outDir": "./dist/",
        "sourceMap": true,
        "module": "commonjs",
        "target": "es6",
        "jsx": "react"
    },
    "include": [
        "./src/**/**/*"
    ]
}

webpack.config.js (ОБНОВЛЕНО)

const path = require('path')
module.exports = {
    mode: 'development',
    entry: "./src/index.tsx",
    output: {
        filename: "bundle.js",
        path: path.resolve(__dirname, './dist')
    },
    resolve: {
        // Add '.ts' and '.tsx' as resolvable extensions.
        extensions: [".ts", ".tsx", ".js", ".json"]
    },
    devtool: 'source-map',
    module: {
        rules: [
            // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
            {  test: /\.tsx?$/, loader: "ts-loader" },
            // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
            { enforce: "pre", test: /\.js?$/, loader: "source-map-loader" }
        ]
    },
    // When importing a module whose path matches one of the following, just
    // assume a corresponding global variable exists and use that instead.
    // This is important because it allows us to avoid bundling all of our
    // dependencies, which allows browsers to cache those libraries between builds.
    externals: {
        "react": "React",
        "react-dom": "ReactDOM",
        "react-router-dom": "ReactRouterDOM",
        "reactstrap": "Reactstrap",
        "flux" : "Flux"
    }
};

Теперь это мой вывод в моем dist каталоге

.
├── bundle.js
└── bundle.js.map

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

Answer 1

Я тоже сталкивался с такой же проблемой раньше. установить конфигурационный пакет webtop devtool на cheap-module-eval-source-map

devtool: 'cheap-module-eval-source-map'

Answer 2

Вам нужно будет добавить это в конфигурацию вашего веб-пакета и прочитать соответствующую документацию.

devtool: 'source-map',