前言

大家好，我是宇文所拓。近期去忙别的事情去了，所以这期更新的比较晚，在这里给给大家说声抱歉!当然，还是继续观看文章内容吧。

上一篇，主要讲了图片的基本处理，还没有学会的同学看这里# 图片资源在Webpack中的基础应用

现在呢，来讲讲处理图片的进阶配置。

设置图片的名称和输出路径

当我们没有进行设置，只是使用 file-loader ,如下：

此时进行打包，当资源过多时，dist 件中就会很乱，应为都是放在一起的，没有分开存放。

想把图片放在 img 文件下统一管理，此时就需要对 loader 进行 options 设置。

{
    test:/\.(png|svg|gif|jpe?g)$/,
    use:[
        {
            loader:'file-loader',
            options:{
                // esModule:false
                outputPath:'img' //输出的文件夹
            }
        }
    ]
}

这样打包后，图片就会被放在 img 文件目录下面了。

这时候图片是便于管理了，但是发现图片名称太长，并且是图片和字母组成，不太美观，这里可以设置 name 来修改名称，下：

{
    test:/\.(png|svg|gif|jpe?g)$/,
    use:[
        {
            loader:'file-loader',
            options:{
                // esModule:false
                // [name]:名称
                // [hash]:hash值，可设置长度
                // [ext]:扩展名
                name:'[name].[ext]', //基础用法
                //name:'[name].[hash:4].[ext]', //添加hash
                outputPath:'img' //输出的文件夹
            }
        }
    ]
}

我这里给出了两种图片名称的设置方式，第一种为基础方法，可能会出现重复的名称，第二种添加上 hash值 ，来防止重复，两种打包结果如下：

url-loader

额外说说 url-loader ，用法也是一样的都是用来处理图片。

{
    test:/\.(png|svg|gif|jpe?g)$/,
    use:[
        {
            loader:'url-loader'
        }
    ]
}

使用 url-loader 处理图片，在页面上会以 base64 的形式添加路径，同时在 dist 打包文件夹中，只存在一个最终的输出 js ，没有图片资源，图片资源以代码的形式添加到页面。

这种方式减少了请求次数，但当图片体积太大时，都在一个 js 中，一次性请求的数据量变大了，不利于性能，这时候就可以把它拆开，设置大小参数，大于参数的用路径，小于参数的用 base64 。

{
    test:/\.(png|svg|gif|jpe?g)$/,
    use:[
        {   
            loader:'url-loader',
            options:{
                // esModule:false
                // [name]:名称
                // [hash]:hash值，可设置长度
                // [ext]:扩展名
                // name:'[name].[ext]', //基础用法
                name:'[name].[hash:4].[ext]', //添加hash
                outputPath:'img', //输出的文件夹
                limit: 20 * 1024 //图片资源大小
            }
        }
    ]
}

总结

url-loader 使用 base64 ，请求次数减少
file-loader 将资源拷贝到指定目录，分开请求
url-loader 内部其实也可以调用 file-loader
limit 限制图片大小，大于参数的用路径，小于参数的用 base64

asset处理

asset/resource -->file-loader
asset/inline --->url-loader
asset/source --->raw-loader

asset 在 webpack5 中为内置的，所以不需要去下载，直接使用即可。

 {
    test:/\.(png|svg|gif|jpe?g)$/,
    type:'asset',
    generator: {
        filename: "img/[name].[hash:4][ext]",
    },
    //parser:解析
    parser: {
        //设置大小
        dataUrlCondition: {
            maxSize: 30 * 1024
        }
    }
}

type 参数可做修改为上面的三种方式，相应的来设置参数。我这里给出第二种方式，你可以使用你的方式。

结尾

以上就是 webpack 处理图片资源的全部方式，希望能我的讲解能带给你帮助，也请指出存在的问题和不足之处，相互学习。。。

Webpack处理图片的进阶配置

前言

设置图片的名称和输出路径

url-loader

总结

asset处理

结尾