Asset handling via Config or Plugin

[JulianGaibler]

Feature request

This might be somewhat related to #79, but I think it should be possible to dynamically add webpack require's through the Plugin-API.

What problem does this feature solve?

Right now it's not possible to add any resources related to webpack dynamically. For all I know, you can only realize this, by putting resources in .vuepress/public or make a bunch of require's in enhanceApp.js. The first approach would strip one of the ability to use webpack all together. The second one does not have the contextual information of the plugin API and also cannot be computationally expensive since it will also run on the client.

What does the proposed API look like?

Imagine the vuepress blog, where every article directory had a thumbnail.png besides the README.md:

my-cool-blog/
└── _articles
    ├── article01
    │   ├── README.md
    │   └── thumbnail.png
    ├── article02
    │   ├── README.md
    │   └── thumbnail.png
    └── article03
        ├── README.md
        └── thumbnail.png

Since we know all articles have a thumbnail, we could inject a require that then will get resolved by webpack later:

module.exports = {
  extendPageData(page) {
    // Check if it is a post
    if (!page.regularPath.startsWith('/_post')) return;
    // Add require to be resolved by webpack later
    // Probably would have to look a lot different than this
    page.thumbnail = 'require(page.regularPath+"thumbnail.png")'
  }
}

and the result of $vm.$site.pages would look something like that

- title: Home
  frontmatter:
    home: true
  regularPath: "/"
  path: "/"
- title: Article 1
  thumbnail: "/assets/img/thumbnail.ee9cb3cc.png"
  frontmatter:
    date: 2019
  regularPath: "/_articles/article01"
  path: "/posts/Article-1/"

It's always important to think about what's going to end in the initial payload and what will be in the chunks loaded by the router. For example, the thumbnail-path could now be accessed from anywhere in the app via $vm.$site.pages[x].thumbnail,. So it's part of the initial payload and maybe you want that, or maybe you don't.

If we wanted to generate an archive page for example, and we would add those archive-pages through addPage or additionalPages in our Plugin, then we could generate the whole Page in our Plugin but not add the thumbnails, because there is no way to put a require that would be resolved by webpack and also be put in the chunk of that Page.

How should this be implemented in your opinion?

There has to be a way to dynamically add code, that will be picked up by webpack, and it's loaders.
I guess the implementation should be close to how clientDynamicModules currently works in terms of the API, while keeping in mind that it should be clear if the content will end up in the initial bundle or in one of the chunks.

Are you willing to work on this yourself?**

I've been working through the source code all day to see if I could hack my way to achieve this, but haven't found a solution so far. So right now I don't know how to implement this.