Location of webpack config file in vue-cli webpack project?

Question

I used cli to create a vue.js project. I used the webpack template for it. I have been working on it for a few days and it working smoothly.

Now I need to add a npm package to the project. This package recommends I make some changes to webpack config. But there is not webpack.config.js file at the root of my project. Where is the webpack config file. Do i need to run a command to publish it like in some frameworks.

Solution 1

The webpack-simple template has the webpack-config.js file directly in root of your project folder.

Looks like you are using webpack template. To make changes to the webpack config goto the build folder.

There you will find 3 files related to the webpack config;

1. webpack.base.conf.js
2. webpack.dev.conf.js
3. webpack.prod.conf.js

You can make the change your package requires in the webpack.base.conf.js file or in webpack.dev.conf.js if the change is for development time config or in webpack.prod.conf.js if its for production build config

Solution 2

If you create your project with the new vue-cli 3 (@vue/cli) will be a file called vue.config.js in your project root directory. It means that you can customize your webpack configs just changing the vue.config.js, that it was automaticaly included in your project root directory, as follows:

module.exports = {
  configureWebpack: {
    // It will be merged into the final Webpack config
    plugins: [
      ... // Your plugins here...
    ]
  }
}

So easy! Long life to new vue-cli approach!

Comments

[Anoop Thiruonam]

Wouldn't this be rewritten every time we run npm build?

[Vamsi Krishna]

@Anoop.P.A nope they will not be rewritten...they are static config files

[Anoop Thiruonam]

@Vasmi, thanks! but I don't have the file in the project. It seems vue-cli-3 is keeping it somewhere else

[Vamsi Krishna]

vue cli 3 uses a dynamic approach of creating the webpack config file at runtime. So if you want to tweak the webpack config in a project created by vue cli 3 , you shall use the vue.config.js file

[Matt Parkins]

If you don't see vue.config.js in your root it's because it's an optional file. If you don't have it you can just go ahead and create it.

[PatS]

vue cli 4 (@vue/[email protected]) does not seem to have a webpack file as far as I can tell.