wjsp
1.0.0
傳統的JSP頁面應用無法有效的使用ES6語法特性，項目打包壓縮困難，無法熱更新。傳統的單頁應用在Tomcat等容器下無法進行服務端渲染到達SEO的效果。本項目工程很好融合的傳統JSP頁面服務端渲染的特點和單頁應用開發特性且極易上手使用!
源碼地址
Demos與文檔
如果您想要支持IE8，那需要把webpack降級，因為webpack2+是不支持IE8的，以及盡量避免去使用不支持IE8的庫，比如jquery2+，lodash4+, Vue等，祝您好運。
工欲善其事，必先利其器。
如果您喜歡編輯js和css的時候用vscode也是沒有問題，不過編寫jsp和java還是推薦用idea。
以下總結環境配置的相關文章，可供參考JDK下載地址IntelliJ IDEA配置前端開發環境IntelliJ IDEA配置JAVA WEB的Tomcat環境maven下載安裝Git Bash下載安裝
├── pom.xml // maven配置文件
├── src
| ├── main
| | ├── filters
| | | └── resources // java工程资源配置目录
| | ├── java // java代码目录
| | ├── js // 前端页面工程
| | | ├── build // 编译相关以及webpack相关配置
| | | | ├── build.js
| | | | ├── check-versions.js
| | | | ├── logo.png
| | | | ├── utils.js
| | | | ├── webpack.base.conf.js
| | | | ├── webpack.dev.conf.js
| | | | └── webpack.prod.conf.js
| | | ├── config // 配置相关
| | | | ├── dev.env.js
| | | | ├── index.js
| | | | ├── js-jsp-map.js // 配置入口js和jsp的映射
| | | | └── prod.env.js
| | | ├── package.json // npm配置
| | | ├── src // web项目工程目录
| | | | ├── pages // jsp页面，最终的jsp文件们会按照pages相对路径打包进webapp/WEB-INF/jsp目录下
| | | | | ├── include // 共享的jsp页面，通过jsp:include引入
| | | | | | ├── common_script.jsp
| | | | | | ├── footer.jsp
| | | | | | ├── header.jsp
| | | | | | ├── init.jsp
| | | | | | └── meta.jsp
| | | | | ├── index // 页面1
| | | | | | ├── index.js // 需要在在config/js-jsp-map.js配置与jsp的映射关系，这样编译后的js会加载jsp的body下。一般js与jsp在同一个目录下。
| | | | | | └── index.jsp
| | | | | └── start // 页面2
| | | | | ├── dashboard.css
| | | | | ├── index.js
| | | | | └── index.jsp
| | | | └── my-component.vue 支持VUE
| | | ├── polyfills 兼容相关的代码
| | | | ├── console.js
| | | | ├── index.js
| | | | └── promise.js
| | | ├── static // 存在静态文件，最终这些文件会拷贝到webapp目录下
| | | | ├── favicon.ico
| | | | ├── images
| | | | | ├── jsp.svg
| | | | | └── webpack.svg
| | | | ├── js
| | | | | └── lib
| | | | | └── jquery.min.js
| | | | └── WEB-INF
| | | | ├── tld
| | | | └── web.xml
| | | └── styles
| | └── webapp // 该目录下的文件不用开发人员手动添加修改，在npm run dev或npm run build的时候自动生成。
| └── test
| └── java
src/main/js目錄下的目錄結構是在vue-cli的webpack模板的基礎上修改的，如果您使用過該模板創建過項目，那麼將很容易會上手。
cd src/main/js npm run dev
在idea中啟動tomcat
在瀏覽器中打開http://localhost:8081
以下幾點需要注意一下
首次啟動項目，建議先npm run dev在啟動tomcat。之後其中一個重啟，另外一個可以不用重啟。 默認情況下npm run dev跑在8081端口下，tomcat跑在8080端口下。最終在瀏覽器訪問只需要訪問8081的頁面，8080頁面沒有必要。 開發模式下，js引入的css是動態引入的，頁面會出現閃變的效果。不用擔心，在發布後的環境中是不會出現的。 開發jsp頁面的時候，熱部署會有延時，具體參看JSP頁面這一章節開發jsp文件務必在pages目錄下開發，切勿在webapp目錄下開發。否則在切換到pages目錄下開發或者打包後或，webapp下的jsp的文件會被覆蓋，導致修改的內容丟失。 隨著js-jsp-map.js中配置的的入口文件增加，webpack-dev-server的熱更新會很慢，建議根據當前開發需要先臨時註釋掉一些暫未使用的入口文件，保留1至3個即可，會大大提高熱更新時間。
npm run build
webapp作為輸出目錄，static中文件會拷貝到輸出目錄，pages目錄下的jsp文件會作為模板文件拷貝到webapp/WEB-INF/jsp目錄下，與jsp關聯的js入口會被合併壓縮後引入到jsp文件的body中。 jsp關聯的css會被抽離出一個單個的css文件引入的jsp文件head中。
如果您打包後的應用的Application Context不是/, 比如是/app ，即訪問地址都是基於http://localhost:8080/app ，那麼打包的時候webpack的publicPath參數記得配置/app，且jsp頁面中所有的地址都需要帶上${pageContext.request.contextPath}/ ，在該項目框架中可以簡寫為${ctx}/
傳統的JSP是在src/main/webapp下開發，在這個項目框架下開發jsp文件是在src/main/js/src/pages下開發。雖然開發目錄不一致，但依然擁有傳統jsp開發所有的特性。
<jsp:include page=''></jsp:include>或者<%@include file=""%><c:set> , <c:if> , <c:forEach>等都可以使用<% out.println("hello world"); %>File->Syncronize>同步文件（快捷鍵Ctrl+Alt+Y ），然後在點擊Run的左側第三個按鈕後選擇Update Update classes and resources ，之後就刷新頁面就可以看到最新出的頁面。 實際在npm run dev的時候，pages目錄下的jsp會作為htmlWebpackPlugin插件的模板文件，每次修改pages下的文件都會被輸出到webapp/WEB-INF/jsp下的相對目錄。需要了解具體原理，請前往核心章節除了標準的c, fmt, fn標籤庫外，您也可以自定義標籤庫。
<%@ taglib prefix="elf" uri="/WEB-INF/tld/elfunc.tld" %>注意的是，在jsp頁面的地址必須以/WEB-INF/開頭，而實際開發jsp的路徑是在js/src/pages目錄下，導致idea無法正常解析pages目錄下jsp中tld文件路徑，在使用自定義標籤的時候也無法自動補全。不過可以正常運行，實際開發過程影響不大。如果您有更好的解決方案，請與我們聯繫。
因為了使用了webpack作為打包工具，您可以輕鬆對js和css進行語法轉換，目前支持：
在開發單頁應用的過程中，有一個很棒的特性就是熱更新，修改了js文件，頁面實時就會觸發更新。 在此項目框架下，您依然可以享受到熱更新帶來的喜悅，在您修改js和css的時候，頁面都會實時觸發更新。
該項目已經默認支持Vue。這一章節也是用VUE編寫的，你可以盡情的享受VUE帶來的編碼的快樂。
該項目融合了webpack和jsp兩者的特性實現了多頁應用，這很酷。那到底是如何實現的呢。這裡我們從搭建項目遇到的問題來講講最核心的幾個問題是如何解決的。
使用webpack實現多頁應用，很容易聯想到配置多個entry入口，每一個entry對應一個HtmlWebpackPlugin 。 jsp文件作為HtmlWebpackPlugin的模板文件，在entry的js在打包之後會插入到body下。該項目也是按照這樣的搭建的。 這裡有幾點需要注意
{ test: /.jsp$/, loader: 'raw-loader' } ，這裡使用raw-loader進行純文本拷貝。如果您有更適合jsp的loader，那麼您可以賦予jsp文件特多的特性。config/js-jsp-map.js中。tomcat是跑在8080端口下的，webpack-dev-server是跑在8081端口下的，是兩個不同應用。那豈不是開發jsp要在tomcat下編寫調試，開發js在webpack-dev-server調試。這樣的話豈不是很麻煩。
慶幸的webpack-dev-server有一個proxy參數，我們利用proxy把訪問webpack-dev-server的請求都反代到8080下。這樣實際開發過程中瀏覽器只要打開8081端口頁面就可以。這樣就做到兼顧jsp服務端渲染的功能，以及webpack語法轉換，熱更新的功能。 tomcat只有在必要的時候重啟一下就好。 這裡有幾點需要注意
npm run dev和啟動tomcat並沒有順序要求，不過在瀏覽器訪問8081前需要把這兩個服務都啟動起來。npm run dev和重啟tomcat。記住一點，如果有文件新增和刪除，最好都把這兩個服務都重啟一下肯定是沒有問題的。我們知道webpack-dev-server是使用內存中的文件系統。而jsp頁面最終是要發佈到tomcat的，內存中的jsp文件並不能被idea監聽，這樣即使最終輸出的jsp發生改變也無法被deploy到tomcat。 慶幸我們找到了一個webpack的插件WriteFilePlugin，它能強制把webpack-dev-server程序的輸出的文件寫到磁盤文件系統上。 這裡有幾點需要注意
這個思路其實不僅適用tomcat下的jsp多頁應用，同樣也是適用node作為服務器的多頁應用。 Enjoy it!
