webpack4、webpack5-打包图片资源

打包css或者less等样式文件中的图片

打包样式文件中的图片资源需要安装url-loader和file-loader

webpack4的设置

            {
                test: /\.(png|jpg|gif)$/,
                // 要使用多个loader用use数组，只使用一个loader可以直接用loader
                loader: 'url-loader',
                options: {
                    // webpack在打包图片时，它不是原封不动的输出。
                    // 当发现图片大小小于8kb（8*1024就是8kb），就会被base64处理
                    // base64处理：就是会将图片转换成base64编码的方式变成一种base64编码的字符串
                    // 浏览器在解析时就会将这个字符串当做图片去解析
                    // base64的优点：能够减少请求数量（可以减轻服务器压力）
                    // base64的缺点：图片体积会变大（导致文件请求变慢）
                    // 综合考虑base64的优缺点，我们只会对小图片进行处理，而不会对大图标进行处理。
                    // 这个大小可以根据项目来设置
                    limit: 8 * 1024,
                    // 解释：[hash:10]