Webpack前端整合到SpringMVC项目中

最新推荐文章于 2022-04-21 17:23:26 发布

宇&雪

最新推荐文章于 2022-04-21 17:23:26 发布

阅读量1.4k

点赞数

分类专栏： JavaWeb nodejs 文章标签： WebPack SpringMVC

本文链接：https://blog.csdn.net/dyjhjj/article/details/85289921

版权

本文介绍了如何在不支持Nodejs环境的容器引擎系统中，通过Webpack前端整合到SpringMVC项目，利用maven插件在jenkins构建阶段进行编译。文章详细讲解了目录结构、编译方式（包括frontend-maven-plugin和maven-war-plugin的使用），以及sitemesh和Spring的配置调整，以确保Webpack编译后的文件能正确部署到Tomcat并正常访问。

摘要由CSDN通过智能技术生成

Webpack前端整合到SpringMVC项目中

背景

容器引擎系统不支持直接部署Nodejs环境，需要结合maven插件在jenkins构建阶段编译Webpack项目。这里我把前端代码整合到SpringMVC项目中，作为一个整体工程进行打包部署。

SpringMVC是已有项目，需要保留旧版本。这次重构前端，并在后端添加单独API模块。

目录结构

|-- src
    |-- frontend （Webpack项目）
    |-- java
    |-- resources
    |-- webapp
|-- pom.xml

如上所示，frontend是Webpack项目，可以单独在Webstorm进行开发运行。如果要在SpringMVC工程中编译Webpack并部署到Tomcat，需要对pom.xml作少许改动，添加相应的maven插件。

编译方式

主要用到maven-war-plugin、frontend-maven-plugin两个插件。

frontend-maven-plugin插件

下载nodejs到指定目录，执行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