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

Question

有几个问题，但大多数答案似乎是 "it should be default now if you have 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 流将打字稿文件构建到 bundle.js

我的 tsconfig.json 文件的内容

{
  "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 文件的内容

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 编译打字稿并将其放入最终目的地的任务。

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 中放置一个断点时，我遇到了 "breakpoint not bound" 问题。然而，当查看 Chrome 中的调试器时，似乎 TypeScript 映射文件正在 webpack 目录中正确创建。

Answer 1

通过将此答案中的行添加：到我的 webpack.config.js 我能够让它工作！！粘贴在下面以提高可见性：

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

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

Debug Typescript in Chrome bundled by Webpack Visual Studio 2017 .NET Core 2.2

typescript

webpack

.net-core

gulp

source-maps