For Webpack 5:
Neither
InlineChunkHtmlPlugin from react-dev-utils (due to some obscure error where something was undefined)
nor
html-webpack-inline-source-plugin (due to Webpack 5 incompatibility)
worked for me, so i found a different solution that only uses html-webpack-plugin (which is compatible with Webpack 5) and the modification of the template you supply for HtmlWebpackPlugin.
template.html:
<!doctype html>
<html>
<head>
<title><%= htmlWebpackPlugin.options.title %></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>
webpack-config.js:
// ...
// your other webpack-config code
//...
output: {
filename: 'bundle.js',
path: "./myOutPath",
},
plugins: [
new HtmlWebpackPlugin({
title: "My Web App",
template: "template.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,
})
],
In this case, only the content of the one output file set in your Webpack config (here: bundle.js) gets injected into the HTML file. But i guess you get the general point.
