I am using html-webpack-plugin.
As per the documentation, script tag should be added in body.
But in my case, it's being added in header.
My folder structure :
│ package-lock.json
│ package.json
│ webpack.config.js
│
├───dist
│ index.html
│ main.js
│
├───node_modules
│ │ .package-lock.json
│ └─── And many more files
│
└───src
│ index.html
│
└───scripts
index.js
My webpack.config.js :
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
mode: 'development',
entry: './src/scripts/index.js',
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
]
}
Output dist/index.html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Webpack Demo</title>
<script defer src="main.js"></script></head>
<body>
<h1>Webpack Demo</h1>
</body>
</html>
The behavior is the same as in the very first usage example in the documentation, so the script tag is actually added in the head by default. The script still loads only after the HTML has been parsed, since the script tag has the defer attribute, so there should not be any problem with it. But if you still want the script tag to be added at the end of the body, you can use the inject option. Please refer to the documentation for more details.
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
mode: 'development',
entry: './src/scripts/index.js',
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
inject: 'body'
})
]
}