如何让fis3不改变css中的url

html-css011

如何让fis3不改变css中的url,第1张

如果fis3匹配(match)到了文件, 并且文件中的路径是有效路径, 那么它都会把这个路径转换成绝对路径。

这是fis3的一大特色——资源定位

如果你只是想简单的合并压缩资源。

FIS3是百度开发的一款前端构建工具。

默认的配置文件是fis-conf.js,一些更具体的介绍可以参考 FIS3官方文档 ,这里介绍一下,使用FIS3和VueJS如何搭建单页面应用。

FIS3已经内置了js,css文件的压缩方式,只需简单的配置压缩器即可

在构建过程中,会将资源的相对地址替换成绝对地址,img,css文件等,在默认不配置的情况下只是对资源相对路径修改成了绝对路径,这是FIS3的资源定位能力,这样在使用的情况时就不必考虑构建之后的文件路径问题。

FIS3也提供文件指纹功能,相对于其他的在URL后面加上query或者时间戳,FIS3使用MD5戳,直接修改文件的URL

对小图标文件进行雪碧图合并,减少请求数量,这里使用了插件 fis-spriter-csssprites

在背景图的css中加入__sprite

构建后的背景图片资源会进行自动定位

这里配置的是将所有文件打包成一个引入页面中,使用插件 fis3-postpackager-loader

使用 fis3-hook-node_modules 对node_modules模块支持

使用 fis3-parser-vue-component 插件构建vue文件

完整demo

以fis接入iconfont插件为例,讲述iconfont接入方案,iconfont大致的流程:

同步svg,将项目用到的svg,通过iconfont平台同步到项目目录

编译svg,生成字体文件

接入字体相关的css问题

html引入css文件

单文件编译处理iconfont

大体的逻辑是:

遍历项目目录下的所有svg,生成字体文件

生成css

所有业务html引入css

配置:

fis.match('/*.html', {

preprocessor: fis.plugin('iconfont', {

svgPath: '../svgs',

output: 'modules/common/fonts'

})

})

对根目录下的所有html应用组件,编译一次svg,生成字体文件,然后对业务html引入css文件。