有没有办法只对 webpack 中的特定资源（图像）禁用 filenameHashing？

Question

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

webpack 有一个选项可以完全禁用 filenameHashing，但如果没有对网站上所有或她的图像的缓存控制，这是一个太大的牺牲。

理想的解决方案是选择只使用一些没有额外哈希的默认名称的手工挑选资源，而其他资源使用默认 hash 进行缓存控制。

Answer 1

是的，有办法。您需要覆盖 vue-cli 附带的 'images' 规则。

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]'
          }
        }
      }
    }
  ]
}

（提示：vue inspect 是一个有用的工具，可用于弄清楚为什么使用 vue-cli 构建时事物的行为会像它们那样）

所有图片

vue-cli 建议 webpack-chain 用于 'advanced' 配置。我个人不是粉丝，但如果您想删除所有图像的哈希值，您可能应该修改 'images' 规则。像这样编辑 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 配置格式。

有没有办法只对 webpack 中的特定资源（图像）禁用 filenameHashing？

Is there a way to disable filenameHashing only for specific resources (images) in webpack?

assets

staticresource

webpack

vue.js

所有图片

具体图片