webpack打包图片名字太长了怎么办？

baily许

于 2021-12-30 17:57:00 发布

阅读量980

点赞数

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

本文链接：https://blog.youkuaiyun.com/weixin_58246209/article/details/122242342

版权

webpack打包专栏收录该内容

1 篇文章

订阅专栏

在Webpack 5.65.0中，当图片名称过长时，通过url-loader和file-loader配合，使用图片哈希值缩写重命名。分享详细配置及解决步骤。

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

在webpack打包中，图片打包后，图片名字太长了怎么办？

安装了url-loader和file-loader插件还是没有作用》》》代码和我一样的请点赞三联

module.exports={
   modile:{
    rules:[
        {
            test: /\.(jpn|png|gif)$/,
            loader: "url-loader",
            options: {
              limit: 8 * 1024,
              esModule: false,
              name: "[hash:10].[ext]",
        }
    ]
   }
}

我自己看了很多分享的文档后，均试了试都不好用，自己查看了官方文档后，发现

webpack: 5.65.0 的版本如果给图片进行重命名，使用图片hash值的前10位（几位都可以看自己的需求）的话需要单独使用 file-loader插件进行设置代码如下

{
  test: /\.(png|jpg|gif)$/,
  use: [
    {
      loader: "file-loader",
      options: {
        // 给图片进行重命名
        // [hash：10]取图片的前10位
        // [ext]取文件原来扩展名
        name: "[hash:10].[ext]",
      },
    },
  ],
},

然后你再执行webpac打包命令就会发现设置成功了