webpack view generated sourcemap

Question

I am writing a simple program using webpack. I want to view the sourcemap (.map) file generated by webpack. This is my webpack configuration

var path = require('path');
var webpack = require('webpack');

module.exports = {
    context: path.resolve('src'),
    entry: {
        app: './app.jsx',
        vendor: './vendor.js',
    },
    output: {
        path: path.resolve('build'),
        filename: '[name].js',
        publicPath: '/public/assets',
        sourceMapFilename: 'source.map'
    },
    resolve: {
        // only discover files that have those extensions
        extensions: ['.ts', '.js', '.jsx', '.json', '.css', '.scss', '.html'],
    },
    module: {
        loaders: [{
            test: /\.jsx$/,
            exclude: /node_modules/,
            loader: 'babel-loader'
        },
        {
            test: [/\.css$/, /\.scss$/],
            loader: 'style-loader!css-loader?modules=true&localIdentName=[name]__[local]___[hash:base64:5]'
        }]
    },
    plugins: [
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            }
        }),
    ],
    devServer: {
        historyApiFallback: {
            index: 'index.html'
        },
    },
    devtool: 'source-map'
}

However when I run build, I see only the app.js and vendor.js file. No .map file is generated. How do I view the .map file.

The second question is that even without the .map file Chrome is able to show the actual source files, how do it do this without the actual .map file?