Webpack- Typescript source-map、tsのソースファイルはコンパイル済みjsファイル

Question

クロムを使用して自分のタイスクリプトプロジェクトをデバッグすると、ソースマップが期待通りに機能しません。 tsソースファイルの代わりにコンパイルされたjsファイルを指しています。

私は"sourceMap": trueをtsconfig.jsonに追加し、devtools: 'inline-source-map'をwebpack.config.jsに追加しました。 Chromeはstate.tsの76行目にエラーがありますが、state.tsのchromeは私がコンパイルした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', 
    }) 
    ] 
}; 

Answer 1

{ 
    "compileOptions": { 
    "outDir": "./dist/", 
    "sourceMap": true, 
    "noImplicitAny": true, 
    "module": "es6", 
    "target": "es5", 
    "jsx": "react", 
    "allowJs": true 
    } 
} 

tsconfig.json webpack.config.js最後に、私は、 awasome-typescript-loader代わりに ts-loaderを使用してこの問題を解決しました。