webpack-chain | chaining API to generate and simplify the modification | Build Tool library

After creating a Vue 3 project, adding Vuetify 3 Alpha, when I run "npm run serve", this is the error I get. I tried without adding Vuetify 3 Alpha and the Vue 3 project starts fine, it's just after adding the Vuetify that the error appears.

I see that my project triggers quite a lot of TypeScript errors outside of my code (for instance in in \node_modules\webpack-chain\types\index.d.ts).

I have excluded node_modules in /tsconfig.json:

I'm looking to modify the splitChunks.automaticNameDelimiter Webpack setting when using Vue CLI vue.config.js settings, but I don't quite understand the required syntax.

This default delimiter character is a ~ and this is causing problems with the environment I am trying to upload my application to. I want to use - delimiters instead.

The Vue CLI docs for Modifying Options of a Plugin suggest that I should be doing something like this:

When I build my Vue project with npm run build, I would like to choose particular Vue files to be (re)compiled into the dist folder. My idea was by changing the configurations in webpack or the webpack-chain to compile from a specific entry point. An example of my goal would be:

Let's assume I have 2 components; A.vue and B.vue (and ofcourse the default files like index.html etc.) Then I build the project, which gives me a ./dist folder with everything compiled. Then after I make changes to B.vue (and change the config file most likely), I only want B.vue to be recompiled into the ./dist folder. I already use dynamic imports so that A.vue and B.vue are different bundles, so that other files should not have to be changed.

Can I select a specific file to be compiled only? (I am aware that the dist folder gets emptied after building, but that I will try to fix later if this could be possible)

While I clearly am no webpack expert, I usually figure/find out what I need to modify in order to achieve what I need. However, I lost more than a day on this one, even though it seems fairly simple:

I want to add an index.html to the build, after building, by copy-ing it from a folder.

I tried adding this to configureWebpack, in vue.config.js:

I am doing a vue.js app.

After build it generate a js file "background.2a548437.js" instead of the "background.js" that I want.

I'm doing the webpack-chain configuration through the "vue.config.js" file.

To diagnose, I'm reading the result of "$vue inspect", but I don't see which parameter should I tune to remove the hash from the js files.

I do see patterns like 'img/[name].[hash:8].[ext]' but for js it's 'js/[name].js'

Do you have any solutions or leads ?

Context/Why:

It uses webpack "^4.0.0" and webpack-chain "^6.3.1" to configure it through the "vue.config.js".

I am doing a chrome plugin which has a static manifest.json file referencing "background.js".

I will dig into making webpack building a manifest.json file with the correct "background.[hash].js" file but I thought it would be easier if I could find the options to disable hash in the name of the files

// vue.config.js