From 30a694450cf616a79405c29686e0347c2295704d Mon Sep 17 00:00:00 2001 From: SteveSandersonMS Date: Tue, 11 Oct 2016 16:11:12 +0100 Subject: [PATCH] Make source maps compatible with VS/VSCode debugging (fix file paths, and strip out the "charset=utf-8;" segments from inline sourceMappingURLs) --- templates/Angular2Spa/webpack.config.js | 7 +++++-- templates/KnockoutSpa/webpack.config.js | 7 +++++-- templates/ReactReduxSpa/webpack.config.js | 7 +++++-- templates/ReactSpa/webpack.config.js | 6 +++++- templates/WebApplicationBasic/webpack.config.dev.js | 6 +++++- 5 files changed, 25 insertions(+), 8 deletions(-) diff --git a/templates/Angular2Spa/webpack.config.js b/templates/Angular2Spa/webpack.config.js index 813c12a..36a8652 100644 --- 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 index 352ab3c..0ed53ff 100644 --- 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 index 2d641c7..dbe8484 100644 --- 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 index f8ed0cd..0555dc1 100644 --- 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 index 719de1f..3dd20b3 100644 --- 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 './' + ] };