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

问题

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.

Project 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:

Core project builds
gulp task is kicked off
Inside the gulp task, I use webpack stream to build the typescript files into the bundle.js

Contents of my 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"
  ]
}

Contents of the 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 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"));
});

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.

回答1:

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]'
    })
]

来源：https://stackoverflow.com/questions/57332415/debug-typescript-in-chrome-bundled-by-webpack-visual-studio-2017-net-core-2-2

标签

typescript

Webpack

.net-core

gulp

source-maps