main.js file import is hardcoded

[angrynerds-beniamin]

I'd like to add hash to the main.js file to prevent it from being cached by browsers. It is very important because I can't force all users of my app to hard refresh the page every time when they want to enter.

How I can accomplish that? The main.js file is imported in the module.html file which is generated by HubSpotAutoUploadPlugin on every build and I have no options to configure it.

[TheWebTech]

Hey @angrynerds-beniamin, can you tell us a little more about the core issue you're trying to solve that preventing caching would help you accomplish?

Ideally if we can we'd like to solve for the root problem you're facing so that you don't need to hurt your page performance to achieve what you need.

[angrynerds-beniamin]

Sure. This is a typical situation for web apps. Let's assume that I just released the first version of my app to production. Now we have main.js file on the server. When users open my app their browsers download main.js file and this file is being cached on the client-side. So when they open my app in the future main.js file will be loaded from the cache, not from the application server.

I'd like to add a new feature to my app. So I write code and deploy it to production. The problem is that newly built bundle has the same name "main.js"! So when users will enter my app they won't see a new feature, because the main.js file will be loaded from their local cache. I have no option to invalidate their local cache other than changing the name of the main.js file. This is a serious problem for production builds.

In current webpack configuration for vue app we have this entry:

 output: {
      path: path.resolve(__dirname, 'dist'),
      filename: 'main.js',
    },

I'd like to use the built-in webpack feature that produces hash based on the file content. So when I change something in the code the hash will be changed and users will see my feature in their browsers. The new config could look like this:

 output: {
      path: path.resolve(__dirname, 'dist'),
      filename: 'main.[contenthash].js',
    },

Unfortunately, I can't use that feature because when HubSpotAutoUploadPlugin builds my app it creates a module.html file where the file "main.js" is imported so the file with hash in the name won't be loaded. I didn't find any way to customize content of generated module.html file so I've decided to write an issue.

@TheWebTech Do you know any way to customize content of module.html file? I know that I can edit this file in HubSpot portal in Design Tools but I have to do it every time when I release a new version of my app because this file will be overridden on every build. I'm looking for an automated way to do it.