webpack configuration: remove hash from *.js entry/bundle files names

Question

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

const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
    chainWebpack: config => {
        // add your custom entry point
        config
            .entry('background')
            .add('./src/background.ts');
    },
    configureWebpack: {
        plugins: [
            new CopyWebpackPlugin([
                { from: 'manifest.json', to: 'manifest.json', flatten: true },
            ]),
        ]
    }
}

---

edit: the result of $vue inspect. its too long so I link a pastebin https://pastebin.com/fbRzgfhY

Answer 1

After spending so long trying to understand how webpack-chain, webpack and its plugins works I found the easy "filenameHashing" falg in the vue documentation : https://cli.vuejs.org/config/#indexpath

Here is my vue.config.js file content:

// vue.config.js
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
    filenameHashing: false, // <=================line that matters
    chainWebpack: config => {
        // add your custom entry point
        config
            .entry('background')
            .add('./src/background.ts');
    },
    configureWebpack: {
        plugins: [
            new CopyWebpackPlugin([
                { from: 'manifest.json', to: 'manifest.json', flatten: true },
            ]),
        ]
    }
}