使用 Webpack 在 Visual Studio 中调试 Angular 2 很慢
Debugging Angular 2 in Visual Studio Slow with Webpack
我正在 运行ning Visual Studio 2015 Update 3,ASP.Net MVC 4.6.1,Angular 2.4.6,Webpack 2.2.1 和 webpack Task Runner资源管理器扩展。如果我 运行 Visual Studio 没有调试它一切正常,但如果我尝试 运行 Visual Studio 在调试模式下它需要几分钟才能加载网页。查看 Visual Studio 它正在尝试加载 Angular 的源地图,每个都需要几秒钟。
问题似乎是因为 Task Runner Explorer 插件正在 运行 执行命令:webpack -d --watch --color
,它告诉它始终为所有内容生成源映射。看起来没有办法将插件更改为不 运行“-d”开关。在我的配置文件中,我将其配置为仅为我的代码生成源映射。但似乎命令行总是覆盖配置文件中的内容。
有没有人解决这个问题?
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']
})
]
}
问题最终是由于所有 Vendor 和 Polyfill 文件导致的源映射太多,VS 加载时间太长。一旦我告诉它不再为它们生成源地图,它就会开始变得更快。
我正在 运行ning Visual Studio 2015 Update 3,ASP.Net MVC 4.6.1,Angular 2.4.6,Webpack 2.2.1 和 webpack Task Runner资源管理器扩展。如果我 运行 Visual Studio 没有调试它一切正常,但如果我尝试 运行 Visual Studio 在调试模式下它需要几分钟才能加载网页。查看 Visual Studio 它正在尝试加载 Angular 的源地图,每个都需要几秒钟。
问题似乎是因为 Task Runner Explorer 插件正在 运行 执行命令:webpack -d --watch --color
,它告诉它始终为所有内容生成源映射。看起来没有办法将插件更改为不 运行“-d”开关。在我的配置文件中,我将其配置为仅为我的代码生成源映射。但似乎命令行总是覆盖配置文件中的内容。
有没有人解决这个问题?
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']
})
]
}
问题最终是由于所有 Vendor 和 Polyfill 文件导致的源映射太多,VS 加载时间太长。一旦我告诉它不再为它们生成源地图,它就会开始变得更快。