序

之前的开发选择完全抛弃服务器，只留下最简单的web服务器提供有角度的打包静态资源。此外，所有业务和数据请求都是通过访问一个单独的WebApi来实现的。但是最近有一个要求，就是必须使用多个客户端，每个客户端本身都是webpack打包的js。不是每个客户端都要自己建一个站点，所以需要建一个服务器，根据参数动态渲染不同客户端的脚本，为多个客户端服务。需要解决的主要问题有两个，一是防止前端路由冲突有效工作，二是如何实现合理的部署方案。笼统地看待这个问题，就是要认识到如何将一个强大的前端框架(angular)集成到一个健壮的现有服务器(。Net)项目，如标题中所述。

Webpack配置

第一步必须是获取前端项目的打包资源，这是由一个强大的webpack完成的。目标是把angular的所有依赖项和应用主代码打包成polyfill.js、vendor.js、main.js三个脚本，把那些懒得异步加载的模块打包成一个大块，js Webpack深刻而深刻，第一次接触会比较混乱。幸运的是，它毕竟只是一个给我们带来便利的工具，使用起来非常有条理。主要介绍可以移至webpack的官方文档【https://doc.webpack-china.org】，写出Angular-web pack-Starter[https://github.com/AngularClass/Angular-Starter]这样完美的创业项目就足够了。

简单地说，webpack配置有四个部分：

1.定义条目文件包含项目的angular dependency、angular framework代码和启动代码，例如angular-webpack-starter中的配置：

条目： {'polyfills' : '。/src/polyfils . browser . ts '，//dependency' main': AOT？/src/main.browser.aot.ts' : '。/src/main . browser . ts '//main program }，2。定义包装规则

有一些打包规则需要配置，包括各种文件类型的打包，角度模块的打包等。配置方法见官方文件或直接参考现成的启动项。直视的时候难免会迷茫，但是不要害怕，规则其实只是一点点，熟悉了大部分都是成功的。

第三，配置插件

webpack中有很多插件，用来加强打包能力和扩展规则。你可以看到在启动项目中使用了什么，这些插件可以在官方文档中找到。

第四，定义输出规则

输出要分为生产环境和开发环境。本文只谈生产环境。首先，很明显，webpack打包的项目应该交给服务器，给出的输出应该有几个要求：

1)转义兼容浏览器和ES5并压缩。

2)输出文件名附加哈希值，代码更改重新打包时需要不同的哈希值，以保证此时替换的资源不会被浏览器缓存，第一时间无法更新。

3)列出资源打包列表，因为附加了哈希值，所以每个文件名都是一长串奇怪的字符。使用适当的webpack配置来附加一个清单列表，列出输出哪些文件，并在使用时动态读取该列表来操作输出文件。

作为静态脚本添加到服务器

如果进展顺利，开发的项目可以获得类似下图的打包资源：

webpack-assets.json中列出了三个相关文件：

以0、1、2和3开头的四个区块文件是angular动态引入的惰性加载模块，不需要手动引入或列出，只需要保证angular可以访问。

将所有这些东西放入一个. Net MVC项目中：

然后在视图视图中引入三个脚本，并配置基本url:

现在运行MVC项目，并定位此视图以平滑渲染角度项目。问题是当手动输入前端路由的url时，这个url会被MVC路由认为是404错误(因为MVC路由中没有定义这个规则，真正使用这个规则的angular client在被错误页面替换之前还没有机会解析这个url)。

MVC路由配置

angular给出的官方指南是配置404重定向到服务器，并将所有404错误重定向到index.html，这样前端就可以顺利开始解析输入的url。在MVC中，实践也是类似的，只要在MVC的路由规则中，除了必要的路由(例如定义了其他API或错误页)之外的所有请求都被定向到指定的Action，例如在作者的这个规则中，所有其他请求都被定向到AppController下的Index:

这样，除了/page/开头的url之外，所有不符合默认路由的请求都将位于/App/Index。

用MVC的视图代替index.html

下一步是在this /App/Index中读取前端打包生成的webpack-assets.json列表，并将所需文件呈现到视图中。作者添加了一个academyid来区分多个客户端，每个客户端都有一个以自己id命名的资源目录，如下图所示：

作者的C#比较吝啬，所以定义了一个类来解析json文件，然后将解析后的文件名放入ViewData中供前端使用。现在，您可以使用Razer语法在视图中呈现脚本依赖关系：

通过这种配置，服务器不再需要关心客户端的更改，只需要解析要从webpack-assets.json加载的依赖项并呈现这些依赖项。每当客户端代码更改被重新打包时，webpack-assets.json列表将被更新，而完全不影响服务器。

摘要

水平有限导致本文存在很多不足，包括没有涉及到的SEO方案等隐藏问题。我还有很多需要学习和提高的地方。

好了，这就是本文的全部内容。希望本文的内容能给你的学习或工作带来一些帮助。有问题可以留言交流。谢谢你的支持。