CODEWITHSUNDEEP
webpackvuejs2vue-cli
Ragas
Ragas

Reputation: 3205

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

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.

Upvotes: 19

Views: 19173

Answers (2)

Lindoélio Lázaro
Lindoélio Lázaro

Reputation: 969

If you create your project with the new vue-cli 3 (@vue/cli) will have a file called vue.config.js in your project root directory. It means that you can customize your Webpack custom settings just changing the vue.config.js, which is automatically 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 the new vue-cli approach!

Upvotes: 24

Vamsi Krishna
Vamsi Krishna

Reputation: 31362

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

Upvotes: 15

Related Questions