之前的开发选择的是完全舍弃服务端，仅保留最简单web服务器提供angular经打包的静态资源，此外所有的业务与数据请求都访问一个分离的WebApi来实现。不过最近碰到一个需求，有必要使用多个客户端，而各客户端本身都是webpack打包出来的js而已，没必要每个客户端都自己建一个站点，这就有必要搭建一个服务端，根据参数动态渲染不同客户端的脚本来服务多个客户端了。主要需要解决两个问题，一是防止前后端路由冲突各自有效工作，二是如何实现一套比较合理的部署方案。笼统一点看待这个问题，无非就是要实现如题目所描述的，如何将专注前端的强大框架(angular)整合到一个健壮的现有服务端(.Net)项目中去。
Webpack配置
第一步必然是要先得到前端项目的打包资源，由强大的webpack来完成，目标是将angular的所有依赖以及应用主代码分别打包到polyfill.js、vendor.js、main.js三个脚本中，以及异步懒加载的模块各自打包成一个chunk.js。webpack博大精深，刚接触会摸不着头脑，好在其终究是用来给我们带来方便的一个工具而已，使用起来是很有条理的。其主要的介绍可以移步webpack的官方文档【https://doc.webpack-china.org 】，认真吸收完远远足够写出angular-webpack-starter【 https://github.com/AngularClass/angular-starter 】这样完善的启动项目来了。
简单来说webpack配置有四部曲：
一、 定义入口文件 包含angular的依赖，angular框架代码以及项目的启动代码即可，比如angular-webpack-starter中的配置：
entry: { 'polyfills': './src/polyfills.browser.ts', // 依赖项
'main': AOT ? './src/main.browser.aot.ts' : './src/main.browser.ts' // 主程序
},二、 定义打包规则
打包规则有好一些需要配置的，包括了各种文件类型的打包，angular模块的打包等，配置方式见官方文档或直接参照现成的启动项目，直接看难免懵逼，但不要怕，规则其实就那么点，眼熟就成功了大半。
三、配置插件
webpack有非常多的插件，用来强化打包能力以及规则的扩展，可以看看启动项目中用到了哪些，这些插件在官方文档里都能找到介绍。
四、 定义输出规则
延伸阅读
- ssh框架 2016-09-30
- 阿里移动安全 [无线安全]玩转无线电——不安全的蓝牙锁 2017-07-26
- 消息队列NetMQ 原理分析4-Socket、Session、Option和Pipe 2024-03-26
- Selective Search for Object Recognition 论文笔记【图片目标分割】 2017-07-26
- 词向量-LRWE模型-更好地识别反义词同义词 2017-07-26
- 从栈不平衡问题 理解 calling convention 2017-07-26
- php imagemagick 处理 图片剪切、压缩、合并、插入文本、背景色透明 2017-07-26
- Swift实现JSON转Model - HandyJSON使用讲解 2017-07-26
- 阿里移动安全 Android端恶意锁屏勒索应用分析 2017-07-26
- 集合结合数据结构来看看(二) 2017-07-26
学习是年轻人改变自己的最好方式