3

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)

nasskalte.juni
  • 433
  • 3
  • 14
  • 1
    Are you using [`extract-text-webpack-plugin`](https://github.com/webpack-contrib/extract-text-webpack-plugin) for your CSS? If you do, it should work exactly as you want it (`` tag in the head and ` – Michael Jungo Sep 14 '17 at 13:35
  • I had another error, you are right about the behaviour of the html-webpack-plugin. I use the extract-text-webpack-plugin, it now works as expected. (sorry bothering the community, it seemed to me that it was the html-webpack-plugin causing the problem) – nasskalte.juni Sep 14 '17 at 16:04

0 Answers0