Webpack前端整合到SpringMVC項目中
背景
容器引擎系統(tǒng)不支持直接部署Nodejs環(huán)境斤贰,需要結合maven插件在jenkins構建階段編譯Webpack項目稍刀。這里我把前端代碼整合到SpringMVC項目中首妖,作為一個整體工程進行打包部署痹兜。
SpringMVC是已有項目唁影,需要保留舊版本出吹。這次重構前端遇伞,并在后端添加單獨API模塊。
目錄結構
|-- src
|-- frontend (Webpack項目)
|-- java
|-- resources
|-- webapp
|-- pom.xml
如上所示捶牢,
frontend
是Webpack項目鸠珠,可以單獨在Webstorm進行開發(fā)運行。如果要在SpringMVC工程中編譯Webpack并部署到Tomcat秋麸,需要對pom.xml作少許改動渐排,添加相應的maven插件。
編譯方式
主要用到maven-war-plugin
灸蟆、frontend-maven-plugin
兩個插件驯耻。
frontend-maven-plugin插件
下載nodejs到指定目錄,執(zhí)行Webpack編譯命令炒考。
maven-war-plugin插件
將Webpack編譯后的文件放到target指定目錄可缚。
<plugin>
<groupId>com.github.eirslett</groupId>
<artifactId>frontend-maven-plugin</artifactId>
<version>1.6</version>
<executions>
<execution>
<id>install node and npm</id>
<goals>
<goal>install-node-and-npm</goal>
</goals>
</execution>
<execution>
<id>npm install</id>
<goals>
<goal>npm</goal>
</goals>
<configuration>
<arguments>install</arguments>
</configuration>
</execution>
<execution>
<id>npm run build</id>
<goals>
<goal>npm</goal>
</goals>
<configuration>
<arguments>run build</arguments>
</configuration>
</execution>
</executions>
<configuration>
<!--node版本-->
<nodeVersion>v10.14.2</nodeVersion>
<!--node安裝路徑-->
<installDirectory>target</installDirectory>
<!--前端代碼路徑-->
<workingDirectory>src/main/frontend</workingDirectory>
</configuration>
</plugin>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-war-plugin</artifactId>
<version>2.4</version>
<configuration>
<warName>[war包名稱]</warName>
<webResources>
<resource>
<filtering>true</filtering>
<directory>src/main/webapp</directory>
</resource>
<resource>
<filtering>true</filtering>
<!--Webpack編譯目標路徑-->
<directory>src/main/frontend/dist</directory>
<!--拷貝到target指定目錄-->
<targetPath>WEB-INF/web</targetPath>
</resource>
</webResources>
</configuration>
</plugin>
配置文件
sitemesh配置
SpringMVC使用sitemesh+JSP,無法直接訪問新增的html及api斋枢,需要修改sitemesh配置文件
我的sitemesh配置文件路徑為src/main/webapp/WEB-INF/decorators.xml
<?xml version="1.0" encoding="UTF-8"?>
<decorators defaultdir="/WEB-INF/views">
<decorator name="default" page="layouts/default.jsp" />
<excludes>
<!--符合下列模式的url不進行sitemesh裝飾-->
<pattern>*.html</pattern>
<pattern>/api/*</pattern>
</excludes>
</decorators>
spring配置
訪問靜態(tài)資源時帘靡,根據(jù)配置的
mapping
到指定的location
下尋找資源文件。不配置靜態(tài)資源瓤帚,訪問時會報
404 NOT FOUND
錯誤
<!-- 靜態(tài)資源映射 -->
<!-- Webpack編譯后的靜態(tài)資源目錄 -->
<mvc:resources mapping="/static/**" location="/static/,/WEB-INF/web/static/" />
<mvc:resources mapping="/**/*.html" location="/WEB-INF/web/" />
<mvc:resources mapping="*.html" location="/WEB-INF/web/" />