Disable filenameHashing, but add hash as query parameter in index.html

What problem does this feature solve?

Hi, I want to disable filenameHashing, but instead want to add the hash as query param to the injected resources in index.html, like <script src="/js/chunk-vendors.js?_hash=0d01e0b2c53c417bdcfd"></script>. Thus, the resources loaded via index.html will still be fetched if changed even if they got a long cache expiry. Is this possible somehow? Thanks!

What does the proposed API look like?

<script src="/js/chunk-vendors.js?_hash=0d01e0b2c53c417bdcfd"></script>

or

<script src="/js/chunk-vendors.js?_version=0d01e0b2c53c417bdcfd"></script>

maybe via a setting in vue.config.js like addFilenameHashAsQueryParam

[fangbinwei]

You can overwrite the webpack config

Update: Strongly recommend use css config in vue.config.js

/** @type {import('@vue/cli-service').ProjectOptions} */
module.exports = {
+  css: {
+   extract: {
+      filename: 'css/[name].css?_hash=[contenthash:8]',
+      chunkFilename: 'css/[name].css?_hash=[contenthash:8]'
+    }
+  },
  chainWebpack: (config) => {
    if (process.env.NODE_ENV === 'production') {
      config
        .output
        .filename('js/[name].js?_hash=[contenthash:8]')
        .chunkFilename('js/[name].js?_hash=[contenthash:8]')

-      config.plugin('extract-css').tap(args => {
-        args[0].filename = 'css/[name].css?_hash=[contenthash:8]'
-        args[0].chunkFilename = 'css/[name].css?_hash=[contenthash:8]'
-        return args
-      })
    }
  },
}

---

vue.config.js

/** @type {import('@vue/cli-service').ProjectOptions} */
module.exports = {
  chainWebpack: (config) => {
    if (process.env.NODE_ENV === 'production') {
      config
        .output
        .filename('js/[name].js?_hash=[contenthash:8]')
        .chunkFilename('js/[name].js?_hash=[contenthash:8]')

      config.plugin('extract-css').tap(args => {
        args[0].filename = 'css/[name].css?_hash=[contenthash:8]'
        args[0].chunkFilename = 'css/[name].css?_hash=[contenthash:8]'
        return args
      })
    }
  },
}

[mtskf]

@fangbinwei @herrernst With the solution above, app-legacy.js isn’t generated. Here’s my solution:

config.output.filename((process.env.VUE_CLI_MODERN_MODE && process.env.VUE_CLI_MODERN_BUILD) ? 'js/[name].js?_hash=[hash:8]' : 'js/[name]-legacy.js?_hash=[hash:8]')