Html-webpack-plugin: about inject option

Created on 1 Jun 2017 · 3Comments · Source: jantimon/html-webpack-plugin

The current inject option is to put script in head or to body, but I want some to go to head, and the other to body, that's not supported. I think we can pass in a function to inject, and if this function return true, put it in body, and if the function returns false, put it in head.

new HtmlWebpackPlugin({
  inject: (script) => {
    return script.indexOf('somescriptname') !== -1;
  }
})

Source

lonelyclick

Most helpful comment

The inject feature is only for very simple pages - for more advanced templates you should turn it off and use the template variables to add the script tags.

E.g.:
https://github.com/jaketrent/html-webpack-template/blob/86f285d5c790a6c15263f5cc50fd666d51f974fd/index.html

jantimon on 1 Jun 2017

👍3

All 3 comments

The inject feature is only for very simple pages - for more advanced templates you should turn it off and use the template variables to add the script tags.

E.g.:
https://github.com/jaketrent/html-webpack-template/blob/86f285d5c790a6c15263f5cc50fd666d51f974fd/index.html

jantimon on 1 Jun 2017

👍3

@jantimon Thanks! That's kind of what I was looking for. I somehow overlooked the "full control over the asset placement" sentence in the README. Spent hours and ended up here, luckily.
Is there a way to get an asset contents in the template, not just the file names, to inline some of them, or can it only be done with another plugin?

Upd: Found out, thanks to https://github.com/jantimon/html-webpack-plugin/blob/master/examples/inline/template.jade, that HtmlWebpackPlugin also provides compilation object to the template (it is not mentioned in the docs), that gives access to the contents of assets. So one can inline assets right in the template without additional plugin. Yay!