這里講講，angular2在生產模式下用webpack2進行打包的方法：
//使用rollup打包還是比較坑的，功能及插件上都不如webpack, 關鍵不支持代碼分離，導致angular里的lazy loader將無法使用。
具體步驟：
angular=>aot=>webpack(Tree shaking&& Uglify)
angular=>aot:
首先你需要的依賴：
"@angular/compiler" "@angular/compiler-cli" "@angular/platform-browser"。
npm install 安裝他們。
以下是目錄結構：
...
./package.json
./tsconfig.aot.json
./tsconfig.json
./webpack.pro.config.js
./src/
|--./main.ts
|--./main.aot.ts
|--./app.module.ts
|--./router.module.ts
|--./app.component.ts
|--./child/
|--./child.module.ts
|--./child.component.ts
准備一個tsconfig.aot.json:
{
"compilerOptions": {
"module": "es2015",
"moduleResolution": "node",
"declaration": true,
"target": "es5",
"noImplicitAny": false,
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"typeRoots": [ "./node_modules/@types" ],
"lib": [
"dom",
"es2015"
]
},
"angularCompilerOptions": { //這是aot.json獨有的，genDir:"." ,示意，生成的NgFactory文件放於原文件路徑內。你也可以genDir:'aot'，放在aot文件內，但我建議你放在原路徑里。
"genDir": ".",
"skipMetadataEmit":true
},
"files":[
"src/app.module.ts", //從app.module.ts這個文件開始進行編譯。
"src/child/child.module.ts" //這是lazy loader模塊，因為是惰性加載模塊，而沒有在原模塊中import或require它，所以需要單獨編譯。
],
"compileOnSave": false,
"exclude": [
"node_modules",
"src/polyfill.ts"
]
}
接下來運行npm run ngcStart; // package.json : "ngcStart": "ngc -p tsconfig-aot.json"
你會發現 src/文件內生成了許多*.ngfactory.ts , 這些就是提供給生產環境，最終使用的angular文件。自此預編譯完成。
（.js文件可以刪除它，'rimraf src/*.js src/*/*.js'。）
aot=>webpack:
我們需要從main.aot.ts來引導這些aot文件,這是main.aot.ts文件(別從main.ts引導)：
import { platformBrowser } from '@angular/platform-browser';
import { AppModuleNgFactory } from './app.module.ngfactory';
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);
好了，下面是webpack的配置：
{ /....../
entry:{
'main':'./src/main.aot.ts'
},
output:{
path:'dest',
filename:'[name].bundle.js',
chunkFilename:'[id].chunk.js'
},
module:{
rules:[
{test: /\.ts$/,use:[
'awesome-typescript-loader', //我建議你用awesome-typescript-loader進行ts加載。
'angular2-template-loader',
'angular2-webpack2-lazy-children-loader' //這是針對lazy loader 的插件,后面會單獨說
]},
{test:/\.json$/,use:'json-loader'},
{test:/\.html$/,use:'raw-loader'},
{test:/\.(jpg|png|gif)/,use:'file-loader?name=[path][name].[ext]'}
]
}
plugins:[
/..../
new webpack.optimize.UglifyJsPlugin({ /*mini化，並進行treeShaking. 雖然這個treeShaking存在一個問題。不過目前我並沒有一個好辦法，也沒那多時間了.
babili-webpak-plugin雖然shaking掉了class，但文件大小好像並沒變化。
而rollup的treeShaking非常出色，最后得到的文件比webpack UglifyJsPlugin要小幾十KB。可是這東西，不好用。:(
*/
compress:{warnings:true}
})
]
}
最后得到的main.bundle.js就是我們想要的主文件了。
0.chunk.js是child.module所對應的文件。
main.bundle.js 200~400KB 大小。比起不經過aot得到的mini文件（1MB多）小了很多。最后gz壓縮，可以控制在100KB左右。最小可以50KB。
-----------------------------------
說說‘angular2-webpack2-lazy-children-loader’
2017.03.04-------
改用
'angular-router-loader?aot=true'；
angular-router-loader v0.5 支持aot lazy load
-----------------------------
我們這樣使用lazy loader:
loadChildren:' child.module#ChildModule'
可是aot編譯后的文件名字成了child.module.ngfactory.ts,
里面的變量成了ChildModuleNgFactory。所以為了生產模式，你需要改寫成：
loadChildren:' child.module.ngfactory#ChildModuleNgFactory'
如果你手動更改了，那么，你可以繼續使用‘angular-router-loader’在webpack中進行加載。
但使用‘angular2-webpack2-lazy-children-loader’在於，它會自動判斷，並在加載時replace這段string。所以你，在生產或者開發模式都可寫成你原本的格式了。
------------------------------
可以下載嘗試：https://github.com/zhantewei2/angular-aot-webpack