回文集目录:JHipster一知半解
目录结构

主目录位于“\src\main\webapp”，
在tscconfig.json中指定文件目录：

"include":[
"src/main/webapp/app",
"src/test/javascript/"
]

在webpack.dev.js,webpack.prod.js中指定入口：
entry:{
polyfills:'./src/main/webapp/app/polyfills',
global:'./src/main/webapp/content/css/global.css',
main:'./src/main/webapp/app/app.main'
},



app目录：
Angular程序的主目录，后面代码的分析的主体部分。
content目录：
包含需要打包的静态资源（css和image），类似于assert，仅仅copy并hash重命名，并没有打包在生产的css或js中。
i18n目录：
内部按照语种存放语种文件，在webpack打包时候会整合成一个××.json的语言包，由ngx-translate统一加载。
swagger-ui目录：
swagger中jhipster做了修改的自定义部分，其他包含在（node—_modules/swagger-ui)中。
404.html
标准的错误页面，提供给运行在tomcat这样的容器时找不到页面的错误显示。理论上，我们生成的前端工程是SPA单页面，应该设置的页面在找不到路由时候返回index，然后由前端去自行解析url处理路由。也就是说，这个页面正常是不起作用的。
manifest.webapp
网站描述文件，前端缓存用，webpack打包也就是copy到target目录。
robots.txt
给google机器人用的网站描述文件。JHipster是SPA，那么与后端的api就自然出现在
Disallow中了。

小动作-给index添加加载效果
JHipster前端SPA，直接打开后要等所有资源加载完毕才显示（虽然已经做了子模块，但是并没有做懒加载？），这样在网络带宽比较慢的情况下，就会出现长时间“白屏幕”，这显然不是很好的用户体验。由angular的运行原理可以知道，程序加载后，会找index.html中标签，清空其内容，在之后添加angluar主界面。那么，之前我们利用这个原理，向标签加东西

不要空白-添加文字。

Loading

这样就能显示一个“Loading”字符串，防止白屏幕
借鉴ngx-admin
TODO:此处应该有ngx-admin的图片和网站。
通过查看其index，发现它是加了一段动画效果，直接copy过来即可

当然，发现黑色的背景，和JHipster差别太大，把background改成#ffffff，稍微好看一点点。
TODO:加效果图
借鉴PrimeNG
PrimeNG的index就比较复杂了，是一个图片加上一个css，而且也不是内嵌到html文件中，而是独立的，借鉴过来稍微复杂一点。

1.splash.css拷贝到content/css/splash.css
2.mask.svg拷贝到content/images/mask.svg
3.index.html做如下修改(仅列出增加的部分）：

4.webpackCommon.js的CopyWebpackPlugin增加：

newCopyWebpackPlugin([
{from:'./src/main/webapp/content/css/splash.css',to:'content/splash.css'}
]),

稍微解释一下，svg放content/images会由webpack的file-loader拷贝过去并hash从命名，并且会自动修改生成的index.html，所以图片只需要放入该目录即可。
而css是有指定的global.css作为入口处理的（如果是sass，就会有个先编译在加载的过程），仅仅放到目录，而没有引用，肯定是没法加载的，而且打包在一起和我们提前显示的目的相违背。所以就需要利用CopyWebpackPlugin，把它copy到目标目录，这样就可以在

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之WebApp频道！