WebJar的打包和使用
前言
WebJar官网:https://www.webjars.org/,对于任何与Servlet 3兼容的容器,WEB-INF/lib目录中的webjar都会自动作为静态资源提供。这是因为WEB-INF/lib中的JAR中的META-INF/resources目录中的任何内容都会自动公开为静态资源。
官网上面已经有很多热门webjar,但有时候还是不能满足我们的需要,我们需要自己打包WebJar,本文记录如何WebJar的打包、使用
打包
首先创建一个maven工程,干干净净什么都没有
把一下常用的web资源(比如:jquery、bootstrap前端框架、layer弹出层、jqgrid分页插件)放在resources文件夹下面,为了更直观的区分,我们先新建一个plugin文件夹
编写pom.xml,指定打包方式,以及构建工具
<?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <!-- 打包方式 --> <packaging>jar</packaging> <groupId>cn.huanzi</groupId> <artifactId>webjar</artifactId> <version>1.0.1</version> <!-- 构建工具 --> <build> <resources> <resource> <directory>${project.basedir}/src/main/resources</directory> <targetPath>META-INF/resources/</targetPath> </resource> </resources> </build> </project>
打开maven工具栏,package打包
打包成功
target目录下面就会生成jar包
jar包结构是这样子滴
有了jar包后我们就可以引入jar使用这些web静态资源了,上传到maven私服使用maven引入或者直接引入jar文件都行
使用
首先需要引入jar,如果是直接把jar放在项目里面就不多说了直接复制进去就行,如果是要maven引入,则先需要把jar包发到maven私服,在pom中配置私服地址,然后引入
<!-- 配置私服地址 --> <repositories> <repository> <id>XXXXXXX</id> <name>XXXXXX</name> <url>XXXXXX</url> </repository> </repositories> <!-- 引入webjar --> <dependency> <groupId>cn.huanzi</groupId> <artifactId>webjar</artifactId> <version>1.0.1</version> </dependency>
使用方式就跟我们使用resources下面的资源一样,我们看一下thymeleaf引入例子:
<!-- jquery --> <script th:src="@{/plugin/jquery.min.js}"></script>
总结
使用WebJar有什么好处呢?
1、打成jar包方便管理,统一资源版本,如需升级资源版本,修改webjar工程、升级版本号,重新打包上传maven私服即可,项目无需做修改
2、减少项目大小,提高打包、部署项目是的效率,例如本例中:
没打包之前 14.4MB 打包之后 5.62MB,减少8.78MB
如果使用maven引入,则一点空间都不占,项目大小减少14.4MB
版权声明
捐献、打赏

支付宝

微信
交流群


【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!