我使用带有 ts-loader 的 webpack 来转换和捆绑各种 TypeScript 文件。这是我的配置:
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'
};
我的文件夹组织为
/src
/dist
在 src 文件夹中,我有我的 .ts 文件和 pre-webpack js 和 .map 文件,它们是 typescript 编译器创建的(通过 ts-loader)。在 dist 文件夹中,我得到了带有内联源映射的 webpacked js。我的html页面引用了webpacked js。当我在 VS 中运行项目并在原始 .ts 文件中设置断点时,断点显示“当前不会命中断点。没有为该文档加载任何符号。”当然它没有被击中。如何使源映射能够在我的原始 TypeScript 中进行调试?
更新:当 webpack 不在组合中时,VS 中的 TypeScript 调试使用 IE 或 Chrome 可以正常工作。这是导致问题的 webpack 的添加。
最佳答案
假设您使用的是 angular cli:运行 ng serve
在 localhost:4200 打开浏览器并检查页面。找到webpack/src/fileyouwanttodebug,打断点刷新页面
关于javascript - 如何在 VS 2017 中调试 webpack TypeScript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45469671/