Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Source maps for Typescript in Webpack (can't see source maps when using webpack-dev-server)

I am trying to use Typescript (awesome-typescript-loader (link)) together with Webpack, but I don't see source maps in browser when running webpack-dev-server. The same setup worked with babel-loader (link) and ES6 classes (I could debug ES6 classes in browser even though they were compiled down to ES5)

My Webpack config file looks like (this is important snippet, full version is on 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
    }
};
like image 851
tomastrajan Avatar asked Mar 25 '26 02:03

tomastrajan


1 Answers

I found the problem, I extracted devtool and debug properties as params but I forgot to read them again to final config. The final working version looks like:

// ...
debug: params.debug,
devtool: params.devtool,
// ...
like image 190
tomastrajan Avatar answered Mar 26 '26 20:03

tomastrajan