前言：
在哪看到过angular程序员被React程序员鄙视，略显尴尬，确实Angular挺值得被调侃的，在1.*版本存在的几个性能问题，性能优化的“潜规则”贼多，以及从1.*到2.*版本的面目全非，不过宽容点来看这个强大的框架，升级到ng2肯定是一件好事情，虽然截至目前ng2还存在或多或少需要完善的地方，但是ng2做到了留下并强化ng1好的部分，移除或改善其不好的部分，并且基于许多较新Web技术来开发，不去看从ng1迁移到ng2的门槛和工作量的话，ng2的编程体验是很酷炫的。
目前ng2已经在npm上活跃到了2.4.*版本，笔者也斗胆用来重构现有的一个ng1产品，目前开发还未完全完成，也已经有了一些ng2开发的心得，其给我的其中一个感觉就是，框架的搭建很重要，搭建好一个酷炫的ng2项目架构，已经可以说是成功了一半了。
本文目的就在于分享一下angular2搭配webpack的项目框架搭建心得。
一、前端模块化
ng2的开发可以说是官方强行模块化，毕竟使用了TS与ES6新特性。使用ng1开发推荐的写法就是每个controller啊service啊factory啊filter啊都放在单独文件中并包上立即执行函数来分隔作用域，如果是这种写法，迁移到ng2中能减少一些工作量，将不同服务或是组件到处import即可。
说白了ng2项目架构搭建的重难点就在于对前端代码模块化的运用。习惯了所有变量函数都直接定义在window下的话得花些时间来理解与运用。题外话JS/ES模块化的发展历程也是蛮酷炫的。
二、SystemJS与Webpack
ng2默认使用SystemJS作为模块化工具，在其官网上有推荐使用Webpack来代替，但其对Webpack下ng2的搭建提到的不多。
不管是SystemJS还是Webpack，起到的最根本的作用就是模块化ng2代码，所做的事情就是：通过配置让其知道某个ng2依赖的路径(比如@angular/http)，当需要使用网络请求时只要在具体的service下引用这个依赖(import)，SystemJS或者Webpack就会将其引入，然后就可以使用它内部提供的实例方法了。
ng1时代在不借助模块化工具的情况下，做法是先将angular.min.js引入，然后再其后面执行代码，而ng2配置好模块化工具后，页面引入的是SystemJS(Webpack)的脚本，然后异步加载后续需要的ng2模块。
至于Webpack区别于SystemJS的地方，简单来说Webpack所做的事不止是帮忙异步加载模块，还把资源的压缩包了。也就是说使用SystemJS的情况下，当使用到某个ng2组件时还得发起请求，请求组件依赖的脚本文件，视图模板以及样式表，而Webpack可以将所有的这些都打包压缩。
所以给出的建议就是，如果只是试水看看ng2酷炫的能力，SystemJS足够了，但如果是用来做产品，Webpack有巨大优势。
三、Webpack的配置
厉害的Webpack配置非常值得研究，笔者能力不够，借鉴了国外一个开源的angular2-starter项目，地址如下：
简单说说Webpack工作的过程：
在npm下使用指令运行webpack，首先会在当前目录寻找webpack.config.js文件，里面就是需要编写的webpack的编译规则，包含代码入口，需要加载的文件(包括各种后缀的文件，需要哪一类都可以配置进去)，以及最终输出的文件。
编译完成后只要将输出的几个脚本引用到页面中就完成了，甚至可以由webpack来输出一个index.html，作为网站的入口文件，其深层的工作原理非常值得研究。
四、目录结构与编程风格推荐
关于ng2项目的目录结构与编程风格的推荐，ng2官网的风格指南已经讲得非常完善，看完绝对能受益匪浅，地址如下：
五、发布与部署
发布与部署不是什么难事，但是从来没发布过的话总会紧张的，大致过程就是：
1. 运行webpack命令将源代码生成为待发布代码(包含入口文件index.html、静态资源assets、主webpack脚本和其trunk脚本)
2. 找一个服务器部署发布的代码，任意服务器都可以，直接使用node服务器也完全没问题，更多的工作是如何维护。
六、浅谈Angular2核心思想
在开始开发ng2项目前，先认识一下其整体的工作过程是很有必要的。
下面是ng2官网给出的一张全景图：
<div class="image-package">
<img style="display: block; margin-left: auto; margin-right: auto" src="//upload-images.jianshu.io/upload_images/4740306-195594bd17ba6f6d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="" data-original-src="//upload-images.jianshu.io/upload_images/4740306-195594bd17ba6f6d.png?imageMogr2/auto-orient/strip" data-image-slug="195594bd17ba6f6d" data-width="736" data-height="375"><div class="image-caption" style="text-align: center">ng2工作过程全景图