使用源映射和 webpack 调试 typescript

我有一个用Typescript编写的项目，我希望能够调试它(Chrome Dev Tools或Intellij).

起初，我发现Typescript的import功能不受支持.所以我试着用Webpack和webpack dev server，但完全失败了.即使我的应用程序正在工作(因为只有一个bundle.js文件包含所有代码)，它也无法将代码与给定的源代码映射匹配，这使得调试变得不可能.

在我停止使用webpack后，我try 添加require.js作为依赖项，以解决我遇到的require is not defined个错误.这很管用，但现在我又被困住了，我明白了:

未捕获引用错误:未定义导出

我不知道这为什么不起作用.我想让我的应用程序工作(通过webpack或在编译后解析导入语句)，并且仍然能够使用typescript生成的源代码图调试代码.我怎样才能做到这一点？

我正在附上我的配置文件，以防那里缺少什么:

tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    "sourceMap": true
  },
  "include": [
    "scripts/**/*"
  ],
  "exclude": [
    "node_modules"
  ]
}

网页包.配置.js:

module.exports = {
    resolve: {
        extensions: [/*'.ts', '.tsx', */'.js']
    },
    entry: './scripts/main.js',
    output: {
        path: '/',
        filename: 'app.js'
    },
    module: {
        rules: [
            { test: /\.js$/, loader: 'source-map-loader', enforce: 'pre' }
        ],
        loaders: [
            { test: /\.tsx?$/, loader: 'ts-loader', exclude: /node_modules/ },
            {test: /\.css$/, loader: "style!css"}
        ]
    },
    watch: true
};