HTML Webpack Plugin生成两次script标签导致代码重复执行如何解决

根本原因 #

你的配置触发了HtmlWebpackPlugin的两次脚本注入逻辑，导致重复插入script标签：

• HTML模板中手动编写了<%= htmlWebpackPlugin.tags.bodyTags %>代码，会主动注入一次打包后的JS脚本
• webpack.config.js中HtmlWebpackPlugin的inject参数设置为"body"，会让插件自动往body末尾再注入一次脚本

可选解决方案（二选一即可） #

方案1：保留模板手动注入逻辑，关闭自动注入 #

修改webpack.config.js中HtmlWebpackPlugin的配置，将inject参数改为false：

new HtmlWebpackPlugin({
    title: "My Website",
    template: path.join(__dirname, "src/webpack_template.html"),
    inject: false, // 替换原来的"body"配置
    hash: false
}),

该方案适合需要自定义标签注入位置、或需要对注入标签做额外处理的场景。

方案2：删除模板手动注入代码，保留自动注入 #

直接删除HTML模板中的两行手动注入代码即可：

<!-- 删掉这行 -->
<%= htmlWebpackPlugin.tags.headTags %>
<!-- 删掉这行 -->
<%= htmlWebpackPlugin.tags.bodyTags %>

保留webpack.config.js里的inject: "body"配置即可，插件会自动把脚本注入到body末尾，无需手动在模板中声明注入逻辑。该方案更简洁，适合无自定义注入需求的常规场景。

修改完成后重新执行yarn run build，生成的HTML就只会出现一个script标签。

内容的提问来源于stack exchange，提问作者user12424205