Webpack Visual Studio 2017 .NET Core 2.2捆绑的Chrome中的调试打字稿 [英] Debug Typescript in Chrome bundled by Webpack Visual Studio 2017 .NET Core 2.2

问题描述

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

There are a couple questions out there but most of the answers seem to be "it should be default now if you have VS 2017". My debugger isn't working, so I'd like to give my specific case to get some help. I'm also new to Typescript & Webpack to give some context.

项目Hiearchy

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

项目构建时，将通过以下步骤：

When the project builds, it goes through these steps:

• 核心项目构建


• 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 that compiles the typescript and puts it in it's final destination.

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映射文件。

After everything is compiled and running, when I put a break point in the Visual Studio IDE I get the "breakpoint not bound" problem. However, when looking at the debugger in Chrome, it seems like the TypeScript mapping files are being created in the webpack directory correctly.

推荐答案

通过添加以下答案中的行： https://stackoverflow.com/a/56512126/5245385 到我的webpack.config.js中，我能够使其正常运行！粘贴在下面以提高可见性：

By adding the lines from this answer: https://stackoverflow.com/a/56512126/5245385 to my webpack.config.js I was able to get it working!! Pasted below for visibility:

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中的调试打字稿的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！