从Webpack中的特定资产文件中删除哈希

Question

我在一个新项目中使用Vuejs，并将一些图像添加到assets文件夹中。我需要在public/index.html中也要引用一个图像，但是当我构建项目时，结果文件名包含一个哈希。

例如，我src/assets/logo.svg，构建后我dist/img/logo.e80b121e.svg，但我想要dist/img/logo.svg

有没有一种方法只能删除特定文件的哈希？我需要其他资产中的哈希。我正在使用vue.config.js配置webpack。

Answer 1

您需要从条目中取出资产文件，并假设已配置了chunckhash（类似：output: {filename: "[name].[chunkhash].js"}）。 您可以使用以下某些Webpack插件直接从源代码复制并将资产添加到index.html：

• CopyWebpackPlugin

• HtmlWebpackExternalsPlugin

示例：

plugins: [
    new HtmlWebpackExternalsPlugin({
      externals: [
        {
          module: "@fortawesome/fontawesome-pro",
          entry: "css/all.css",
        },
      ],
    }),
    new CopyWebpackPlugin([
      {
        from: "./node_modules/@fortawesome/fontawesome-pro/webfonts",
        to: "./vendor/@fortawesome/fontawesome-pro/webfonts/",
      },
    ]),
  ]

Answer 2

如果您使用webpack config生成的vue cli，则如果您将资产移动到static文件夹中，则不会产生哈希。

assets中的项目被散列。