webpack4、webpack5-打包图片资源

最新推荐文章于 2023-09-21 21:02:36 发布

原创

最新推荐文章于 2023-09-21 21:02:36 发布 · 1.2k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #webpack

本文介绍了如何在webpack4和5中打包css或less样式文件以及html中的图片资源。通过使用url-loader和file-loader，样式文件中的图片会被处理，而html中的img资源则需要html-loader。在webpack配置中进行相应设置后，较小的图片会被转换为base64，其余图片则输出到指定目录，并在浏览器中正常加载。

打包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]表示取hash值的前10位；[ext]表示取文件原来的扩展名
                    name: '[hash:10].[ext]',
                    // 输出到img的话，直接设置o

最低0.47元/天解锁文章