insert <script> tag with inlined assets in the bottom of the <body> #446

dandgerson · 2023-08-05T00:46:05Z

Hey, thanks for the plugin.

In my case i need inserted script tag with inlined assets in the bottom of the tag.

Environment and package version

"html-inline-script-webpack-plugin": "^3.2.0",
"html-webpack-plugin": "^5.5.3",

Reproduction link / code sample

N/A

Steps to reproduce

plugins: [
        new HtmlWebpackPlugin({
          template: path.resolve(__dirname, "public", "index.html"),
        }),
        new HtmlInlineScriptPlugin(),
      ],

What is expected?

I need to inlined assets being in the bottom of the body tag like in solution below

Now i use this hardcoded solution, and has HMR issue with infinite reloaded if i trigger HMR with applying changes in source code.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React + Webpack</title>
  </head>
  <body>
    <div id="root"></div>

    <script defer="defer">
      <% /*
      The following line is a workaround for scripts that insert .js code into the generated .html file.
      Because this is set here, "inject: false" is set in webpack-config.js in plugins.HtmlWebpackPlugin
      */ %>
      <%= compilation.assets[webpackConfig.output.filename].source() %>
    </script>
  </body>
</html>

plugins: [
        new HtmlWebpackPlugin({
          template: path.resolve(__dirname, "public", "index.html"),
          // this is a workaround for the injection of the code from the output file into the .html
          // the injection will be handled in the template file
          inject: false,
        }),
      ],

What is actually happening?

RESULT

icelam · 2023-08-05T19:32:10Z

Hello @dandgerson,

Thanks for reaching out. I'm sorry to hear that you're experiencing an infinite reload issue when using the HtmlInlineScriptPlugin with the local dev server.

I couldn't give much insight into this issue without seeing the complete webpack configuration, but I would recommend avoiding using this plugin along with the local dev server, as it was not designed for this use case.

The HtmlInlineScriptPlugin is designed to generate build assets where script content are embed into HTML files for deployment to environments where you can only upload a single file, or where the script file itself is small that it doesn't worth sending an extra HTTP call. When used with the local dev server, webpack will insert extra runtime scripts to support hot replace into the entry script. When the entry script is being processed to insert inline inside HTML file, HMR runtime also got replaced, which I believe is the reason of causing the infinite reload issue.

If there is a strong reason for embedding script content into HTML under local dev environment, I suggest you can try tinkering with webpack chunk optimization together with filtering options of HtmlInlineScriptPlugin to make sure HMR code isn't inlined. If that doesn't help, I can try tinkering with webpack and see if there's anything I can do in this regard.

Let me know if you have any questions.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

insert <script> tag with inlined assets in the bottom of the <body> #446

insert <script> tag with inlined assets in the bottom of the <body> #446

dandgerson commented Aug 5, 2023 •

edited

icelam commented Aug 5, 2023

insert <script> tag with inlined assets in the bottom of the <body> #446

insert <script> tag with inlined assets in the bottom of the <body> #446

Comments

dandgerson commented Aug 5, 2023 • edited

Environment and package version

Reproduction link / code sample

Steps to reproduce

What is expected?

What is actually happening?

icelam commented Aug 5, 2023

dandgerson commented Aug 5, 2023 •

edited