Entry point - webpack.config.js vs vue.config.js

Question

In the webpack.config.js file we can set entry file as below.

    module.exports = (env = {}, argv = {}) => {
        const config = {
            entry: {
                main: './src/js/main.js'                    
            },
        }
    }

But in vue.config.js file, how to declare the entry file? I have checked in doc. but there is property such that.

Sapwood

Answer 1

Vue CLI 3 integrates the webpack-chain library as another way of configuring webpack.

For example, your config file may look like:

chainWebpack: config => {
  // clear the existing entry point
  config
    .entry('main')
      .clear()

  // add your custom entry point
  config
    .entry('main')
      .add('./src/js/main.js')
}

See the section on config entryPoints.

Largent

thank u. Can we change the output file name? I have changed output directory name by using outputDir. Want to change output file name. Is there any way to change? – Sapwood

You would use config.output.path('dist').filename('[name].bundle.js'); to change the output file name. – Largent

Answer 2

For vue-cli 4 it's:

chainWebpack: (config) => {
  // Clear the existing entry point
  config.entry('app').clear()

  // Add the custom entry point
  config.entry('app').add('./src/js/main.js')
}

Ciracirca