WEBPACK + JSP 构建多页应用

概述

传统的JSP页面应用没法有效的使用ES6语法特性，项目打包压缩困难，没法热更新。传统的单页应用在Tomcat等容器下没法进行服务端渲染到达SEO的效果。本项目工程很好融合的传统JSP页面服务端渲染的特色和单页应用开发特性且极易上手使用!

源码地址

源码地址

Demos与文档

Demos与文档

特性

• 多页应用
• JSP嵌套
• el表达式
• 服务端渲染(SEO)
• 热部署
• js,css语法转换
• eslint
• 热更新
• 支持Vue
• 打包压缩
• IE9+ 支持传统JSP开发所的全部功能；能够经过自定义webpack配置来实现对react的支持；经过引入vue-router和vuex某一个页面完成能够变成一个单页应用。

若是您想要支持IE8，那须要把webpack降级，由于webpack2+是不支持IE8的，以及尽可能避免去使用不支持IE8的库，好比jquery2+，lodash4+, Vue等，祝您好运。

环境搭建

工欲善其事，必先利其器。

• JDK1.7+
• IntelliJ IDEA，须要安装js相关插件和配置支持es6语法。
• Maven3+
• Tomcat7+，端口默认请使用8080
• Git bash
• npm3+
• node7+

若是您喜欢编辑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的文件会被覆盖，致使修改的内容丢失。

打包发布

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页面

传统的JSP是在src/main/webapp下开发，在这个项目框架下开发jsp文件是在src/main/js/src/pages下开发。虽然开发目录不一致，但依然拥有传统jsp开发全部的特性。

• 模板嵌套，好比使用<jsp:include page=''></jsp:include>或者<%@include file=""%>
• el表达式，<c:set>, <c:if>, <c:forEach>等均可以使用
• 嵌入Java代码 好比使用<% out.println("hello world"); %>
• 支持热部署。配置好启动tomcat相关参数。在修改完jsp保存文件后，约10秒后刷新页面就能够看到页面的变化。若是等不及10秒或者页面一直不刷新，能够先点击idea菜单File->Syncronize>同步文件（快捷键Ctrl+Alt+Y），而后在点击Run的左侧第三个按钮后选择Update classes and resources手动更新，以后就刷新页面就能够看到最新出的页面。 实际在npm run dev的时候，pages目录下的jsp会做为htmlWebpackPlugin插件的模板文件，每次修改pages下的文件都会被输出到webapp/WEB-INF/jsp下的相对目录。须要了解具体原理，请前往核心章节

自定义标签库

除了标准的c, fmt, fn标签库外，您也能够自定义标签库。

• 首先在static/WEB-INF/tld新建一个tld，好比elftld
• 而后jsp页面引入，<%@ taglib prefix="elf" uri="/WEB-INF/tld/elfunc.tld" %>

注意的是，在jsp页面的地址必须以/WEB-INF/开头，而实际开发jsp的路径是在js/src/pages目录下，致使idea没法正常解析pages目录下jsp中tld文件路径，在使用自定义标签的时候也没法自动补全。不过能够正常运行，实际开发过程影响不大。若是您有更好的解决方案，请与咱们联系。

语法转换

由于了使用了webpack做为打包工具，您能够轻松对js和css进行语法转换，目前支持：

• es6, stage-2
• postcss
• less, sass, scss 须要额外装对应的loader便可支持

热更新

在开发单页应用的过程当中，有一个很棒的特性就是热更新，修改了js文件，页面实时就会触发更新。 在此项目框架下，您依然能够享受到热更新带来的喜悦，在您修改js和css的时候，页面都会实时触发更新。

VUE

该项目已经默认支持Vue。这一章节也是用VUE编写的，你能够尽情的享受VUE带来的编码的快乐。

• 您能够给idea添加vue.js插件，这样也能够直接使用.vue文件。
• js和css的语法转换在.vue文件中一样适用。

核心

该项目融合了webpack和jsp二者的特性实现了多页应用，这很酷。那究竟是如何实现的呢。这里咱们从搭建项目遇到的问题来说讲最核心的几个问题是如何解决的。

HtmlWebpackPlugin

使用webpack实现多页应用，很容易联想到配置多个entry入口，每个entry对应一个HtmlWebpackPlugin。jsp文件做为HtmlWebpackPlugin的模板文件，在entry的js在打包以后会插入到body下。该项目也是按照这样的搭建的。 这里有几点须要注意

• HtmlWebpackPlugin解析jsp文件须要对应的loader，须要在webpack中配置{ test: /\.jsp$/, loader: 'raw-loader' }，这里使用raw-loader进行纯文本拷贝。若是您有更适合jsp的loader，那么您能够赋予jsp文件特多的特性。
• 由于jsp能够被嵌套，这些被嵌套的jsp，并非入口的jsp。全部只有是入口的jsp在配合HtmlWebpackPlugin插件的会额外添加{inject: 'body'}参数
• 那如何规定哪些jsp是入口文件呢？咱们是经过配置来约定entry的js与jsp的关联关系，配置文件在config/js-jsp-map.js中。

proxy反代

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前须要把这两个服务都启动起来。
• 当涉及到jsp文件有新增删除，或者static目录下的文件有新增编辑删除时，须要从新npm run dev和重启tomcat。记住一点，若是有文件新增和删除，最好都把这两个服务都重启一下确定是没有问题的。

WriteFilePlugin

咱们知道webpack-dev-server是使用内存中的文件系统。而jsp页面最终是要发布到tomcat的，内存中的jsp文件并不能被idea监听，这样即便最终输出的jsp发生改变也没法被deploy到tomcat。 庆幸咱们找到了一个webpack的插件WriteFilePlugin，它能强制把webpack-dev-server程序的输出的文件写到磁盘文件系统上。 这里有几点须要注意

• 虽然经过WriteFilePlugin的jsp文件输出到磁盘上了，可是由于不是经过idea直接修改，idea仍是没法马上同步这些文件。idea同步并发布jsp文件会有10s的延迟。若是等不及10秒或者页面一直不刷新，能够先点击idea菜单File->Syncronize>同步文件（快捷键Ctrl+Alt+Y），而后在点击Run的左侧第三个按钮后选择Update classes and resources手动更新，以后就刷新页面就能够看到最新出的页面。

结语

这个思路其实不只适用tomcat下的jsp多页应用，一样也是适用node做为服务器的多页应用。Enjoy it!