Webpack-Typescript源代码映射,ts的源文件是已编译的js文件
使用chrome调试我的typescript项目时,源映射无法按预期工作。它指向已编译的js文件,而不是ts源文件 我在tsconfig.json中添加了Webpack-Typescript源代码映射,ts的源文件是已编译的js文件,typescript,webpack,source-maps,Typescript,Webpack,Source Maps,使用chrome调试我的typescript项目时,源映射无法按预期工作。它指向已编译的js文件,而不是ts源文件 我在tsconfig.json中添加了“sourceMap”:true,并在我的webpack.config.js中添加了devtools:“内联源代码映射”。Chrome告诉我state.ts的第76行有错误,但是state.ts Chrome告诉我的是编译后的js文件。这是正常的行为吗?还是我错过了什么 tsconfig.json { "compileOptions": {
“sourceMap”:true
,并在我的webpack.config.js中添加了devtools:“内联源代码映射”
。Chrome告诉我state.ts的第76行有错误,但是state.ts Chrome告诉我的是编译后的js文件。这是正常的行为吗?还是我错过了什么
tsconfig.json
{
"compileOptions": {
"outDir": "./dist/",
"sourceMap": true,
"noImplicitAny": true,
"module": "es6",
"target": "es5",
"jsx": "react",
"allowJs": true
}
}
webpack.config.js
最后,我使用了
awasometypescriptloader
而不是ts loader
,解决了这个问题
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',
})
]
};