在 Webpack Visual Studio 2017 .NET Core 2.2 捆绑的 Chrome 中调试 Typescript

有几个问题，但大多数答案似乎是“如果你有 VS 2017，现在应该是默认的”。我的调试器无法正常工作，因此我想提供我的具体案例以获得一些帮助。我也是 Typescript 和 Webpack 的新手，可以提供一些背景信息。

项目层次结构

./wwwroot/bundles/bundle.js <- this is the final bundled file
./Scripts/ <- various directories where all the separate Typescript files live

当项目构建时，它会经历以下步骤：

• 核心项目构建
• gulp 任务开始
• 在 gulp 任务中，我使用 webpack 流将 typescript 文件构建到 bundle.js 中

我的内容tsconfig.json file

{
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "strict": true,
    "noImplicitReturns": true,
    "target": "es2015",
    "moduleResolution": "node",
    "module": "es2015"
  },
  "exclude": [
    "node_modules",
    "wwwroot"
  ]
}

的内容webpack.config.js file

module.exports = {
    mode: 'development',
    entry: './Scripts/index.ts',
    devtool: 'inline-source-map',
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/
            }
        ]
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js'],
        alias: {
            'vue$': 'vue/dist/vue.esm.js'
        }
    },
    output: {
        filename: 'bundle.js'
    }
};

吞咽任务编译打字稿并将其放入最终目的地。

gulp.task("compile-typescript", function () {
    return gulp.src("./Scripts/index.ts")
        .pipe(webpack(require("./webpack.config.js")))
        .pipe(gulp.dest("./wwwroot/bundles"));
});

编译并运行所有内容后，当我在 Visual Studio IDE 中放置断点时，出现“断点未绑定”问题。然而，当查看 Chrome 中的调试器时，似乎在 webpack 目录中正确创建了 TypeScript 映射文件。

通过添加此答案中的行：https://stackoverflow.com/a/56512126/5245385 https://stackoverflow.com/a/56512126/5245385到我的 webpack.config.js 我能够让它工作！粘贴如下以供可见：

devtool: false,
plugins: [
    new webpack.SourceMapDevToolPlugin({
        filename: "[file].map",
        fallbackModuleFilenameTemplate: '[absolute-resource-path]',
        moduleFilenameTemplate: '[absolute-resource-path]'
    })
]