无法在浏览器中调试React + Typescript。在输出目录中未生成JS文件

Question

我已经用Webpack为一个React项目配置了Typescript。问题是，我无法使用.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

我的意图是获取所有 .tsx 文件的 .js 源，这样我就可以通过使用控制台的“源”选项卡在浏览器中进行调试。

Answer 1

您需要将其添加到您的webpack配置中，并阅读适当的文档。

devtool: 'source-map',

Answer 2

我之前也遇到过同样的问题。 将webpack配置devtool设置为cheap-module-eval-source-map

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