有没有办法只为 webpack 中的特定资源（图像）禁用文件名哈希？答案

【问题标题】：Is there a way to disable filenameHashing only for specific resources (images) in webpack?有没有办法只为 webpack 中的特定资源（图像）禁用文件名哈希？
【发布时间】：2019-04-30 12:24:29
【问题描述】：

在使用vue-cli 使用Vue.js 2.6.2 构建我的网站后，我遇到了静态资源（本例中为图像）的问题。 Webpack 将它们捆绑在 /img/ 文件夹中，这很好，但是图像被赋予像 image_demo.25d62d92.png 这样的哈希值，这在尝试从外部源访问这些资源时会导致问题，例如来自另一个网站。

webpack 有一个选项可以完全禁用 filenameHashing，但是对于网站上所有或其他图像的缓存控制来说，牺牲太大了。

所需的解决方案是选择仅让一些手动挑选的资源使用其默认名称而没有额外的哈希，而其他资源则使用默认的hash 进行缓存控制。

【问题讨论】：

标签： vue.js webpack assets staticresource

【解决方案1】：

是的，有办法。您将需要覆盖 vue-cli 附带的“图像”规则。

vue inspect --rule images 产生以下结果：

$ vue inspect --rule images
/* config.module.rule('images') */
{
  test: /\.(png|jpe?g|gif|webp)(\?.*)?$/,
  use: [
    {
      loader: 'url-loader',
      options: {
        limit: 4096,
        fallback: {
          loader: 'file-loader',
          options: {
            name: 'img/[name].[hash:8].[ext]'
          }
        }
      }
    }
  ]
}

（Protip：vue inspect 是一个有用的工具，可用于找出使用 vue-cli 构建时事物的行为为何如此）

所有图片

vue-cli 建议将webpack-chain 用于“高级”配置。我个人不是粉丝，但如果您想删除所有图像的哈希值，您可能应该修改“图像”规则。像这样编辑vue.config.js：

module.exports = {
  // ...
  chainWebpack: (config) => {
    config.module
      .rule("images")
      .use("url-loader")
      .loader("url-loader")
      .tap((options) => {
        options.fallback.options.name = "img/[name].[ext]"
        return options
      })
  }
  // ...
}

具体图片

就我而言，我只想删除具有唯一前缀的特定图像组的哈希值，因此我在vue.config.js 中的configureWebpack 中添加了以下内容：

module.exports = {
  // ...
  configureWebpack: {
    module: {
      rules: [
        {
          test: /unique-prefix-\d*\.png/, // <= modify this to suit your needs
          use: [
            {
              loader: "url-loader",
              options: {
                limit: 4096,
                fallback: {
                  loader: "file-loader",
                  options: {
                    name: "img/[name].[ext]", // <= note how the hash is removed
                  },
                },
              },
            },
          ],
        },
      ],
    },
  // ...
}

也可以使用 webpack-chain 完成，但我更喜欢更普通的 Webpack 配置格式。

【讨论】：