Make source maps compatible with VS/VSCode debugging (fix file paths, and strip out the "charset=utf-8;" segments from inline sourceMappingURLs)

templates/ReactReduxSpa/webpack.config.js

@@ -2,6 +2,7 @@ var isDevBuild = process.argv.indexOf('--env.prod') < 0;
 var path = require('path');
 var webpack = require('webpack');
 var ExtractTextPlugin = require('extract-text-webpack-plugin');
+var SourceMapDevToolPlugin = require('aspnet-webpack').SourceMapDevToolPlugin;
 var nodeExternals = require('webpack-node-externals');
 var merge = require('webpack-merge');
 var allFilenamesExceptJavaScript = /\.(?!js(\?|$))([^.]+(\?|$))/;
@@ -31,14 +32,16 @@ var clientBundleConfig = merge(sharedConfig(), {
         ]
     },
     output: { path: path.join(__dirname, './wwwroot/dist') },
-    devtool: isDevBuild ? 'inline-source-map' : null,
     plugins: [
         new ExtractTextPlugin('site.css'),
         new webpack.DllReferencePlugin({
             context: __dirname,
             manifest: require('./wwwroot/dist/vendor-manifest.json')
         })
-    ].concat(isDevBuild ? [] : [
+    ].concat(isDevBuild ? [
+        // Plugins that apply in development builds only
+        new SourceMapDevToolPlugin({ moduleFilenameTemplate: '../../[resourcePath]' }) // Compiled output is at './wwwroot/dist/', but sources are relative to './'
+    ] : [
         // Plugins that apply in production builds only
         new webpack.optimize.OccurenceOrderPlugin(),
         new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } })