一個純淨的webpack4+angular5腳手架

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

# 腳手架基礎架構（根據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模塊，該目錄下包含該模塊的視圖、控制器以及模塊路由配置等文件。

app-routing.module.ts：項目的根路由模塊

app.component.html：應用引導啓動視圖

app.module.ts: 應用根模塊

index.html：應用加載頁

main.ts：angular入口文件

polyfills.ts：彙總一些兼容庫文件

tsconfig.ts：typescript的配置文件

vendor_ng.ts：第三方資源文件彙總

另外，在開發環境中引入了一個可視化的打包插件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