如何让fis3不改变css中的url

html-css022

如何让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文件。