該篇主要是結合剛發佈不久的webpack4,搭建一個非cli的angular5的腳手架demo,主要分爲如下幾個方面闡述下腳手架結構:javascript
/** * 腳手架結構 * */ —— src |—— app —— about —— index |—— app-rouing.module.ts |—— app.component.css |—— app.component.html |—— app.component.ts |—— app.module.ts |—— index.html |—— main.ts |—— polyfills.ts |—— styles.css |—— tsconfig.json |—— vendor_ng.ts —— package.json —— webpack.dev.js —— webpack.pro.js
該腳手架的模塊劃分遵循angular-cli規範,業務代碼統一放在了根目錄src下,about和index是兩個腳手架的demo模塊,該目錄下包含該模塊的視圖、控制器以及模塊路由配置等文件。css
app-routing.module.ts:項目的根路由模塊html
app.component.html:應用引導啓動視圖java
app.module.ts: 應用根模塊webpack
index.html:應用加載頁git
main.ts:angular入口文件github
polyfills.ts:彙總一些兼容庫文件web
tsconfig.ts:typescript的配置文件typescript
vendor_ng.ts:第三方資源文件彙總json
另外,在開發環境中引入了一個可視化的打包插件webpack-bundle-analyzer,用於在瀏覽器界面查看最終的bundlejs所包含的全部資源結構,效果以下圖所示,能夠清晰的監控打包的資源,以防引入冗餘文件。配置語法可參見webpack.dev.js文件。
一、若是是ng5+的話,因爲刪除了相對路徑的指南模塊,因此可能會出現如下報錯:zone.js:665 Unhandled Promise rejection: Failed to load app.component.html ; Zone: <root> ; Task: Promise.then ; Value: Failed to load app.component.html
解決方案及why可參考如下資料,這裏就不詳述
* relative-template-and-style-urls-using-system-js-without-moduleid-in-angular-2-4-9
* component-relative-paths-in-angular
* angular變動日誌angular change-log
腳手架中暫且用的是webpack的引入方式來解決該問題,當感受有點怪怪的,期待交流!
提高部分還有無感知刷新功能,以實現提高開發環境效率,但該功能還未加到腳手架裏,打算用官方推薦的webpack-hot-middleware + webpack-dev-middleware雙劍插件實現實時熱替換功能,有更好方式的朋友能夠交流下。
腳手架github地址:angular-scaffold demo