一個純淨的webpack4+angular5腳手架

該篇主要是結合剛發佈不久的webpack4,搭建一個非cli的angular5的腳手架demo,主要分爲如下幾個方面闡述下腳手架結構:javascript

# 腳手架基礎架構(根據angular5的新規範)

/**
* 腳手架結構
*
*/
—— 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

相關文章
相關標籤/搜索