前言

  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

WebJar的打包和使用  的更多相关文章

  1. WebJar的打包和使用

    前言 WebJar官网:https://www.webjars.org/,对于任何与Servlet 3兼容的容器,WEB-INF/lib目录中的webjar都会自动作为静态资源提供.这是因为WEB-I ...

  2. Maven 打成 Webjar的方法

    http://blog.csdn.net/sxdtzhaoxinguo/article/details/45666789 *************************************** ...

  3. Spring使用webjar

    注意事项 这玩意很简单,但是我们第一次搞就是搞不成功,为什么呢?因为我们都用的是idea或者eclipse编译.webjar只能在maven上才能打包,所以在使用时,记得maven-clean和mav ...

  4. SpringBoot笔记十三:引入webjar资源和国际化处理

    目录 什么是webjar 怎么使用webjar 国际化 新建国际化配置文件 配置配置文件 使用配置文件 我们先来看一个html,带有css的,我们就以这个为准来讲解. 资源可以去我网盘下载 链接:ht ...

  5. Android Studio 多个编译环境配置 多渠道打包 APK输出配置

    看完这篇你学到什么: 熟悉gradle的构建配置 熟悉代码构建环境的目录结构,你知道的不仅仅是只有src/main 开发.生成环境等等环境可以任意切换打包 多渠道打包 APK输出文件配置 需求 一般我 ...

  6. 【原创分享·支付宝支付】HBuilder打包APP调用支付宝客户端支付

    前言 最近有点空余时间,所以,就研究了一下APP支付.前面很早就搞完APP的微信支付了,但是由于时间上和应用上的情况,支付宝一直没空去研究.然后等我空了的时候,发现支付宝居然升级了支付逻辑,虽然目前还 ...

  7. 细说前端自动化打包工具--webpack

    背景 记得2004年的时候,互联网开发就是做网页,那时也没有前端和后端的区分,有时一个网站就是一些纯静态的html,通过链接组织在一起.用过Dreamweaver的都知道,做网页就像用word编辑文档 ...

  8. .NET Core 系列5 :使用 Nuget打包类库

    NuGet是个开源项目,项目包括 NuGet VS插件/NuGet Explorer/NuGetServer/NuGet命令行等项目,.NET Core项目完全使用Nuget 管理组件之间的依赖关系, ...

  9. Node-Webkit打包

    1.node-webkit是什么? NW.js is an app runtime based on Chromium and node.js. You can write native apps i ...

随机推荐

  1. YbtOJ#593-木棍问题【费用流】

    正题 题目链接:https://www.ybtoj.com.cn/contest/114/problem/3 题目大意 \(n*m\)的网格上有一些格子有木球,两个相邻木球直接可以有木棍. 两个\(L ...

  2. 最详细的搭建web自动化测试网站,别再说你没有实战项目(文未有福利)

    一步步教你搭建开源网站 环境准备: Tomcat shopping商城文件 jdk环境 Mysql环境 解压shopping.rar拷贝至tomcat/webapps 在navicat导入数据库db_ ...

  3. Winform 实现图片轮播(解决Image.FromFile内存不足)

    前言 最近项目中需要在winform中做一个类似于网页那种轮播的效果,这里做下记录. 实现 整体的实现思路如下: 读取图片文件夹. 建立一个集合存储Image对象. 定时器定时更换PictrueBox ...

  4. MacOS Typora集成SM.SM图床 实现自动上传图片

    MacOS Typora集成SM.SM图床 实现自动上传图片 此为PicGo-Core (Command line) (OpenSource)配置方法 参照官网 https://support.typ ...

  5. bzoj4094 && luogu3097 最优挤奶

    题目大意: 给定n个点排成一排,每个点有一个点权,有m次修改,每次改变某个点的点权并将最大点独立集计入答案,输出最终的答案 其中\(n\le 40000\ , \ m\le 50000\) QWQ说实 ...

  6. CAD/DWG图Web网页可视化技术之栅格和矢量瓦片

    背景 在上一篇博文中CAD图DWG解析WebGIS可视化技术分析总结提到,实现CAD/DWG图形Web展示的思路一般为解析AutoCAD图形格式,然后转成html5所能绘制的格式如svg,geojso ...

  7. res目录下的结构

    目录 res目录下的结构 drawable开头的文件夹 mipmap开头的文件夹 values开头的文件夹 layout文件夹 使用res目录下的资源 res目录下的结构 如果你展开res目录看一下, ...

  8. Nginx安装及核心配置解析

    安装 使用yum进行安装 yum install -y nginx 查看nginx的安装位置 whereis nginx 启动测试 nginx 核心配置文件结构 读取Nginx自带的Nginx配置文件 ...

  9. GAN实战笔记——第二章自编码器生成模型入门

    自编码器生成模型入门 之所以讲解本章内容,原因有三. 生成模型对大多数人来说是一个全新的领域.大多数人一开始接触到的往往都是机器学习中的分类任务--也许因为它们更为直观:而生成模型试图生成看起来很逼真 ...

  10. NX CAM 读取加工参数

    '取加工几何试图程序组 Function GetGemoGroup_Name(ByVal camObjectTag As NXOpen.Tag) As String Dim theGemoGroupT ...