JHipster一知半解- 4.6.1 webapp-目录结构

回文集目录:JHipster一知半解

目录结构

1. 主目录位于“\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'
    },
    

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

new CopyWebpackPlugin([
    { 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到目标目录，这样就可以在标签生成前显示给用户。