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/" />