根据Víctor Orozco的经验，有时候需要使用war文件作为容器来构建SPA(single page web application)单页web应用程序。
比如：
> 当你无法控制去部署基础设施的时候
> 当你正在处理一些刻板的部署标准的时候
> 当程序员很不情愿的去发布一个老套而简易的web服务时
不管怎样
正如Oracle官方文档中所描述的，使用war文件的好处之一就是可以在部署中引入静态（HTML/CSS/JS）文件。
因此，可以大胆地认为 war文件可以被作为包装器（需要特别考虑）来分发构建任何SPA。
用Angular8和Java War做一个POC（验证性测试）
为了证实这一点，我将创建一个项目：
1. 兼容三大Java IDE（NetBeans、IntelliJ、Eclipse）还有 VSCode
2. 可以将以上IDE作为开发JavaScript的IDE
3. 可以创建一个SPA应用（包含所有npm、ng、cli等）
4. 可以组合Java（Maven）+ JavaScript（Webpack）来构建系统
5. 可以发布一个小型的并且可用于生产的项目
构建一个简单的Java Web项目
你可以使用普通的maven-archetype-webapp作为基础来引导Java项目
mvn archetype:generate -DarchetypeGroupId=org.apache.maven.archetypes -DarchetypeArtifactId=maven-archetype-webapp -DarchetypeVersion=1.4
shell需要你提供一些项目特性，包括groupId、artifactId（项目名称）和基本包。
最后，你应该看到以下结构：
demo-angular-8$ tree.├── pom.xml└── src└── main└── webapp├── WEB-INF│ └── web.xml└── index.jsp4 directories, 3 file
现在，你应该可以在任何一个IDE中打开你的项目。默认情况下，pom.xml将包含一些Maven插件的固定版本。
你可以不用管这些，因为我们不会个性化整个Maven生命周期，只是几个hook。
(另外index.jsp也不需要，删掉它)
<?xml version="1.0" encoding="UTF-8"?><project xmlns="/POM/4.0.0" xmlns:xsi="/2001/XMLSchema-instance"xsi:schemaLocation="/POM/4.0.0 /xsd/maven-4.0.0.xsd"><modelVersion>4.0.0</modelVersion><groupId>com.nabenik</groupId><artifactId>demo-angular-8</artifactId><version>1.0-SNAPSHOT</version><packaging>war</packaging><name>demo-angular-8 Maven Webapp</name><properties><project.build.sourceEncoding>UTF-8</project.build.sourceEncoding><piler.source>1.7</piler.source><piler.target>1.7</piler.target></properties></project>
构建一个简单的Angular项目
首先因个人喜好我习惯将Angular项目放在前端 "src/main/frontend"目录中。
在之前使用AngularJS, Knockout, Ember等老框架，可以通过index.html中的几个includes来引导整个项目。而现在大多数前端项目使用Webpack来构建。
OK! 至此，我假定你已经安装了所有Angular CLI工具，接下来我们进入源码结构并引入Angular项目。
demo-angular-8$ cd src/main/demo-angular-8/src/main$ ng new frontend
这样将构建一个普通的Angular项目，实际上也可以将"src/main/frontend"文件夹当作一个单独的根目录（也可以直接从VSCode打开）。
最终项目结构如图：
作为第一次测试，我用IDEA 直接通过CLI 执行 " ng serve --open " 启动了项目, 一切如期而至。
从Maven调用Webpack
有个合适的插件叫 frontend-maven-plugin，可以使用它：
> 下载常见的JS包管理器（npm、cnpm、bower、yarn）
> 调用JS来构建系统和测试（grunt、gulp、webpack或npm本身、karma）
默认情况下，Angular 项目中从npm到ng带有hooks，但是我们需要在package.json中加个hook来创建一个[buildProduction]，由于我使用的是Java约定中的默认路径（与项目名称相同）所以请仔细检查base-href参数
..."scripts": {"ng": "ng","start": "ng serve","build": "ng build","buildProduction": "ng build --prod --base-href /demo-angular-8/","test": "ng test","lint": "ng lint","e2e": "ng e2e"}...
我们可以执行 npm run buildProduction 来测试一下，在webproject的根目录（src/main/frontend）中，输出应该如下：
最后，有必要使用maven调用或新建 target
> 安装nodejs(和npm)
> 安装JS依赖
> 调用我们的新hook
> 把结果复制到最终可分配的war中
完成配置：
<build><finalName>demo-angular-8</finalName><plugins><plugin><groupId>com.github.eirslett</groupId><artifactId>frontend-maven-plugin</artifactId><version>1.6</version><configuration><workingDirectory>src/main/frontend</workingDirectory></configuration><executions><execution><id>install-node-and-npm</id><goals><goal>install-node-and-npm</goal></goals><configuration><nodeVersion>v10.16.1</nodeVersion></configuration></execution><execution><id>npm install</id><goals><goal>npm</goal></goals><configuration><arguments>install</arguments></configuration></execution><execution><id>npm build</id><goals><goal>npm</goal></goals><configuration><arguments>run buildProduction</arguments></configuration><phase>generate-resources</phase></execution></executions></plugin><plugin><artifactId>maven-war-plugin</artifactId><version>3.2.2</version><configuration><failOnMissingWebXml>false</failOnMissingWebXml><!-- Add frontend folder to war package --><webResources><resource><directory>src/main/frontend/dist/frontend</directory></resource></webResources></configuration></plugin></plugins></build>
就这样！一旦执行mvn clean package，你将获得一个轻便的war文件，它将在任何Servlet容器中运行。然后用Payara Server 5测了一下如期而至。
原文来自：/articles/how-to-pack-angular-8-applications-on-regular-war
感谢大佬！
如果觉得《如何将Angular8项目部署到(Java Web)war包上》对你有帮助，请点赞、收藏，并留下你的观点哦！
