Webpack中Typescript的源代码映射（使用webpack-dev-server时无法看到源代码映射）

Question

我正在尝试使用Typescript(awesome-typescript-loader(链接))与Webpack一起使用，但是在运行webpack-dev-server时，我在浏览器中看不到源映射。相同的设置在使用babel-loader(链接)和ES6类时有效(即使它们被编译为ES5，我也可以在浏览器中调试ES6类)。

我的Webpack配置文件如下(这是重要的片段，完整版本在github上)：

module.exports = {
    resolve: {
        extensions: ['', '.ts', '.js']
    },
    entry: {
        app: './src/app.ts'
    },
    output: {
        path: params.output.path,
        filename: params.output.filename
    },
    module: {
        loaders: [
            {test: /\.ts$/, loader: 'awesome-typescript', exclude: /node_modules/},
            {test: /\.css$/, loader: 'style!css'}
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
            inject: 'body'
        })
    ].concat(params.plugins),
    progress: true,
    colors: true,
    devServer: {
        port: params.server.port
    }
};

- tomastrajan

Answer 1

我发现问题所在，我将 devtool 和 debug 属性提取为参数，但我忘记再次读取它们以生成最终配置。最终的工作版本如下：

// ...
debug: params.debug,
devtool: params.devtool,
// ...

- tomastrajan