然后项目改动，我们又打包了一次。打包后生产新的哈希值，a1.aaaaa.css变成了a1.bbbbb.css文件。那么当我们第一次访问a1.bbbbb.css文件的时候是不会被缓存。因为1W年的缓存是给a1.aaaaa.css文件做的。关我a1.bbbbb.css文件什么事？这样我们也就能拿到最新的改动。
其他可以被webpack生成哈希值的文件同理。解决方案： 前端 要在打包的时候配置好脚手架配置文件 ，打包出来的文件名要 跟上一次打包出来的文件名 不一样才行 。
比如，有一个css文件a1
总结一下就是：用户借助该规则，可以为引入的字体包命一个名字，并指定在哪里可以找到它（指定字体包的存储路径）后，就可以像使用通用字体那样去使用它了。
例如现在的需求是：需要在项目中使用 KlavikaMedium-Italic 字体。
则只需以下三个步骤即可。
这里放到根目录下的 tool/fonts 文件夹里。
新建一个index.vue文件，引入样式：
效果如下：
既然在本地开发环境实现了效果，于是就使用 webpack 打包准备上线，却发现 webpack 在打包过程中报错：
我们在定义自定义字体时使用URL指定了字体包的路径，由于 webpack 默认是无法处理 css 中的 url 地址的，因此这里会报错。
这时就需要借助 loader 来大显身手了，解决这个问题需要使用 file-loader ，它主要干了两件事儿：
在 webpack.config.js 中，配置file-loader：
再次执行打包命令，不再报错。
于是将打包出来的 dist 目录重新部署到服务器上后访问页面，却发现由于找不到字体导致没有生效：
从图中可以看出，http请求字体包的路径为： 根目录下(打包出来的静态文件index.html所在目录)的 css/620db1b997cd78cd373003282ee4453f.otf 。
看了一下打包命令生成的 dist 目录结构：
却发现，字体包和 index.html 是在同一级。因此字体无法生效的原因就很明朗了：
可以通过修改字体包打包后的实际存储路径去解决这个问题，在 webpack.config.js 中，借助 options 参数可以继续给 file-loader 设置更多的配置项：
再次打包，生成的 dist 目录结构如下：
可以看到字体包正如配置时预期的那样存储在 **css/fonts **目录下面。
重新部署项目，再次查看：
这一次 http 请求的字体包路径与实际的存放路径一致，因此自定义字体生效。
可以通过下面这个梳理流程图看的更清楚一些：
为什么本地开发的时候可以看到字体，部署到服务器后却看不到了呢？
