I use webpack with ts-loader to forward and merge various TypeScript files. Here are my configs:
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 folders are organized as
/src
/dist
In the src folder, I have my .ts files and the pre-webpack js and .map files that the TypeScript compiler creates (via ts-loader). In the dist folder, I get webpacked js with embedded source maps. My html pages link to js webpages. When I run the project in VS and set a breakpoint in the source .ts file, the breakpoint says: "At the moment, the breakpoint will not be deleted. No characters have been loaded for this document." And, of course, it won’t hit. How can I get the source cards to work with debugging capabilities in my source TypeScript?
UPDATE: TypeScript VS IE Chrome, - . -, .