解決：Angular-cli:執行ng-build --prod後，dist文件裏無js文件、文件未壓縮等問題

Angular2.0於2016年9月上線，我於9月入坑。

入坑以來，一直讓我很困惑的問題

　　一、angular-cli是個什麼鬼東西？

　　二、爲何咱們本身的資源文件還沒寫什麼，就有起碼50多個js文件加載出來，頁面啓動速度蝸牛級別

　　三、ng build打包出來的文件，未壓縮

　　四、ng build --prod打包出來的文件，未壓縮，並且缺乏js文件

　　五、部署後，如何替換客戶端緩存文件，也就是文件版本如何更換

　　六、文件配置文件在哪裏？

 

　　諸如此類問題，須要如下條件：

　　angular-cli ：Beta.14版本  （ng --version）

　　node ：Beta.4 or higher

　　npm: Beta.3 or higher

　　具體方法參見angular-cli在github上的原文：https://github.com/angular/angular-cli/wiki/Upgrading-from-Beta.10-to-Beta.14；

　　我這裏只介紹根據原文我所作的具體操做：

　　一、卸載掉舊版cli，下載最新版

　　npm uninstall -g angular-cli
　　npm cache clean
　　npm install -g angular-cli@latest

　二、使用新版cli，new一個新項目出來

　　ng new migration-project
　　cd migration-project

 

　　三、將新項目中的src目錄備份

 

　　mv src/ src.webpacktemplate/

　四、將原項目中的src，移入新項目中

　　mv ${OLD_PATH}/src src

　五、將原項目中的e2e目錄，移入新項目中

　　mv ${OLD_PATH}/e2e e2e

　六、刪掉新項目中不須要的文件

　　rm src/system-config.ts
　　rm src/typings.d.ts

　七、將備份的src中這些文件拷貝出來

　　cp src.webpacktemplate/polyfills.ts src/
　　cp src.webpacktemplate/styles.css src/
　　cp src.webpacktemplate/test.ts src/
　　cp src.webpacktemplate/tsconfig.json src/
　　cp src.webpacktemplate/typings.d.ts src/

　八、將備份中的src.webpacktemplate/main.ts文件，拷貝到新項目中，注意和你原項目中的main.ts作對比，保留你的代碼
　九、如上操做src.webpacktemplate/index.html文件
　十、將舊目錄的環境配置文件拷入，注意文件名

　　mv ${OLD_PATH}/config/environment.dev.ts src/environments/environment.ts
　　mv ${OLD_PATH}/config/environment.prod.ts src/environments/environment.prod.ts

　　此處原文標註：

　　If you have any custom environments don't forget to move them too.

　　Environments are now listed in the angular-cli.json. Make sure those files matches the files on your disk. More importantly, because they're part of your application, their paths are relative to 　　your main.ts.

　十一、npm install --save ${LIBRARY}

　十二、刪除掉全部的 moduleId: module.id，在webpack中，module.id 是number，可是在angular中指望是一個string

　1三、把你全部的靜態資源文件，圖片放入新項目中的src/assets目錄，別忘了改代碼裏的引用路徑

　　cp -R ${OLD_PATH}/public/ src/assets/

　1四、
 　　Finally, if you're using SASS or LESS, you need to rename your  in all your files. Webpack understands LESS and SASS so you can use  in your component and it will be transcompiled automatically.
styleUrlsstyleUrls: ['my-component.scss']

　1五、能夠入坑了，ng serve運行一下，改掉全部出錯的地方，若是沒有出錯，就能夠刪掉src.webpacktemplate/目錄了
　　
　1六、刪掉新項目的.git配置，把原項目中的.git文件複製過來

　　rm -rf .git/
　　cp -R ${OLD_PATH}/.git .
　　
　1七、ng serve起項目，ng build --prod打包也成功了！

　　　　打包出來的東西少不少了！！



研究得出，它的配置文件是這個：