webpack5图片打包处理

最新推荐文章于 2025-05-01 17:24:37 发布

阿豆打豆子

最新推荐文章于 2025-05-01 17:24:37 发布

阅读量504

点赞数

CC 4.0 BY-SA版权

分类专栏： webpack 文章标签： webpack 前端

本文链接：https://blog.youkuaiyun.com/qq_16680827/article/details/122019447

webpack 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何在Webpack中配置url-loader来处理图片资源。通过设置适当的选项，如限制大小以进行Base64内联、输出路径及文件命名规则等，实现图片资源的有效管理和优化。

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

webpack中图片的加载需要使用到file-loader/url-loader，url-loader（可以将图片转为base64）包含了file-loader

module: {
    rules: [{
        test: /\.(png|jpeg|jpg|gif)$/,
        use: [{
            loader: 'url-loader',
            options: {
                // 默认为true，即使用es6模块化；设为false，即使用commonJs模块语法
                esModule: false, 
                outputPath: 'images', // 图片打包后的路径
                limit: 100*1024, // 小于100kb的图片转为base64
                name: '[hash].[ext][query]', // 自定义输出文件名
            }
        }],
        // webpack5使用旧的assets loader（如file-loader/url-loader）
        // 可以加'javascript/auto'来解决图片无法生成images文件夹（目标文件夹）
        type: 'javascript/auto' 
    }]
}