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

SteveSandersonMS · SteveSandersonMS · commit 30a694450cf6 · 2016-10-11T16:11:12.000+01:00
diff --git a/templates/Angular2Spa/webpack.config.js b/templates/Angular2Spa/webpack.config.js
@@ -1,6 +1,7 @@
 var isDevBuild = process.argv.indexOf('--env.prod') < 0;
 var path = require('path');
 var webpack = require('webpack');
+var SourceMapDevToolPlugin = require('aspnet-webpack').SourceMapDevToolPlugin;
 var nodeExternals = require('webpack-node-externals');
 var merge = require('webpack-merge');
 var allFilenamesExceptJavaScript = /\.(?!js(\?|$))([^.]+(\?|$))/;
@@ -26,13 +27,15 @@ var sharedConfig ={
 var clientBundleConfig = merge(sharedConfig,{
 entry:{'main-client': './ClientApp/boot-client.ts' },
 output:{path: path.join(__dirname, './wwwroot/dist') },
- devtool: isDevBuild ? 'inline-source-map' : null,
 plugins: [
 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()
diff --git a/templates/KnockoutSpa/webpack.config.js b/templates/KnockoutSpa/webpack.config.js
@@ -2,9 +2,9 @@ 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;
 
 module.exports ={
- devtool: isDevBuild ? 'inline-source-map' : null,
 entry:{'main': './ClientApp/boot.ts' },
 resolve:{extensions: [ '', '.js', '.ts' ] },
 output:{
@@ -25,7 +25,10 @@ module.exports ={
 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 } }),
diff --git a/templates/ReactReduxSpa/webpack.config.js b/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 } })
diff --git a/templates/ReactSpa/webpack.config.js b/templates/ReactSpa/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;
 
 module.exports ={
 devtool: isDevBuild ? 'inline-source-map' : null,
@@ -25,7 +26,10 @@ module.exports ={
 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 } }),
diff --git a/templates/WebApplicationBasic/webpack.config.dev.js b/templates/WebApplicationBasic/webpack.config.dev.js
@@ -1,3 +1,7 @@
+var SourceMapDevToolPlugin = require('aspnet-webpack').SourceMapDevToolPlugin;
+
 module.exports ={
- devtool: 'inline-source-map'
+ plugins: [
+ new SourceMapDevToolPlugin({moduleFilenameTemplate: '../../[resourcePath]' }) // Compiled output is at './wwwroot/dist/', but sources are relative to './'
+ ]
 };

-Original file line number
+Diff line change
@@ @@ -1,6 +1,7 @@ @@
 varisDevBuild=process.argv.indexOf('--env.prod')<0;
 varpath=require('path');
 varwebpack=require('webpack');
 +varSourceMapDevToolPlugin=require('aspnet-webpack').SourceMapDevToolPlugin;
 varnodeExternals=require('webpack-node-externals');
 varmerge=require('webpack-merge');
 varallFilenamesExceptJavaScript=/\.(?!js(\?|$))([^.]+(\?|$))/;
 varclientBundleConfig=merge(sharedConfig,{
 entry: {'main-client': './ClientApp/boot-client.ts'},
 output: {path: path.join(__dirname,'./wwwroot/dist')},
 -devtool: isDevBuild ? 'inline-source-map' : null,
 plugins: [
 newwebpack.DllReferencePlugin({
 context: __dirname,
 manifest: require('./wwwroot/dist/vendor-manifest.json')
 })
 -].concat(isDevBuild ? [] : [
 +].concat(isDevBuild ? [
 +// Plugins that apply in development builds only
 +newSourceMapDevToolPlugin({moduleFilenameTemplate: '../../[resourcePath]'})// Compiled output is at './wwwroot/dist/', but sources are relative to './'
 +] : [
 // Plugins that apply in production builds only
 newwebpack.optimize.OccurenceOrderPlugin(),
 newwebpack.optimize.UglifyJsPlugin()