Setting Predefined names for JS chunks on VueJS Build.

What is hash and why is it add it to the files while you build the project.

Whenever we are generating project building a project automatically in the JS folder and which are included in the main index file have a hash attached to it. Hash is nothing but a kind of random string which is attached to the filename.

Probably the reason why the hash is attached to the filename is for the purpose of removing cache every time a new version of web app appears.

When we would have a new version automatically if the file name is different the browser will load the new files and hence if the browser keeps the JavaScript as a hash the problem of clearing the cache won’t be there.

It’s not only the hash but you will also notice that define switch are generated might also contain a random string as for their filename.

This property occurs when you do not keep chunk name for the router files call when you are looking to files through async components

Why do you need fixed names ?

When you need to export the project and embed it into a different project like in my case I need it VueJS application to be embedded in as WordprPress plugin, every time I made a change to my VueJS project the files which were exported on every build had different filenames.

Having different filenames caused me to change all the scripts for chunks and the main file to be changed on my WordPress plugin. And these were like 35 files because I used async components a lot in my project.

Now if the names of these JS files would have been fixed and not changing with every build, I would be saved of this task.

How I got the Problem fixed? Vue2/Vue CLI Solution

After I researched I found that there is a setting called filenameHashing this is true by default and if you will turn if false the hashing stops. The following is how I used it in my vue.config.js file.

After turning off the filenameHashing.

For all the Async components that I was loading I had to add the Chunk Name.

To do so I added the comment on every asyc component which is looks like /* webpackChunkName: “your-chunk-name” */ And then the problem was sloved.

Same problem fixed in Vue3/Vite.

I added build.rollupOptions.output to vite.config.js as shown below.