Usage of DefinePlugin should follow Webpack's recommendation

[LinusBorg]

What problem does this feature solve?

In the webpack docs for its DefinePlugin, this warning can be found:

When defining values for process prefer 'process.env.NODE_ENV': JSON.stringify('production') over process: { env: { NODE_ENV: JSON.stringify('production') } }. Using the latter will overwrite the process object which can break compatibility with some modules that expect other values on the process object to be defined.

However, we currently do pass the env variables that we want to inject into our app code as such a nested object, see:

https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli-service/lib/util/resolveClientEnv.js#L19-L21

What does the proposed API look like?

Implementation should follow the recommendation from webpack docs and construct the object that we pass to the DefinePlugin accordingly, or we should switch to using the EnvironmentPlugin.

The tricky part about the second option is that it only accepts an array of env variable names to pick from process.env, but we have to inject BASE_URL from options.publicPath as this value isn't avaliable on process.env. We can use an object notation to provide "defaults", which should do the job just fine.

I prefer the second option as it would slim simplify the implementation quite a bit. We should keep the DefinePlugin in the code either way as som people may have chainWebpack configs that tap into its options.

I'll send a PR if we want to do this.