jantimon/html-webpack-plugin

Default configuration adds scripts to <head> instead of <body>

jameswatsonv opened this issue · 2 comments

jameswatsonv commented

Current behaviour 💣

After a fresh install using no configuration, the bundled scripts are added to the <head> tag.

I confirmed this by creating a new directory, installing minimum dependencies, and stepping through the "Usage" section of the README.

Expected behaviour ☀️

After a fresh install using no configuration, the bundled scripts should be added to the <body> tag as in the example in the documentation.

Reproduction Example 👾

webpack.config.js

const path = require('path');
 
module.exports = {
  entry: path.resolve(__dirname, 'src/client/js/index.js'),
  mode: 'development',
  plugins: [
    new HtmlWebpackPlugin({
      title: 'App',
    })
  ],
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js',
  },
};

Generated index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>App</title>
  <meta name="viewport" content="width=device-width, initial-scale=1"><script defer src="main.js"></script></head>
  <body>
  </body>
</html>

Environment 🖥

Node.js v14.17.0
darwin 20.5.0
npm version: 7.18.1
± npm ls webpack                                                                                                                     19:32
ares@0.0.1 /Users/james/dev/ares
├─┬ babel-loader@8.2.2
│ └── webpack@5.39.0 deduped
├─┬ html-webpack-plugin@5.3.1
│ └── webpack@5.39.0 deduped
├─┬ webpack-cli@4.7.2
│ ├─┬ @webpack-cli/configtest@1.0.4
│ │ └── webpack@5.39.0 deduped
│ └── webpack@5.39.0 deduped
└─┬ webpack@5.39.0
  └─┬ terser-webpack-plugin@5.1.3
    └── webpack@5.39.0 deduped
± npm ls html-webpack-plugin                                                                                                         19:33
ares@0.0.1 /Users/james/dev/ares
└── html-webpack-plugin@5.3.1`
jameswatsonv commented

The documentation says that the <script>s will be added to the <body> but they are being added to the <head> by default.

This is either a bug or the documentation needs to be updated to reflect this behavior.

A new user installing the plugin and using it for the first time will be confused by this discrepancy.

jantimon commented

Oh - I added the new placement already in 4.x but it was disabled because of Internet Explorer 9

During the time 5.x was released it was save to rely on DEFER: https://caniuse.com/?search=defer

So I enabled the new behavior by default but it looks like I missed it in the docs..

Thanks for the pr 👍