Debugging 如何使用webpack在Angular 2中运行Asp.net MVC？

我创建了一个使用Angular2作为前端的MVC（aspnet核心）应用程序

我的解决方案的缩短版本如下所示：

Solution
 - wwwroot (webpack bundled angular)
 |_ app.bundle.js (bundle)
 - app (angular 2 application)
 |_ Components
 |_ app.module.ts
 |_ main.ts
 - Controllers
 |_ HomeController.cs
 -Views
 |_Home
 -|_Index.cshtml
 -webpack.config.js
 -Startup.cs
 -project.json
 -package.json
 -web.config

我的问题是在调试和运行站点时

我正在使用IIS express调试该站点。这是可行的，但调试需要深入到一个巨大的网页包中，这个网页包创建于

app.bundle.js

。（我也不知道如何使用地图文件。Chrome似乎没有解包。）

我在调试时读到的大多数文档都要求使用

npm start

或

webpack dev server

。我认为我不能使用这些，因为我的网站需要提供

cshtml

我还想去一个地方，在那里我可以使用

watch

自动编译和刷新我的站点

---

我可以将IIS（而不是express）设置为同时提供cshtml和angular 2文件并轻松调试它们吗？（最好使用处理更新的工具，如

监视
）
您需要确保.map文件与js包一起生成和提供。这将告诉调试器（例如chrome）映射回原始源文件

确保tsconfig.json文件中的
“sourceMap”
设置设置为
true

将nuget软件包用于核心单页应用程序。这将集成到您的
Startup.cs
文件中

using Microsoft.AspNetCore.SpaServices.Webpack;

public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory, IHttpContextAccessor httpContextAccessor)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
        app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions
        {
            HotModuleReplacement = true,
            ConfigFile = "./webpack/webpack.config.js"
        });
    }
    else
    {
        app.UseExceptionHandler("/App/Error");
    }

    app.UseStaticFiles();

您仍然像往常一样配置NPM网页包。（注意，我使用
webpack.config.js
来完成所有常规的webpack配置。）

我有点难以理解的一个概念是，你正在运行两个站点。一个（通常是端口5000）用于提供CSHTML，另一个（nuget webpack中的默认8080）用于提供angular 2捆绑javascript

至于在Chrome中进行调试，请使用源代码中的
webpack://
树设置断点并逐步完成代码。正如@Kyle Trauberman所指出的，请确保启用sourcemap。
如果您只是使用旧的asp.net mvc 5，该怎么办？我们如何使用webpack的hmr功能？@RojBeraña您这样问是因为您没有startup.cs还是因为您没有wwwroot？如果没有startup.cs，请使用OWIN；如果没有wwwroot，请创建目录并使用staticfiles和默认文件。您可能需要配置静态文件中间件以将wwwroot映射为根