como injetar pacote css na cabeça e pacote js no corpo usando o plugin webpack html

Eu sou absolutamente novo no Webpack e trabalho com scss e vue em um pequeno projeto. O que tento é compilar todos os meus arquivos .scss para css e agrupá-los em um bundle.css que é injetado automaticamente na cabeça (eu já configurei os carregadores sass e css para arquivar o pacote em css). Mas também quero meu pacote vue app.js no final do corpo, também injetado pelo htmlWebpackPlugin (já pronto). Usar um único HtmlWebpackPlugin para colocar tudo no meu index.html me deixaria com o estilo no corpo ou o javascript na cabeça.

Meu primeiro palpite seria que eu tenho que definir 2 Instâncias de Plugin 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'
})

Mas como eu digo ao webpack, para usar o primeiro plugin para css e o outro para js? Desde que eu não tenhotest como nos carregadores, não sei como fazer isso

Portanto, o objetivo desta pergunta é: alguém pode me explicar como posso conseguir que meu pacote css seja injetado na cabeça e meu pacote js seja injetado no corpo? (trechos de código de como fazer isso no webpack-config são apreciados)

questionAnswers(1)

yourAnswerToTheQuestion