Custom Insertion Position example is misleading

Current behaviour 💣

Your own example of custom insertion position seems to have failed.

All the tags are placed in the head:

html-webpack-plugin/examples/custom-insertion-position/dist/webpack-5/index.html

Lines 3 to 6 in e5036c8

    
           <head> 
        
             <meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><script defer src="bundle.js"></script> 
        
             <title>Custom insertion example</title> 
        
           </head>

And none are in the spot that is called out specifically:

html-webpack-plugin/examples/custom-insertion-position/dist/webpack-5/index.html

Lines 7 to 11 in e5036c8

    
           <body> 
        
             All scripts are placed here: 
        
             <script>console.log("Executed after all other scripts")</script> 
        
           </body>

Expected behaviour ☀️

I'd expect the example dist output to place one or more tags where it says it should.

Now, I think this is because the bundle script is actually part of the head tags, which is fine. But the example seems to be calling out something that doesn't exist.

Reproduction Example 👾

Just look at the repo as it is today.

Environment 🖥

The env you built the repo with. ;-)

You are right this is confusing - with version 5 of the html-webpack-plugin the way javascript is load has been changed by default.

Instead of injecting scripts at the end of the body element the defer attribute is used: <script defer src="bundle.js"></script>

This new technique allows the browser to start downloading and parsing your javascript earlier and in parallel.

You can disable this feature with the following option: scriptLoading: 'blocking'

This issue had no activity for at least half a year. It's subject to automatic issue closing if there is no activity in the next 15 days.

	<head>
	<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><script defer src="bundle.js"></script>
	<title>Custom insertion example</title>
	</head>

	<body>
	All scripts are placed here:

	<script>console.log("Executed after all other scripts")</script>
	</body>