Search code examples
typescriptwebpacksource-mapswebpack-dev-server

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
    }
};

Solution

  • 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,
    // ...