Remove hash from specific asset files in webpack

Question

I'm using Vuejs in a new project and I've added some images to the assets folder. I need an image to be referenceable also in public/index.html , but when I build the project the resulting filename includes an hash.

For instance I've src/assets/logo.svg and after build I've dist/img/logo.e80b121e.svg , but I want dist/img/logo.svg

Is there a way to remove the hash only for a specific file? I need the hash in the other assets. I'm configuring webpack with vue.config.js .

Answer 1

If you're using the webpack config vue cli generated four you if you move your asset in the static folder it will not get the hash.

Items from assets are getting hashed.

Answer 2

You need to get out the assets files from the entry, assuming that you has chunckhash configured (something like this: output: {filename: "[name].[chunkhash].js"} ). You could copy directly from source and add the assets to index.html using some of this webpack plugins:

• CopyWebpackPlugin

• HtmlWebpackExternalsPlugin

example:

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/",
      },
    ]),
  ]