html-inline-script-webpack-plugin
html-inline-script-webpack-plugin copied to clipboard
icelam
insert <script> tag with inlined assets in the bottom of the <body>
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?
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.
