CODEWITHSUNDEEP
webpackvue-cli-3
nidkil
nidkil

Reputation: 1415

Using webpack-chain with vue-cli 3 to change the name of the generated file

I want to change the name of the generated file from app.<hash>.js to plugin.<hash>.js. The name of the webpack entry point key is used to determine the name. The vue-cli 3 uses app by default as webpack entry point key. So I need to change it. Using vue inspect > webpack.config.resolved.js I'm able to see the whole webpack file that gets resolved by vue-cli.

The last part of the resolved webpack file is.

  }
  ...
  entry: {
    app: [
      './src/main.js'
    ]
  }

I can overrule the value by adding with the following to vue.config.js.

module.exports = {
  chainWebpack: config => {
    // Remove the old entry and add the new one
    config
      .entry('app')
      .clear()
      .add('./plugin/index.js')
  },
  ...
}

This is the result in the resolved webpack file.

{
  ...
  entry: {
    app: [
      './plugin/index.js'
    ]
  }
}

I also want to rename the app key to plugin. I thought I would be able to delete the key using config.entry.delete('app'), but this throws an error.

This is were I am stuck. Anyone have suggestions to delete or rename the entry key?

Upvotes: 2

Views: 3554

Answers (1)

nidkil
nidkil

Reputation: 1415

Okay I figured it out. You have to use the low-level config.entryPoints instead of config.entry.

module.exports = {
  chainWebpack: config => {
    // Remove the old 'app' entry
    config
      .entryPoints
      .delete('app')
    // Add the new 'plugin' entry
    config
      .entry('plugin')
      .add('./plugin/index.js')
    config
      .resolve
      .alias
      .set('@', path.resolve(__dirname, 'plugin'))
  },
  ...
}

If you want to make this change you have to take the following steps:

  1. Rename the src directory to plugin (optional, but I like it)
  2. Add the vue.config.js file with the code above including adjusting the alias from src to plugin

  3. Update the moduleNameMapper in the jest.config.js

    ...
moduleNameMapper: {
  '^@/(.*)$': '<rootDir>/plugin/$1'
},
...

That will do the trick. Now the generated file is called plugin.<hash>.js.

Upvotes: 1

Related Questions