webpack-urlloader的配置与注意点

1.什么是urlloader

url-loader 功能类似于 file-loader，
但是在文件大小（单位 byte）低于指定的限制时，可以返回一个 DataURL(同file-loader)

2.urlloader使用

https://www.webpackjs.com/loaders/url-loader/

2.1安装urlloader

npm install --save-dev url-loader

2.2配置urlloader

{
    test: /\.(png|jpg|gif)$/,
    use: [
        {
            loader: 'url-loader',
            options: {
                name: "[name].[ext]",
                outputPath: "/images",
                limit: 1024
            }
        }
    ]
}

优势:
图片比较小的时候直接转换成base64字符串图片, 减少请求次数
图片比较大的时候由于生成的base64字符串图片也比较大, 就保持原有的图片

3.配置注意点

limit:指定图片限制的大小
1.如果被打包的图片超过了限制的大小，则在打包的时候就是用file-loader将图片保存为一个文件（需安装了file-loader）

2.如果被打包的图片没有超过限制的大小，就会将图片转换为base64的字符串

3.对于比较小的图片，我们将图片转换为base64的字符串之后，可以提升网页的性能(因为减少了请求的次数)

4.对于比较大的图片，就算我们将图片转换为base64之后，也不会提升网页的性能，还有可能降低网页的性能（因为图片比较大，那么转换之后的字符串也会比较多，那么网页的体积就会变大，那么访问的速度就会变慢）