Detailed explanation of filenameHashing usage and source code design usage and source code design of Vue CLI3 configuration

The file names of the static resources in the dist directory after npm run build will be mostly followed by hash value, such as: page1.

Then if you don't have hash, you only need to configure filenameHashing in the file

The official document also mentioned that because html is also generated through plug-ins, static resources are directly injected, so when html is not automatically generated or otherwise, you cannot add hash, and you can configure false.

filenameHashing: false

Let's take a look at the source code implementation:

First of all, it is a configuration in the file cli-service/lib/ middle:

The default value is true

filenameHashing: true

Let’s look at the css part first, in the file cli-service/lib/config/:

const filename = getAssetPath(
   options,
   `css/[name]${ ? '.[contenthash:8]' : ''}.css`
  )

Look at the js part again, in the file cli-service/lib/config/

const filename = getAssetPath(
    options,
    `js/[name]${isLegacyBundle ? `-legacy` : ``}${ ? '.[contenthash:8]' : ''}.js`
   )

They depend on the function getAssetPath, which is defined in the file util/

const path = require('path')

 = function getAssetPath (options, filePath, placeAtRootIfRelative) {
 return 
  ? (, filePath)
  : filePath
}

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.