HtmlWebpackPlugin - inject js in body at a specifc place

12.9k Views Asked by koseduhemak At 11 March 2019 at 15:09

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?

Original Q&A

There are 3 best solutions below

koseduhemak On 11 March 2019 at 15:30 BEST ANSWER

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] %>">
<% } %>

Easwar On 11 March 2019 at 16:55

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' }),
]

Sim On 29 March 2023 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 %>

HtmlWebpackPlugin - inject js in body at a specifc place

There are 3 best solutions below

Related Questions in JAVASCRIPT

Related Questions in WEBPACK

Related Questions in WEBPACK-4

Related Questions in HTML-WEBPACK-PLUGIN

Related Questions in ASSET-MANAGEMENT

Trending Questions

Popular # Hahtags

Popular Questions