webpack基础 -- 处理html中引入的图片

最新推荐文章于 2025-05-28 06:12:52 发布

rainbow8590

最新推荐文章于 2025-05-28 06:12:52 发布

阅读量3.6k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： webpack

本文链接：https://blog.youkuaiyun.com/rainbow8590/article/details/81300395

webpack 专栏收录该内容

24 篇文章

订阅专栏

本文详细介绍了如何使用Webpack配置处理项目中的图片资源，包括使用url-loader和img-loader进行图片压缩和转换，以及html-loader用于解析HTML文件中的图片引用。通过合理设置，可以实现图片的按需加载和优化，提升网站性能。

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

使用: html-loader
options: {
attrs:[img:src]
}
<\img src=”src/assets/img/demo.png” data-src=”src/assets/img/demo1.png” />’
webpack 配置

rules:[
    {
        test:/\.(png|jpg|jpeg|gif)$/,
        use:[
            {
                loader:'url-loader',
                options:{
                    name:'[name]-[hash:5].[ext]',
                    limit: 1000,
                    outputPath:'assets/imgs/' // html和css中图片的输出路径
                }
            },
            {
                loader:'img-loader',
                options:{
                    quality: 80
                    }
                }
            },
            {
                loader:'html-loader',
                options:{
                    attrs:['img:src','img:data-src']
                }
            }
        ]
    }
]