Configure vbuild using package.json

The slogan of vbuild is as said:

Develop web apps with no build configuration until you need.

So it makes sense we don’t want another config file if possible, the existing package.json in your project could be enough in most cases.

Configure output HTML

Let’s say pkg is the value of package.json , vbuild can get the default value of:

• content of <title> from pkg.productName || pkg.name
• content of <meta name="description"> from pkg.description
• webpack’s publicPath from pkg.homepage
• webpack’s entry from pkg.main

Configure Babel/PostCSS

vbuild supports custom babel/postcss options in vbuild.config.js, but it’s always recommended to configure them via package.json or .rc files, since you don’t need to change anything if you no longer use vbuild in the project. To reduce config files, I always configure them package.json directly:

{
  "babel": {
    "presets": ["vue-app", "other-preset"]
  },
  "postcss": {
    "plugins": {
      "postcss-nested": {}
    }
  }
}

Update: postcss in package.json does not work for now due to https://github.com/michael-ciniawsky/postcss-load-plugins/issues/42

Configure vbuild

Guess what, vbuild’s config file could also be a json file .vbuildrc or even vbuild field in package.json :

{
  "vbuild": {
    "autoprefixer": false,
    "webpack": {}
  }
}

Note that you can even use custom webpack config here if it’s simple enough, it will be merged into base config using webpack-merge.

Conclusion

vbuild tries to make everything configurable but also keeps it minimal, if some options can be read from package.json , you should do so!

Cheers and let’s vbuild more cool stuffs. 🎉