如何在不每次运行构建的情况下使用 webpack 开发 Angular2 / typescript？答案

【问题标题】：How to use webpack for development Angular2 / typescript without running build each time?如何在不每次运行构建的情况下使用 webpack 开发 Angular2 / typescript？
【发布时间】：2017-03-20 00:42:31
【问题描述】：

我正在使用 ASP.Net Core、Angular2 和 Typescript，并使用来自 Angular2 团队 here 的教程与 webpack 连接在一起。这一切似乎都有效，但现在我每次更改文件时都需要构建。

原始教程使用 system.js，当然会加载大量文件，但我只使用静态文件中间件，开发不需要构建。这很方便，但我不知道如何用 webpack 做同样的事情。似乎 webpack 只能将所有内容捆绑在一起，而没有单独加载所有内容的选项，因此我每次都需要运行构建。

有没有可能让 webpack 以某种简单的方式“扩展”包？

附：我不想使用 webpack 开发服务器和一些自动构建保存等，因为复杂性已经相当高了。所以理想的解决方案是我有用于生产的捆绑包，但直接加载用于开发的代码，就像过去使用标准 mvc 捆绑包一样。

【问题讨论】：

标签： visual-studio angular typescript asp.net-core webpack

【解决方案1】：

真的，最好的方法是使用 webpack 开发服务器。真的没有太多的设置，它只是你运行的一个不同的命令而不是 webpack：

npm install webpack-dev-server
webpack-dev-server webpack.config.js

然后你只需将脚本源指向http://localhost:8080/webpack-dev-server/your-bundle-name.js" in your application`标签。

这是迄今为止最好的选择，因为您可以获得即时增量重新编译和实时重新加载。

虽然我强烈建议您使用webpack-dev-server，但您也可以在观看模式下使用纯 webpack：

webpack ---watch

没有办法“扩展捆绑包”（实际上也没有必要）。很可能您使用 webapack 的目的不仅仅是捆绑，因此如果您更改打字稿文件，您仍然需要重新构建。监视模式下的 Webpack 开发服务器或 webpack 进行非常快速的增量编译，大多数人只会在开发时让它们运行。

【讨论】：

如果我更改了一个打字稿文件，VS 只会自动重新编译它，所以这根本不是问题。但是，如果我在同一个项目中有 WebApi，那么运行 webpack dev 还不够，我需要运行另一台服务器，再加上以某种方式重新路由所有 url，这都是我想避免的痛苦:) 谢谢尽管如此，对于输入，也许根本没有办法做我想做的事。
Webpack 开发服务器始终作为单独的服务器运行，只为 webpack 提供服务。我也在使用 Aspnet mvc 和 webapi，我们只有一个用于主要 index.html 的模板，它可以从 webpack url 为 dev 加载包。
在任何情况下，标准 webpack 中的“监视”模式应该可以工作，只是不会实时重新加载，而且速度会稍慢，因为它不从 RAM 提供服务
我明白了，不是 web-api 的 CORS，而是通过
是的，你不需要 CORS，因为它只是一个 <script> 标签。