HTML Webpack 插件 <script> 标记生成两次

Question

如果我运行 yarn run build 那么 HTMLWebpackPlugin 将从模板文件中生成 index.html，但是我所有的代码运行s 两次，因为添加了脚本标签两次。

我的 index.html 模板文件：

<!DOCTYPE html>
<html lang="de">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title><%= htmlWebpackPlugin.options.title %></title>
        <%= htmlWebpackPlugin.tags.headTags %>
    </head>
    <body>
        <div id="app"></div>
        <%= htmlWebpackPlugin.tags.bodyTags %>
    </body>
</html>

我的 index.html 从 HTMLWebpackPlugin 生成：

<!DOCTYPE html>
<html lang="de">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>My Website</title>
        
    </head>
    <body>
        <div id="app"></div>
        <script defer src="ecaecb1a919bc0a6e577.main.js"></script>
        <script defer src="ecaecb1a919bc0a6e577.main.js"></script>
    </body>
</html>

和我的 webpack.config.js:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: '[fullhash].main.js',
        path: path.resolve(__dirname, 'dist'),
    },
    mode: "development",
    devServer: {
        contentBase: './dist',
        port: 9000,
        hot: true
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: "My Website",
            template: path.join(__dirname, "src/webpack_template.html"),
            inject: "body",
            hash: false
        }),
        new CleanWebpackPlugin()
    ],
    devtool: 'inline-source-map',
    module: {
        rules: [
            {
                test: /\.m?js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            }
        ]
    }
};

因此，我的目标是将一个脚本标记放在正文的末尾。

非常感谢您的帮助。

Answer 1

如果您向 HTML 添加标签，则必须禁用自动注入并且在这种情况下注入必须为 false 而不是“body”。

请检查文档 https://github.com/jantimon/html-webpack-plugin#options

true || 'head' || 'body' || false Inject all assets into the given template or templateContent. When passing 'body' all javascript resources will be placed at the bottom of the body element. 'head' will place the scripts in the head element. Passing true will add it to the head/body depending on the scriptLoading option. Passing false will disable automatic injections. - see the

HTML Webpack 插件 <script> 标记生成两次

HTML Webpack Plugin <script> tag generated twice

html

javascript

webpack

html-webpack-plugin