Typescript Source not showing when using webpack ts-loader

Question

I'm using webpack and ts-loader from a grunt task to transpile Typescript and generate sourcemaps for use debugging production. My team wants to be able to see the original Typescript source, not just the JavaScript source. I have pored over many pages of documentation, and many questions/answers, looking for the right solution, but so far I cannot see Typescript files in the browser, only the JavaScript version.

Our project root module, or "entry" for webpack task, webpackEntry, is a Javascript file, which requires JavaScript files, some of which were compiled from TypeScript, but some were just manually created.

I have a webpack "prod" task configured thus:

        webpack: {
        options: {
            entry: webpackEntry,
            output: {
                path: webpackDest,
                filename: 'app-min.js',
                libraryTarget: "assign",
                pathInfo: true
            },
            externals: grunt.file.readJSON('app-ui/webpack-externals.json'),
            progress: true
        },
        prod: {
            devtool: 'source-map',
            plugins: [
                new webpack.optimize.UglifyJsPlugin(),
                new webpack.optimize.OccurenceOrderPlugin(),
                new webpack.optimize.DedupePlugin(),
                new webpack.SourceMapDevToolPlugin({
                    test:  /\.tsx?$/,
                    exclude: 'node_modules',
                    module: true,
                    filename: '[file].map',
                    append: false
                })
            ],
            resolve: {
                // Add `.ts` and `.tsx` as a resolvable extension.
                extensions: ['', '.webpack.js', '.web.js', '.ts', '.tsx', '.js','.jsx']
            },
            module: {
                loaders: [
                    // all files with a `.ts` or `.tsx` extension will be handled by `ts-loader`
                    { test: /\.tsx?$/, loader: 'ts-loader', exclude: 'node_modules' }
                ]
            },
            ts: {
                // configures the ts compiler:
                "compilerOptions": {
                    "target": "es5",
                    "sourceMap": true,
                    "jsx": "react",
                    "experimentalDecorators": true
                },
                "exclude": [
                    "node_modules" // add other exclusions for the ts compiler.
                ]
            }
        }...

And a tsconfig.json:

{
   "compilerOptions": {
        "target": "es5",
        "sourceMap": true
    },
    "exclude": [
        "node_modules"
      ]
}

... but all I see in Chrome Dev Tools source are the JavaScript source files. I'd like to be able to see the original JavaScript source files, as well as the original Typescript files, but not the transpiled JavaScript files.

UPDATE: I followed @basarat's suggestion below and added the source-map-loader tool. I still see only the JavaScript files in the dev-tools window.

relevant excerpt:

module: {
                loaders: [
                    // all files with a `.ts` or `.tsx` extension will be handled by `ts-loader`
                    { test: /\.tsx?$/, loader: 'ts-loader', exclude: 'node_modules' }
                ],
                preLoaders: [
                    // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
                    { test: /\.js$/, loader: "source-map-loader", exclude: ['node_modules', 'ext-*', 'lib', 'tools'] }
                ]
            }, ...

Any experts in ts-loader able to assist with this? Thanks in advance for your help!

Answer 1

You need to use the sourcemap loader. This is covered here : https://github.com/Microsoft/TypeScript-Handbook/blob/master/pages/quick-start/react-webpack.md

Your webpack config should be like:

module: {
    loaders: [
        // All files with a '.ts' or '.tsx' extension will be handled by 'ts-loader'.
        { test: /\.tsx?$/, loader: "ts-loader" }
    ],

    preLoaders: [
        // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
        { test: /\.js$/, loader: "source-map-loader" }
    ]
},

Answer 2

You can provide devTools value to sourcemap to your webpack config like below:

module.exports = {
    entry:'./app/app',
    output:{
        filename:'bundle.js',
    },
    resolve:{
        extensions:['','.ts','.js'],
        modulesDirectories: ['node_modules']
    },
    module:{
        loaders:[
            {
                test: /\.ts$/, loader: 'ts-loader'
            }
        ]
    },
    devtool: "sourcemap" /*<=================*/
}

Microsoft's guide is located here: https://github.com/Microsoft/TypeScript-Handbook/blob/master/pages/tutorials/React%20%26%20Webpack.md