HtmlWebpackPlugin - inject js in body at a specifc place

Question

I am using HtmlWebpackPlugin to inject javascript into my template file:

<html>
    ...
    <body>
        ...
        <?php echo $this->inlineScript(); ?>
        <script type="text/javascript" src="/dist/vendor.js?a4212b4b10c2d4d2d73e"></script>
    </body>
</html>

However, I need the generated bundle to be injected before the PHP code <?php echo $this->inlineScript(); ?>, to let inline scripts work properly (they require JQuery, which will be loaded inside vendor.js).

Result should be:

<html>
    ...
    <body>
        ...
        <script type="text/javascript" src="/dist/vendor.js?a4212b4b10c2d4d2d73e"></script>
        <?php echo $this->inlineScript(); ?>
    </body>
</html>

Is there a way to achieve this? Maybe it is possible to use a placeholder like <%= htmlWebpackPlugin.options.??? %> or something similar? If it does not work with HtmlWebpackPlugin, is there another webpack plugin I can use?

koseduhemak · Accepted Answer · 2019-03-11T15:37:22.170

11

Ok I figured it out. Put the following code where you want to include your js files:

<% for(var i=0; i < htmlWebpackPlugin.files.js.length; i++) {%>
    <script type="text/javascript" src="<%= htmlWebpackPlugin.files.js[i] %>"></script>
<% } %>

and set inject in HtmlWebpackPlugin options to false.

Keep in mind that you need to inject other stuff (css, meta tags, etc.) by hand, too. F.e. CSS:

<% for(var i=0; i < htmlWebpackPlugin.files.css.length; i++) {%>
    <link type="text/css" rel="stylesheet" href="<%= htmlWebpackPlugin.files.css[i] %>">
<% } %>

edited Mar 11 '19 at 15:37

answered Mar 11 '19 at 15:30

koseduhemak

523
2
4
19

1

You can also use `htmlWebpackPlugin.tags.headTags` and `htmlWebpackPlugin.tags.bodyTags`, see [example](https://github.com/jantimon/html-webpack-plugin/tree/main/examples/custom-insertion-position#custom-insertion-example) – Joe Van Leeuwen Oct 13 '21 at 19:53

score 0 · Answer 2 · answered Mar 29 '23 at 21:46

To fix this problem I did the following:

(1) install the HtmlWebpackPlugin (https://www.npmjs.com/package/html-webpack-plugin)

npm i html-webpack-plugin

(2) update my webpack config

module.exports = {
// ...
plugins: [
    // ...
    new HtmlWebpackPlugin({
        template: 'template.html',
        filename: 'file.html',
        inject: false,
        minify: false,
        templateParameters: (compilation, assets) => {
            const css = assets.css.map((filePath) => `<link rel="stylesheet" href="${filePath}" />`).join("\n");
            const js = assets.js.map((filePath) => `<script src="${filePath}"></script>`).join("\n");
            return { css, js };
        },
    }),
  
    }),
    // ...
],};

(3) add these tags within my template. This will tell webpack where to place the CSS and JS files.

 <!-- Webpack CSS -->
<%= css %>

<!-- Webpack JS -->
<%= js %>

score -1 · Answer 3 · answered Mar 11 '19 at 16:55

-1

Not sure if I am too late, but you can use script-ext-html-webpack-plugin. This can set the script as defer which can defer the execution until the DOM is parsed. Additionally you can inject this script in head of html to start fetching it in parallel but executing at the end :

plugins: [
  new HtmlWebpackPlugin({ template: 'template.ejs', inject: 'head'}),
  new ScriptExtHtmlWebpackPlugin({ defaultAttribute: 'defer' }),
]

answered Mar 11 '19 at 16:55

Easwar

5,132
1
11
21

Thank you. Maybe also possible (didn't test). – koseduhemak Mar 15 '19 at 10:15
Not related at all. – atilkan Mar 30 '20 at 15:26

HtmlWebpackPlugin - inject js in body at a specifc place

3 Answers3