为什么 webpack-html-plugin 使用模板时在 head 中添加 script 标签而不是 body 中？

Question

我在用html-webpack-plugin。

\n

根据文档，应该在正文中添加脚本标签。

\n

但就我而言，它被添加到标题中。

\n

我的文件夹结构：

\n

\xe2\x94\x82   package-lock.json\n\xe2\x94\x82   package.json\n\xe2\x94\x82   webpack.config.js\n\xe2\x94\x82   \n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80dist\n\xe2\x94\x82       index.html\n\xe2\x94\x82       main.js\n\xe2\x94\x82       \n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80node_modules\n\xe2\x94\x82   \xe2\x94\x82   .package-lock.json\n\xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80 And many more files\n\xe2\x94\x82           \n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80src\n    \xe2\x94\x82   index.html\n    \xe2\x94\x82   \n    \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80scripts\n            index.js\n            \n\n

\n

我的webpack.config.js：

\n

const HtmlWebpackPlugin = require(\'html-webpack-plugin\')\n\nmodule.exports = {\n    mode: \'development\',\n    entry: \'./src/scripts/index.js\',\n    plugins: [\n        new HtmlWebpackPlugin({\n            template: \'./src/index.html\'\n        })\n    ]\n}\n

\n

输出dist/index.html：

\n

<!DOCTYPE html>\n<html lang="en">\n<head>\n    <meta charset="UTF-8">\n    <meta http-equiv="X-UA-Compatible" content="IE=edge">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Webpack Demo</title>\n<script defer src="main.js"></script></head>\n<body>\n    <h1>Webpack Demo</h1>\n</body>\n</html>\n

\n

Answer 1

该行为与文档中的第一个使用示例相同，因此默认情况下，脚本标签实际上添加在头部。脚本仍然只有在解析 HTML 后才会加载，因为 script 标签具有该defer属性，所以应该不会有任何问题。但如果您仍然希望在正文末尾添加脚本标记，则可以使用该inject选项。请参阅文档了解更多详细信息。

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    mode: 'development',
    entry: './src/scripts/index.js',
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
            inject: 'body'
        })
    ]
}