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

# 遇到的问题：

1、如果是ng5+的话，由于删除了相对路径的指南模块，所以可能会出现以下报错：zone.js:665 Unhandled Promise rejection: Failed to load app.component.html ; Zone: ; 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

转载于:https://www.cnblogs.com/xudengwei/p/8852257.html