[英]Webpack- Typescript source-map, the source file of ts is the compiled js file
When using chrome to debug my typescript project, the source-map doesn't work as expected. 当使用chrome调试我的打字稿项目时,源映射无法按预期工作。 It points to the compiled js files instead of ts source files.
它指向已编译的js文件而不是ts源文件。
I added the "sourceMap": true
into tsconfig.json, and added devtools: 'inline-source-map'
in my webpack.config.js. 我在
"sourceMap": true
添加了"sourceMap": true
,并在我的webpack.config.js中添加了devtools: 'inline-source-map'
。 Chrome tells me there's an error in line 76 in state.ts, but the state.ts chrome shows me is the compiled js file. Chrome告诉我state.ts的第76行有错误,但是state.ts chrome显示的是已编译的js文件。 Is this the normal behavior?
这是正常现象吗? Or I missed something?
还是我错过了什么?
tsconfig.json tsconfig.json
{
"compileOptions": {
"outDir": "./dist/",
"sourceMap": true,
"noImplicitAny": true,
"module": "es6",
"target": "es5",
"jsx": "react",
"allowJs": true
}
}
webpack.config.js webpack.config.js
var path = require('path');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var BrowserSyncPlugin = require('browser-sync-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './app/guides/identify_device/identify_device_guide.ts',
module: {
rules: [
{
test: /\.tsx?$/,
use: ['ts-loader'],
exclude: /node_modules/
},
{
test: /\.(png|svg|jpg|gif)$/,
use: ['file-loader']
}
]
},
resolve: {
extensions: ['.tsx', '.ts', '.js'],
modules: [
path.resolve('./app')
]
},
output: {
filename: 'src/bundle.js',
path: path.resolve(__dirname, 'dist')
},
devtool: 'inline-source-map',
plugins: [
new BrowserSyncPlugin({
host: 'localhost',
port: 3000,
server: {baseDir: ['./dist/']}
}),
new HtmlWebpackPlugin({
template: './app/index.html',
})
]
};
最后,我使用了awasome-typescript-loader
而不是ts-loader
并解决了这个问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.