Document configuring whitespace

[Etheryte]

What problem does this feature solve?

In 2018, the whitespace compiler option was introduced with valid values of preserve and condense. This handy option gives developers control over whether to keep extra whitespaces in templates or condense them down to reduce bundle size.

With Vue CLI v4, the default value was switched, from preserve to condense. This is useful for most setups, but can be detrimental at times — in my case, when working with Markdown.

This comment on a fairly old issue covers changing the flag through the chainWebpack config field:

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('vue')
        .use('vue-loader')
          .tap(args => {
            args.compilerOptions.whitespace = 'preserve'
          })
  }
}

While easy to follow when you're familiar with how Webpack is used in Vue CLI, this is far from trivial and also fairly tricky to find.

Personally I only managed to find the flag after inspecting the config with vue inspect and finding the flag name there.

What does the proposed API look like?

The configuration should be covered in the official documentation. Currently, Googling for it brings up old tickets and a migration guide, neither which immediately reveal how to change this option.