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

Question

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

webpack 有一个选项可以filenameHashing完全禁用，但是如果不能对网站上的所有图像进行缓存控制，那么牺牲太大了。

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

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

（提示：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
      })
  }
  // ...
}

特定图像

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

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 配置格式。