chore!: ensure consistent directory structure for all modes

[haoqunjiang]

BREAKING CHANGE:
Changing directory structure, though now becoming more intuitive, may
still break users' workflows, so it's considered a breaking change.

Fixes #4215.
Fixes #3767.
Fixes #3613.

[ma7moudat]

any idea when this will be in master? I really need it 🙏😗

[haoqunjiang]

It's shipped in 4.0 rc already. Just install @vue/cli-service@next.

[FossPrime]

I'm on 4.5, yet the PWA plugin generates vastly different precache manifests when built by a --watch call. The first build works fine, the issue comes only after making a change that is picked up by watch.

Workaround on Debian, Windows WSL2, RHEL, ChromeOS/Crostini, Android/Termux, Arch/Manjaro etc...:
Uses sudo apt install inotify-tools

npx vue-cli-service build --mode production
inotifywait -rme close_write ./src/ |
while read dir action file; do
  echo "The file '$file' appeared in directory '$dir' via '$action'"
  npx vue-cli-service build --mode production
done

There are so many workarounds needed to get a decent service worker play nice with vue cli... by default you don't get ESM, env variables, HMR or a reasonable dev workflow... I know webpack 5 fixes all that