webpack处理图片文件

最新推荐文章于 2024-09-22 09:40:41 发布

龙易安

最新推荐文章于 2024-09-22 09:40:41 发布

阅读量296

点赞数

CC 4.0 BY-SA版权

分类专栏： webpack

本文链接：https://blog.youkuaiyun.com/longtengg1/article/details/118711261

webpack 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了如何在webpack的开发环境和生产环境中处理图片资源。在webpack.dev.js中，直接使用file-loader处理图片。而在webpack.prod.js中，为了优化线上性能，当图片大小小于5kb时，通过url-loader将其转换为base64编码内联到CSS或HTML中，以减少HTTP请求。对于大于5kb的图片，依然采用file-loader，保持URL引用。同时，配置了输出路径和可选的CDN公共路径。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

webpack处理图片文件，在webpack.dev.js和webpack.prod.js中分开写的

1、在webpack.dev.js中

直接引入图片 url

 rules: [  
            {
                test: /\.(png|jpg|jpeg|gif)$/,
                use: 'file-loader'
            }
        ]

2、在webpack.prod.js中

直接引入图片 url对于线上是不友好的，
在生产环境时，使用url-loader

如果图片小于 5kb 的图片用 base64 格式产出，打包到 img 目录下
减少http请求
否则，依然延用 file-loader 的形式，产出 url 格式

 rules: [
            // 图片 - 考虑 base64 编码的情况
            {
                test: /\.(png|jpg|jpeg|gif)$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        limit: 5 * 1024,
                        outputPath: '/img1/',

                        // 设置图片的 cdn 地址（也可以统一在外面的 output 中设置，那将作用于所有静态资源）
                        // publicPath: 'http://cdn.abc.com'
                    }
                }
            },
        ]