Using webpack-chain to overrule key name (app) used for default webpack entry by vue-cli 3

Sometimes you have an irritating problem that you have to solve even though it doesn’t really add value. Yesterday I had one of these problems. I wanted to overrule the key name (app) used for the default webpack entry by vue-cli 3 using webpack-chain. This key determines the name of the file that is generated by the build command. It seemed like such a simple change, which it is once you understand how, but it took me sometime to figure out.

I’m writing a Vue plugin and wanted the build version to be called ‘plugin’ instead of ‘app’. I thought it would be a quick change. Took me a little more time than expected, because of the way webpack-chain works and me not reading the documentation properly.

Anyway here are the steps if you want to do the same.

1. Rename the ‘src’ directory to ‘plugin’ (optional, but I like it)
2. Add the `vue.config.js` file and add the following code
module.exports = {
   chainWebpack: config => {
     // Remove the old 'app' entry
     // Add the new 'plugin' entry
       .set('@', path.resolve(__dirname, 'plugin'))

It first removes the old webpack entry (app), adds a new entry (plugin) and finally changes the alias from ‘src’ to ‘plugin’.

3. Update the `moduleNameMapper` in the `jest.config.js`
moduleNameMapper: {
'^@/(.*)$': '/plugin/$1'

That should do the trick. Do you want to test it?

Generate the resolved webpack file using the following command.

$ vue inspect > webpack.config.resolved

The final entry in the resolved webpack file should be the entry point.

  entry: {
    plugin: [

For convenience I add the following entry to the `scripts` in the `package.json` file.

  "scripts": {
    "inspect": "vue inspect > webpack.config.resolved"

Now you can run npm run inspect to check the resolved webpack configuration file. Handy!

To ensure everything works as expect test and build the project using the following commands.

$ npm run test:unit


$ npm run build

In the build directory dist there should be a file js/plugin..js.

Hope this helps someone. Happy coding!


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s