一个纯净的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