webpack之file-loader和url-loader的区别

前言

webpack加载css背景图片、img元素指向的网络图片、使用es6的import引入的图片时，需要使用url-loader或者file-loader。
url-loader和file-loader可以加载任何文件。

区别
url-loader可以将图片转为base64字符串，能更快的加载图片，一旦图片过大，
就需要使用file-loader的加载本地图片，故url-loader可以设置图片超过多少字节时，使用file-loader加载图片。

配置
webpack.config.js
const path = require('path')

module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /.(png|svg|jpg|jpeg|gif)$/,
loader: 'url-loader',
options: {
limit: 10000
}
}
]
}
}

打包
打包后可以看出img元素的src此时是base54字符串。

 

如果将limit改为4000字节，此时支付宝图标大于上限值。

若配置了limit，然后移除file-loader，则打包出错，即当配置limit上限值，此时url-loader依赖file-loader

总结
1、url-loader依赖file-loader
2、当使用url-loader加载图片，图片大小小于上限值，则将图片转base64字符串，；否则使用file-loader加载图片，都是为了提高浏览器加载图片速度。
3、使用url-loader加载图片比file-loader更优秀
————————————————