javascript - HtmlWebpackPlugin - inject js in body at a specifc place - Stack Overflow

admin2025-04-03 1

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?

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>

Result should be:

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

Share Improve this question edited Mar 11, 2019 at 15:33 asked Mar 11, 2019 at 15:09 koseduhemak 5512 gold badges4 silver badges20 bronze badges

Add a ment |

3 Answers 3

Sorted by: Reset to default 12

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

To fix this problem I did the following:

(1) install the HtmlWebpackPlugin (https://www.npmjs./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: (pilation, 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 %>

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

转载请注明原文地址:http://conceptsofalgorithm.com/Algorithm/1743630816a213908.html

javascriptHtmlWebpackPlugininject js in body at a specifc placeStack Overflow

最新回复(0)