I am running Visual Studio 2015 Update 3, ASP.Net MVC 4.6.1, Angular 2.4.6, Webpack 2.2.1 and the webpack Task Runner Explorer extension. If I run Visual Studio without debugging it all works fine but if I try to run Visual Studio in debug mode it takes a couple minutes for it to load up with webpage. Looking in Visual Studio it's trying to load up the source maps for Angular and each one is taking a couple seconds.
It seems like the problem is because the Task Runner Explorer plugin is running the command: webpack -d --watch --color
, which is telling it to always generate source maps for everything. It doesn't look like there is a way to change the plugin to not run the "-d" switch. In my config file, I have it configured to only generate source maps for my code. But it seems like the command line always overwrites what in the config file.
Has anyone figure fix this?
tsconfig.json
{
"compileOnSave": true,
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": [ "es2015", "dom" ],
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true
}
}
webpack.dev.js
var webpackMerge = require('webpack-merge');
var webpack = require('webpack');
var commonConfig = require('./webpack.common.js');
module.exports = webpackMerge(commonConfig, {
output: {
path: '\dist',
publicPath: 'http://localhost:8080/',
filename: '[name].js',
sourceMapFilename: '[name].js.map',
chunkFilename: '[id].chunk.js'
},
plugins: [
new webpack.SourceMapDevToolPlugin({
test: [/\.js$/, /\.ts$/],
columns: false,
filename: '[file].map',
exclude: ['vendor.js', 'polyfills'],
lineToLine: false,
module: true,
append: '\n//# sourceMappingURL=[url]'
})
],
devServer: {
historyApiFallback: true,
stats: 'minimal'
}
});
webpack.common.js
"use strict";
var webpack = require('webpack');
var helpers = require('./helpers.js');
var path = require('path');
module.exports = {
entry: {
app: "./app/main.ts",
vendor: "./app/config/vendor.ts",
polyfills: "./app/config/polyfills.ts"
},
resolve: {
extensions: ['.ts', '.js']
},
devServer: {
contentBase: ".",
host: "localhost",
port: 9000
},
module: {
rules: [
{
test: /\.ts$/,
loaders: ['awesome-typescript-loader',
'angular2-template-loader',
'tslint-loader']
},
{
test: /\.html$/,
loader: 'raw-loader'
},
{
test: /\.css$/,
include: helpers.root('app'),
loaders: 'style-loader!css-loader'
},
{
test: /\.js$/,
use: ["source-map-loader"], /*strips off extra # sourceMappingURL= which were in node_modules*/
enforce: "pre",
exclude: [
// these packages have problems with their sourcemaps
path.resolve('./node_modules/ng2-interceptors')
]
}
]
},
plugins: [
// Workaround for angular/angular#11580
new webpack.ContextReplacementPlugin(
// The (\\|\/) piece accounts for path separators in *nix and Windows
/angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
helpers.root('./'), // location of your src
{} // a map of your routes
),
new webpack.optimize.CommonsChunkPlugin({
name: ['app', 'vendor', 'polyfills']
})
]
}
The problem ended up being that there were so many source maps caused from all the Vendor and Polyfill files that VS was taking so long to load. Once I told it to no longer generate the source maps for those it started going a lot faster.