I've configured webpack with ts-loader to transpile and bundle my various TypeScript files. Below are the configurations I am using:
tsconfig.json
{
"compileOnSave": false,
"compilerOptions": {
"noImplicitAny": true,
"noEmitOnError": true,
"removeComments": false,
"sourceMap": true,
"target": "es5",
"module": "es2015",
"lib": [ "dom", "es2015", "es2016" ],
"allowSyntheticDefaultImports": true,
"moduleResolution": "node",
"preserveConstEnums": true,
"skipLibCheck": true
},
"include": [
"node_modules/@types/**/*.d.ts",
"src/**/*.ts"
]
}
webpack.config.js
var path = require('path');
module.exports = {
context: path.join(__dirname, 'src'),
entry: {
app: './app'
},
output: {
path: path.join(__dirname, 'dist/'),
filename: '[name].bundle.js'
},
resolve: {
extensions: ['.js','.ts']
},
module: {
loaders: [{
test: /\.ts$/,
loaders: ['ts-loader'],
exclude: /(node_modules|bower_components)/
}]
},
devtool: 'inline-source-map'
};
My project structure consists of the following folders:
/src
/dist
In the src folder, I store my .ts files along with pre-webpack js and .map files generated by the typescript compiler through ts-loader. The dist folder contains the bundled javascript files produced by webpack. These webpacked files are referenced in my HTML pages. However, when running the project in VS and trying to set breakpoints in the original .ts files, I encounter an issue where it says "The breakpoint will not currently be hit. No symbols have been loaded for this document." How can I ensure that the source maps work correctly so I can debug in my original TypeScript code?
UPDATE: Debugging TypeScript in Visual Studio works fine with IE or Chrome without webpack. The issue arises only when webpack is involved.