Webpack 中 Typescript 的源映射（使用 webpack-dev-server 时看不到源映射）

Posted 2023-03-13

【中文标题】Webpack 中 Typescript 的源映射（使用 webpack-dev-server 时看不到源映射）

【英文标题】：Source maps for Typescript in Webpack (can't see source maps when using webpack-dev-server)

【发布时间】：2015-11-05 14:22:28

【问题描述】：

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

我的 Webpack 配置文件看起来像（这是重要的 sn-p，完整版在 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
    
;

【参考方案1】：

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

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