持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第16天，点击查看活动详情
url-loader
前面学习了file-loader处理图片资源，接下来学习url-loader
url-loader是file-loader的加强版本。 url-loader内部使⽤了file-loader,所以可以处理file-loader所有的事情，但是遇到jpg格式的模块，会把该图⽚转换成base64格式字符串，并打包到js⾥。对⼩体积的图⽚⽐较合适，⼤图⽚不合适。
安装：npm install url-loader -D
示例：
/**
* url-loader依赖于file-loader
* 图片体积大，转换为base64的时候，字符多，间接影响到了css的体积。
* 所以对图片转成base4的话，一定要设置一个预值，当图片的体积大于这个值的话就不转化，小于这个值的话就转。
* 转成base64的好处：把图片资源转换成base64的话，可以减少一次请求，从而达到优化的目的
*/
{
test: /\.(png|jpe?g|gif|webp)$/, // 解决图片格式问题
use: {
// loader: 'file-loader',
loader: 'url-loader',
options: {
// name: 'images/[name].[ext]', // 方法二：不使用outputPath，在name中的名字前加上目录路径
name: '[name].[ext]', // 解决图片名的问题
outputPath: "images", // 解决问题目录管理：方法一：通过outputPath设置图片资源的存放位置
// 图片资源如何引入的位置：解决对资源文件做了目录管理造成的路径引用出错问题
publicPath: '../images', // ../images/img.jpg
limit: 11 * 1024, // 1kb === 1024 limit: 预值
}
}
},
图片压缩 image-webpack-loader
需求：批量处理图片压缩
存在的问题：打包的时候可能会报错，如果是loader方面的问题，可以切换为cnpm源
安装：npm install image-webpack-loader -D
image-webpack-loader必须在url-loader或者file-loader之前使用
// image-webpack-loader必须在url-loader或者file-loader之前使用
// loader执行顺序：当多个loader作用于同一个模块的时候，顺序为自下往上，自后往前
{
test: /\.(png|jpe?g|gif|webp)$/, // 解决图片格式问题
use: [
{
// loader: 'file-loader',
loader: 'url-loader',
options: {
// name: 'images/[name].[ext]', // 方法二：不使用outputPath，在name中的名字前加上目录路径
name: '[name].[ext]', // 解决图片名的问题
outputPath: "images", // 解决问题目录管理：方法一：通过outputPath设置图片资源的存放位置
// 图片资源如何引入的位置：解决对资源文件做了目录管理造成的路径引用出错问题
publicPath: '../images', // ../images/img.jpg
limit: 11 * 1024, // 1kb === 1024 limit: 预值
}
},
"image-webpack-loader"
]
},
