- 很多時候工作環境上用的技術沒那麼新
- 以
JAVA來說，很多時候還是多頁應用程式- 指 用
JSP,thymeleaf...等等那樣傳統的server side render的模板引擎，在
server端先準備好一堆HTML然後推送給瀏覽器的作法。通常一頁就會有一個JSP(雖然模板引擎非常多，但以下都以JSP為對象),
跟今天的SPA的作法不同。
- 指 用
- 即使如此，為了做出高互動式的使用介面，很多時候JS還是非常吃重。
- 那怎麼在這樣的專案底下，一樣能
寫ES6,將JS模組化,用webpack將js打包???
- 能夠在一個傳統的JAVA webapp上建立起modern javascript的寫程式流程。
- 建立好一個
multiple page application在開發時應該做好的webpack設定
包括：- 一個
jsp作為一個webpack的entry point，所以多個jsp就會有多個entry提供給webpack - 一個
jsp就會產生一個bundle.js。 - 在開發時使用
webpack-dev-server(以下稱devServer)，所以只要一修改編譯中的js檔案，一樣能支援Hot reload與瀏覽器自動刷新 - 在webpack設定檔裡設定好
devServer的proxy，只有bundle.js是由devServer的記憶體裡提供，而JSP, 圖片檔等各種asset則是由devServer去向給背後的JAVA web app請求。 - 使用
Webpack-HTML-Plugin，在編譯出bundle.js完成之後，自動會在JAVA Webapp的硬碟空間裡多寫出一份，並在</body>前面加上<script type=text/javascript src="/.....bundle.js" /> - 已經設定好
babel,typescript等環境，可以寫ES6+，也可以寫typescript
- 一個
- 建立好一個
- 首先，電腦裡要裝好
node.js與npm。 - 用CMD cd到像是
JAVA Webapp的WebContent那樣的地方cd $path_to_webapp_WebContent
- 創好一個之後要在這個資料夾底下寫整個webapp的js的地方的資料夾，這裡先叫它
js_srcmkdir js_src
- 進入這個資料夾
cd js_src - git clone 這個repo
git clone https://github.com/akari0624/MPA_WebpackJSInjector.git
- 安裝所有第三方套件
npm install
- 可以先把一些不重要的東西自己刪除
.git,README.md...等 - 建議是用
VS Code之類的適合Web前端開發的編輯器來寫js，不要用Eclipse或IDEA，不然會缺少Eslint等擴充插件 - 在
page_config/index.js底下，按照說明設定好一個個jsp頁面與其對應的js打包的進入點，有幾頁JSP要注入打包好後的js，就要有幾組{jsp:..., entryJS:..., outputJS:...}
exports.jspPageMap = [{
jsp:'page1/page1.jsp', entryJS:'page1/index.js', outputJS:'path/to/your/jsdir'
}];- 在
webpack_config/utils/templateBuildsConfig.js底下設定好Tomcat監聽的port號與當由write-file-webpack-plugin65F6 產生出注入<script .... />之後新產生出來的JSP要放在哪裡。templateBuildedEmitPath這個屬性設定好的資料夾名稱會出現在src上一層(所以就是WebContent底下那一層)，之後放著重新產生的temp的JSP，以讓Tomcat去使用。
- 用CMD執行
npm run devWithBabel，開啟devServer開始在src資料夾底下開始寫javascript
- 所有在JSP裡要include的js, css, 圖片, 檔案等，都不可以寫
相對路徑，必須用request.getContectPath()之類的方式來組出url
- 設好WebpackHTMLPlugin，看會不會跑出多個build.js
- 要使用Webpack WriteFilePlugin 在dev時 讓jsp真的會寫進硬碟裡，不然proxy過去tomcat後會沒jsp可編譯
- webpack devServer要設proxy去tomcat
- build 出product bundle js在硬碟裡
本repo深受這篇文章啟發，在此銘謝 掘金用戶 nqdy666 - WEBPACK + JSP 构建多页应用