cómo inyectar el paquete css en la cabeza y el paquete js en el cuerpo usando el plugin webpack html

Soy absolutamente nuevo en Webpack y trabajo con scss y vue en un pequeño proyecto. Lo que intento es compilar todos mis archivos .scss en css y agruparlos en un bundle.css que se inyecta automáticamente en la cabeza (ya configuré los cargadores sass y css para archivar el paquete en css). Pero también quiero mi paquete vue app.js al final del cuerpo, también inyectado por htmlWebpackPlugin (ya hecho). Usar un solo HtmlWebpackPlugin para poner todo en mi index.html me dejaría con el estilo en el cuerpo o el javascript en la cabeza.

Mi primera suposición sería que tengo que definir 2 instancias de complementos como

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

Pero, ¿cómo le digo a webpack que use el primer complemento para css y el otro para js? Como no tengotest como en los cargadores, no sé cómo hacer esto

Entonces, el punto de esta pregunta es: ¿alguien puede explicarme cómo puedo lograr que mi paquete css se inyecte en la cabeza y mi paquete js se inyecte en el cuerpo? (Se aprecian fragmentos de código de cómo hacer esto en la configuración del paquete web)

Respuestas a la pregunta(1)

Su respuesta a la pregunta