什么是file-loader
了解什么是file-loader前要知道为什么要使用file-loader?
按照以往的方式我们想要在css文件中使用某个文件
background:url('./x/xx')
或者在js中引入某个地址
xx.src='./xx/xxx'
很多时候都是这样的相对地址,一但经过webpack打包,他们的地址就是失效了
另一方面,来自于文件名,我们给的文件名大多没有规律,如果了解过缓存相关的内容就知道,如果想在本地缓存期使用更新的资源,就得替换。
替换的原理就来源于文件名的不同,因为file-loader可以根据文件内容编码出一个hash值来充当文件名
也就是说只要hash变化了,也以意味着文件内容变化了。
总结来说使用file-loader好处在于两点
1.用于缓存资源的更新
2.打包后的文件部署问题
使用file-loader
从两个角度来看这个配置选项
1.图片配置的名字
2.图片配置的文件夹
先看图片配置的名字
使用name
选项进行配置,默认值是'[contenthash].[ext]'
也就是哈希值加拓展名
ext
代表拓展名
path
是相对于上下文的,这个上下文等在讲
这里将配置选项是outputPath和publicpath这两个区别
首先如果设置了
{
test: /\.png$/,
use: [{
loader: 'file-loader',
options: {
name:'photo[hash:6].[ext]',
outputPath:'./asset'
}
}
这里output设置的是你输出本地你所指定的位置
publicPath输出的是另一个全新位置,也就是常说的项目上线的位置
因为我们写的代码很多都是本地进行测试,但是项目要上线的话,请求的来自于一个服务器的某个位置,如果将图片资源的位置一旦全部放置在新的文件夹中后
代码中引入就失效了,所以为了不需要再去修改打包后的文件,可以使用publicPath
可以看一下这是我没有使用publicPath时的情况
现在加上这个选项
publicPath:'www.baidu.com/newpath/asset'
页面当然不会呈现这个内容,因为百度压根没有部署这个内容,但是如果这是我们自己的或者公司的设备,就可以这样设置了
现在看一下上面遗留的问题,就是context的内容
contest和[path]两者是交织在一起的
path的含义相对context的路径,context是什么是一个上下文。
同时context是可以设置的,但前提是要明白context是如何设定的。
context
首先我们的内容都是基于webpack.config.js设定的,那么图片资源的位置定义就是相对于这个文件的。
假设我们在js中写一个资源路径,是相对于当前文件的路径来设置的
现在不是相对当前文件,而是相对webpack.config.js输出的文件夹
上实例
options: {
name:'[path]photo[hash:6].[ext]',
publicPath:'www.baidu.com/newpath/asset'
}
图片资源被存放在static
最终返回的图片资源也有一个static,因为内部的引入规则设置为了
url-loader
url-loader也没啥特色,首先是他包含了file-loader
然后可以通过限定一个图片的大小,来判断是否需要采用以编码的方式呈现
options: {
// 40KB 以下的文件采用 url-loader
name:'[path]photo[hash:6].[ext]',
limit:1024*40,
}
可以看到不同大小的图片引入的方式不同,低于40kb的采用了编码解码的形式引入
这样做可以减少图片资源的网络请求,减少用户的等待时间
但是加码和解码也需要一定的时间,如果一个页面设置过多效果也是不好
最后还有其他几种方式可以对图片资源的优化
比如设置雪碧图和压缩图片的loader
通过 imagemin-webpack-plugin 压缩图片;
通过 webpack-spritesmith 插件制作雪碧图。