Webpack前端整合到SpringMVC項目中

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/" />
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末描姚,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子戈次,更是在濱河造成了極大的恐慌轰胁,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,807評論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件朝扼,死亡現(xiàn)場離奇詭異赃阀,居然都是意外死亡,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,284評論 3 399
  • 文/潘曉璐 我一進店門榛斯,熙熙樓的掌柜王于貴愁眉苦臉地迎上來观游,“玉大人,你說我怎么就攤上這事驮俗《疲” “怎么了?”我有些...
    開封第一講書人閱讀 169,589評論 0 363
  • 文/不壞的土叔 我叫張陵王凑,是天一觀的道長搪柑。 經常有香客問我,道長索烹,這世上最難降的妖魔是什么工碾? 我笑而不...
    開封第一講書人閱讀 60,188評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮百姓,結果婚禮上渊额,老公的妹妹穿的比我還像新娘。我一直安慰自己垒拢,他們只是感情好旬迹,可當我...
    茶點故事閱讀 69,185評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著求类,像睡著了一般奔垦。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上尸疆,一...
    開封第一講書人閱讀 52,785評論 1 314
  • 那天宴倍,我揣著相機與錄音,去河邊找鬼仓技。 笑死鸵贬,一個胖子當著我的面吹牛,可吹牛的內容都是我干的脖捻。 我是一名探鬼主播阔逼,決...
    沈念sama閱讀 41,220評論 3 423
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼地沮!你這毒婦竟也來了嗜浮?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 40,167評論 0 277
  • 序言:老撾萬榮一對情侶失蹤摩疑,失蹤者是張志新(化名)和其女友劉穎危融,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體雷袋,經...
    沈念sama閱讀 46,698評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡吉殃,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 38,767評論 3 343
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片蛋勺。...
    茶點故事閱讀 40,912評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡瓦灶,死狀恐怖,靈堂內的尸體忽然破棺而出抱完,到底是詐尸還是另有隱情距帅,我是刑警寧澤肠牲,帶...
    沈念sama閱讀 36,572評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站酣难,受9級特大地震影響瞬测,放射性物質發(fā)生泄漏探颈。R本人自食惡果不足惜礼患,卻給世界環(huán)境...
    茶點故事閱讀 42,254評論 3 336
  • 文/蒙蒙 一匣距、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧上荡,春花似錦趴樱、人聲如沸馒闷。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,746評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽纳账。三九已至逛薇,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間疏虫,已是汗流浹背永罚。 一陣腳步聲響...
    開封第一講書人閱讀 33,859評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留卧秘,地道東北人呢袱。 一個月前我還...
    沈念sama閱讀 49,359評論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像翅敌,于是被迫代替她去往敵國和親羞福。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,922評論 2 361

推薦閱讀更多精彩內容

  • 1 Webpack 1.1 概念簡介 1.1.1 WebPack是什么 1蚯涮、一個打包工具 2治专、一個模塊加載工具 3...
    Kevin_Junbaozi閱讀 6,680評論 0 16
  • 一、webpack的基本概念 webpack 本質上是一個打包工具遭顶,它會根據(jù)代碼的內容解析模塊依賴张峰,幫助我們把多個...
    cilla123閱讀 1,546評論 0 8
  • GitChat技術雜談 前言 本文較長,為了節(jié)省你的閱讀時間棒旗,在文前列寫作思路如下: 什么是 webpack喘批,它要...
    蕭玄辭閱讀 12,699評論 7 110
  • 寫在前面的話 閱讀本文之前,先看下面這個webpack的配置文件,如果每一項你都懂谤祖,那本文能帶給你的收獲也許就比較...
    不忘初心_9a16閱讀 3,242評論 0 17
  • 臨淵羨魚婿滓,不如退而結網。 常常羨慕別人的成就粥喜,這是很多人的通病凸主。說俗點,就是見不得別人好额湘,眼紅卿吐。但凡別人取得點成就...
    愛伸懶腰的小老鼠閱讀 274評論 0 0