how to inject css bundle in head and js bundle in body using webpack html plugin

Question

I am absolutely new to Webpack and I work with scss and vue on a little project. What I try is to compile all my .scss files to css and bundle them up in a bundle.css that is automatically injected into the head (I already set up the sass and css loaders to archieve the bundling to css). But I also want my vue app.js bundle at the end of the body, also injected by the htmlWebpackPlugin (already done). Using a single HtmlWebpackPlugin to put everything in my index.html would leave me with either the style in the body or the javascript in the head.

My first guess would be, that I have to define 2 Plugin-Instances like

var jsInjectorPlugin = new HtmlWebpackPlugin({
  filename: 'index.html',
  template: 'index.html',
  inject: 'body'
});
var cssInjectorPlugin = new HtmlWebpackPlugin({
  filename: 'index.html',
  template: 'index.html',
  inject: 'head'
})

But how do I tell webpack, to use the first plugin for css and the other one for js? Since I have no test like in loaders, I do not know how to do this

So the point of this question is, can someone explain me how I can achieve that my css-bundle gets injected into the head and my js-bundle gets injected in the body? (code snippets of how to do this in the webpack-config are appreciated)