Many questions have been asked about debugger issues in Visual Studio 2017 with TypeScript and Webpack. Despite the common answer being that it should work by default, my debugger is still not functioning properly. I am new to TypeScript and Webpack, so I need specific help for my case.
Project Hierarchy
./wwwroot/bundles/bundle.js <- this is where the final bundled file is located
./Scripts/ <- contains various directories where all separate TypeScript files reside
During the project build process, the following steps are taken:
- Core project builds
- Gulp task is initiated
- Within the gulp task, webpack stream is used to compile the TypeScript files into bundle.js
Here is the content 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"
]
}
And here is the content 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'
}
};
The Gulp task responsible for compiling TypeScript and moving it to the final destination.
gulp.task("compile-typescript", function () {
return gulp.src("./Scripts/index.ts")
.pipe(webpack(require("./webpack.config.js")))
.pipe(gulp.dest("./wwwroot/bundles"));
});
Even after the compilation and deployment, setting breakpoints in Visual Studio triggers the "breakpoint not bound" issue. However, inspecting the debugger in Chrome shows that the TypeScript mapping files are correctly generated in the webpack directory.