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

【问题标题】：Debug Typescript in Chrome bundled by Webpack Visual Studio 2017 .NET Core 2.2在 Webpack Visual Studio 2017 .NET Core 2.2 捆绑的 Chrome 中调试 Typescript
【发布时间】：2019-12-11 10:22:04
【问题描述】：

那里有几个问题，但大多数答案似乎是“如果你有 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 文件的内容

{
  "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 中设置断点时，我会遇到“断点未绑定”的问题。但是，在 Chrome 中查看调试器时，似乎在 webpack 目录中正确创建了 TypeScript 映射文件。

【问题讨论】：

标签： typescript webpack .net-core gulp source-maps

【解决方案1】：

通过添加来自这个答案的行：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]'
    })
]

【讨论】：