webpack 打包去掉hash以后图片文件后面增加7位数字？

  • Z时代
  • 2024-02-06
  • 分类：IT

webpack 打包去掉hash以后图片文件后面增加7位数字？

在webpack中打包去掉hash编码以后图片还是会生成一个.7位数字，个人猜想是保证静态资源唯一的值，但没有找到确定的文档证明，有没有大神指点一下呢？

回答：

“打包去掉 hash 编码以后图片还是会生成一个.7位数字”，
楼主说的去掉 hash 编码是不是只是去掉了，output.filename 的 hash 配置？

如果想要去掉图片的 hash，需要这样配置。举例较新的 webpack4和5

webpack4：
可参考文档 url-loader，file-loader，
一般来说图片资源会使用 url-loader 来进行配置(url-loader 封装了 file-loader，用来转换一些小图片资源为base64，减少 http 请求)。
options.name 的默认值为 [contenthash].[ext]

module: {
  rules: [
    {
      test: /\.(png|jpe?g|gif)$/i,
      loader: 'url-loader',
      options: {
        // 这样子配置就没有 hash 了
        name: 'imgs/[name].[ext]',
        limit: 10 * 1024,
      }
    }
  ]
}

webpack5：
webpack5 目前已经将几个 loader 糅合成一个内置的 module，参考 资源模块
一般来说图片资源会使用类型 asset 来进行配置（asset有个判断条件 dataUrlCondition，和 webpack4 的 url-loader limit 概念是一致的）
generator.filename 的默认值为[hash][ext][query]

module: {
  rules: [
    {
      test: /\.(pngjp?eg|gif)$/i,
      type: 'asset',
      generator: {
        filename: 'imgs/[name][ext]'
      },
      parser: {
        dataUrlCondition: {
          maxSize: 10 * 1024 
        }
      }
    }
  ]
}

以上是 webpack 打包去掉hash以后图片文件后面增加7位数字？ 的全部内容， 来源链接： utcz.com/p/936608.html

回到顶部