admin管理员组

文章数量:1405557

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>

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>
  • javascript
  • html
  • webpack
Share Improve this question edited Aug 8, 2021 at 10:15 Danial 1,6432 gold badges16 silver badges25 bronze badges asked Aug 8, 2021 at 9:57 devxgbdevxgb 2234 silver badges12 bronze badges 0
Add a ment  | 

1 Answer 1

Reset to default 7

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'
        })
    ]
}

本文标签：

版权声明：本文标题：javascript - Why is webpack-html-plugin adding script tag in head instead of body when using template? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744280861a2598644.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。