Switch from inline to external source maps. This avoids several problems with inline source maps in VS 2015 (at least as of Update 3).

Author: SteveSandersonMS

templates/Angular2Spa/project.json

@@ -60,6 +60,9 @@
       "Views",
       "web.config",
       "wwwroot"
+    ],
+    "exclude": [
+      "wwwroot/dist/*.map"
     ]
   },
 

templates/Angular2Spa/webpack.config.js

@@ -23,17 +23,21 @@ var sharedConfig = {
 };
 
 // Configuration for client-side bundle suitable for running in browsers
+var clientBundleOutputDir = './wwwroot/dist';
 var clientBundleConfig = merge(sharedConfig, {
     entry: { 'main-client': './ClientApp/boot-client.ts' },
-    output: { path: path.join(__dirname, './wwwroot/dist') },
+    output: { path: path.join(__dirname, clientBundleOutputDir) },
     plugins: [
         new webpack.DllReferencePlugin({
             context: __dirname,
             manifest: require('./wwwroot/dist/vendor-manifest.json')
         })
     ].concat(isDevBuild ? [
         // Plugins that apply in development builds only
-        new webpack.SourceMapDevToolPlugin({ moduleFilenameTemplate: '../../[resourcePath]' }) // Compiled output is at './wwwroot/dist/', but sources are relative to './'
+        new webpack.SourceMapDevToolPlugin({
+            filename: '[name].js.map', // Remove this line if you prefer inline source maps
+            moduleFilenameTemplate: path.relative(clientBundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
+        })
     ] : [
         // Plugins that apply in production builds only
         new webpack.optimize.OccurenceOrderPlugin(),

templates/KnockoutSpa/project.json

@@ -59,6 +59,9 @@
       "Views",
       "web.config",
       "wwwroot"
+    ],
+    "exclude": [
+      "wwwroot/dist/*.map"
     ]
   },
 

templates/KnockoutSpa/webpack.config.js

@@ -3,11 +3,12 @@ var path = require('path');
 var webpack = require('webpack');
 var ExtractTextPlugin = require('extract-text-webpack-plugin');
 
+var bundleOutputDir = './wwwroot/dist';
 module.exports = {
     entry: { 'main': './ClientApp/boot.ts' },
     resolve: { extensions: [ '', '.js', '.ts' ] },
     output: {
-        path: path.join(__dirname, './wwwroot/dist'),
+        path: path.join(__dirname, bundleOutputDir),
         filename: '[name].js',
         publicPath: '/dist/'
     },
@@ -26,7 +27,10 @@ module.exports = {
         })
     ].concat(isDevBuild ? [
         // Plugins that apply in development builds only
-        new webpack.SourceMapDevToolPlugin({ moduleFilenameTemplate: '../../[resourcePath]' }) // Compiled output is at './wwwroot/dist/', but sources are relative to './'
+        new webpack.SourceMapDevToolPlugin({
+            filename: '[name].js.map', // Remove this line if you prefer inline source maps
+            moduleFilenameTemplate: path.relative(bundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
+        })
     ] : [
         // Plugins that apply in production builds only
         new webpack.optimize.OccurenceOrderPlugin(),

templates/ReactReduxSpa/project.json

@@ -60,6 +60,9 @@
       "Views",
       "web.config",
       "wwwroot"
+    ],
+    "exclude": [
+      "wwwroot/dist/*.map"
     ]
   },
 

templates/ReactReduxSpa/webpack.config.js

@@ -22,6 +22,7 @@ var sharedConfig = () => ({
 });
 
 // Configuration for client-side bundle suitable for running in browsers
+var clientBundleOutputDir = './wwwroot/dist';
 var clientBundleConfig = merge(sharedConfig(), {
     entry: { 'main-client': './ClientApp/boot-client.tsx' },
     module: {
@@ -30,7 +31,7 @@ var clientBundleConfig = merge(sharedConfig(), {
             { test: /\.(png|jpg|jpeg|gif|svg)$/, loader: 'url', query: { limit: 25000 } }
         ]
     },
-    output: { path: path.join(__dirname, './wwwroot/dist') },
+    output: { path: path.join(__dirname, clientBundleOutputDir) },
     plugins: [
         new ExtractTextPlugin('site.css'),
         new webpack.DllReferencePlugin({
@@ -39,7 +40,10 @@ var clientBundleConfig = merge(sharedConfig(), {
         })
     ].concat(isDevBuild ? [
         // Plugins that apply in development builds only
-        new webpack.SourceMapDevToolPlugin({ moduleFilenameTemplate: '../../[resourcePath]' }) // Compiled output is at './wwwroot/dist/', but sources are relative to './'
+        new webpack.SourceMapDevToolPlugin({
+            filename: '[name].js.map', // Remove this line if you prefer inline source maps
+            moduleFilenameTemplate: path.relative(clientBundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
+        })
     ] : [
         // Plugins that apply in production builds only
         new webpack.optimize.OccurenceOrderPlugin(),

templates/ReactSpa/project.json

@@ -59,6 +59,9 @@
       "Views",
       "web.config",
       "wwwroot"
+    ],
+    "exclude": [
+      "wwwroot/dist/*.map"
     ]
   },
 

templates/ReactSpa/webpack.config.js

@@ -3,12 +3,13 @@ var path = require('path');
 var webpack = require('webpack');
 var ExtractTextPlugin = require('extract-text-webpack-plugin');
 
+var bundleOutputDir = './wwwroot/dist';
 module.exports = {
     devtool: isDevBuild ? 'inline-source-map' : null,
     entry: { 'main': './ClientApp/boot.tsx' },
     resolve: { extensions: [ '', '.js', '.jsx', '.ts', '.tsx' ] },
     output: {
-        path: path.join(__dirname, './wwwroot/dist'),
+        path: path.join(__dirname, bundleOutputDir),
         filename: '[name].js',
         publicPath: '/dist/'
     },
@@ -27,7 +28,10 @@ module.exports = {
         })
     ].concat(isDevBuild ? [
         // Plugins that apply in development builds only
-        new webpack.SourceMapDevToolPlugin({ moduleFilenameTemplate: '../../[resourcePath]' }) // Compiled output is at './wwwroot/dist/', but sources are relative to './'
+        new webpack.SourceMapDevToolPlugin({
+            filename: '[name].js.map', // Remove this line if you prefer inline source maps
+            moduleFilenameTemplate: path.relative(bundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
+        })
     ] : [
         // Plugins that apply in production builds only
         new webpack.optimize.OccurenceOrderPlugin(),

templates/WebApplicationBasic/project.json

@@ -56,6 +56,9 @@
       "Views",
       "web.config",
       "wwwroot"
+    ],
+    "exclude": [
+      "wwwroot/dist/*.map"
     ]
   },
 

templates/WebApplicationBasic/webpack.config.dev.js

@@ -2,6 +2,10 @@ var webpack = require('webpack');
 
 module.exports = {
     plugins: [
-        new webpack.SourceMapDevToolPlugin({ moduleFilenameTemplate: '../../[resourcePath]' }) // Compiled output is at './wwwroot/dist/', but sources are relative to './'
+        // Plugins that apply in development builds only
+        new webpack.SourceMapDevToolPlugin({
+            filename: '[name].js.map', // Remove this line if you prefer inline source maps
+            moduleFilenameTemplate: path.relative('./wwwroot/dist', '[resourcePath]') // Point sourcemap entries to the original file locations on disk
+        })
     ]
 };