CODEWITHSUNDEEP
typescriptwebpack.net-coregulpsource-maps
Richard Cawthon
Richard Cawthon

Reputation: 441

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:

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.

Visual Studio Debugger not hooking up correctly

Upvotes: 3

Views: 1703

Answers (1)

Richard Cawthon
Richard Cawthon

Reputation: 441

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

Upvotes: 2

Related Questions