对于日常的web开发而言，像css、js、images、font等静态资源文件管理是非常的混乱的、比如jQuery、Bootstrap、Vue.js等，可能每个框架使用的版本都不一样、一不注意就会出现版本冲突或者重复添加的问题。所以找到了一个叫做WebJars的技术，下面我将介绍如何将静态资源打包成jar。

原本我们在进行web开发时，一般上都是讲静态资源文件放置在webapp目录下，在SpringBoot里面，一般是将资源文件放置在src/main/resources/static目录下。而在Servlet3中，允许我们直接访问WEB-INF/lib下的jar包中的/META-INF/resources目录资源，即WEB-INF/lib/{*.jar}/META-INF/resources下的资源可以直接访问。

所以其实，WebJars也是利用了此功能，将所有前端的静态文件打包成一个jar包，这样对于引用放而言，和普通的jar引入是一样的，还能很好的对前端静态资源进行管理。

话不多说，开始打包。

1 创建项目

习惯性的使用idea new Project

注意：选择jar包的时候什么都不要选择、创建一个空项目！

删除没有用的文件：

补充：resources/application.properties也删了(不删也可以)

2 pom文件修改

现在时间是2018年11月29日、如果你也是用的springboot2.1.0.RELEASE的话、可以跟着我一个字符不多的删除

2.1.1 删除properties

一会几乎要重写了

    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
        <java.version>1.8</java.version>
    </properties>

2.1.2删除dependencies

不需要引用任何jar

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
    </dependencies>

2.1.3 pom大致剩下如下内容

<?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>

    <groupId>com.player</groupId>
    <artifactId>webjars</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <packaging>jar</packaging>

    <name>webjars</name>
    <description>This is webjars Teaching</description>

    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.1.0.RELEASE</version>
        <relativePath/>
    </parent>


    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <destDir>${project.build.outputDirectory}/META-INF/resources/webjars/${project.artifactId}/${project.version}</destDir>
    </properties>


    <build>
        <resources>
            <resource>
                <directory>${project.basedir}/src/main/resources</directory>
                <targetPath>${destDir}</targetPath>
            </resource>
        </resources>
    </build>

    <distributionManagement>
        <repository>
            <id>thirdparty</id>
            <url>http://10.168.2.244:8081/nexus/content/repositories/thirdparty</url>
        </repository>
    </distributionManagement>


</project>

2.2.1 插入properties

${project.build.outputDirectory} 构建过程输出目录，缺省为target/classes

${project.artifactId} 项目的artifactId

${project.version} 项目的version

    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <destDir>${project.build.outputDirectory}/META-INF/resources/webjars/${project.artifactId}/${project.version}</destDir>
    </properties>

2.2.2 重写build

${project.basedir} 项目根目录

${destDir} 编译根目录

    <build>
        <resources>
            <resource>
                <directory>${project.basedir}/src/main/resources</directory>
                <targetPath>${destDir}</targetPath>
            </resource>
        </resources>
    </build>

2.2.3 发布到私服

这个就不细说了、maven也要填写正确的私服name、passowrd and url

（不使用私服也可以打包成功）

    <distributionManagement>
        <repository>
            <id>thirdparty</id>
            <url>http://10.168.2.244:8081/nexus/content/repositories/thirdparty</url>
        </repository>
    </distributionManagement>

3 放入静态资源文件

个人习惯，先创建一个assets，资源放在assets/*

(assets仅是一个文件夹)

图片临时不好找、随手截桌面

4 打开Terminal

就上面的那张图片、左下角那个Terminal、点一下

输入mvn clean package

等待打包完，这个时候你就已经打包成功了。

5 推到私服或者放到本地仓库

我在家、电脑暂时链接不上私服，直接推到本地仓库

和推私服的命令一样

在Terminal中输入：mvn clean deploy

如果你连接不上私服，那么会失败、不过jar包已经加入到你的本地仓库了

6 使用

随便找一个springboot项目

使用该jar包

        <dependency>
            <groupId>com.player</groupId>
            <artifactId>webjars</artifactId>
            <version>0.0.1-SNAPSHOT</version>
        </dependency>

这些信息就是你上面改的那个pom里面的内容

7. 运行项目

可以注意到我的地址是：

localhost:8080/webjars/webjars/0.0.1-SNAPSHOT/assets/desktop.png

路径格式：

webjars/{artifactId}/{version}/路径

---

有什么问题还请大佬们指出~
我的Blog:hanhantop.com
欢迎加群摸鱼:826953936