Add auto-wiring of Views

[DaniJG]

Similar to the auto-wiring of components, different folder.

Using changes added from GH-9, explore the possibility to include all components inside a view folder as "async" components in the same chunk.

A possible convention to achieve this would be:

• The root component for every View ends with either .vue or .async.vue, ignoring any files ending with .local.vue
• The components exclusive to each of these views end with .local.vue and can be placed either inside the /components or /views folder (since both views and components convention will ignore them).
• The convention will then scan for:
  • Files ending with .vue, but not .async.vue and .local.vue inside the /views folder as part of the sync context. (a require.context generated with the default sync mode)
  • Files ending with .async.vue inside the /views folder as part of the async context (a require.context generated with the lazy mode)
• Vue routers declare their component as component: Vue.component('my-component-name') where the name is the one Autowire uses to register it based on the file name

This will give us a somewhat decent compromise between autowiring and automatic code-split per route.

• Note we cannot set the chunk names, since for that we would need to use webpack magic-comments in the import statements!
  • It would be ideal if we can find a way to setup chunk names, as you can do for dynamic import statements as in Using webpackChunkName with dynamic import changes chunk logic webpack/webpack#4807, but the same comment on require.context does not work.
  • I have filed issue Allow webpackChunkName to be specified when using require.context webpack/webpack#9184 in webpack
• For whoever needs more manual control or wants to set chunk names, they can just autowire the router files and do manual code splitting there

For example, given a folder structure like:

/views
    home.vue
    about.async.vue
    /user-profile
        user-profile.async.vue
        security-preferences.local.vue
        profile-picture.local.vue

The convention would find 2 async views (user-profile and about) and a sync view (home). Both async views will get its own webpack chunk, that includes local components referenced by them.

For a more automated wiring of all the views and their exclusive components that maintains code splitting capabilities, we will need to explore GH-13