为什么webpack打包生成的代码会出现两次执行的问题？

脚本重复引入导致执行两次：
你使用的HtmlWebpackPlugin默认开启了自动注入打包产物的能力，会主动将编译后的bundle.js插入到输出HTML的body标签末尾；而你在src/index.html模板中已经手动编写了<script src="/bundle.js"></script>引入脚本，最终输出的HTML页面会存在两个指向bundle.js的script标签，因此入口代码会执行两次。

二选一即可：

• 删除src/index.html模板中手动编写的<script src="/bundle.js"></script>代码，依靠HtmlWebpackPlugin自动注入打包产物
• 若需要手动控制脚本引入位置，在webpack.config.js的HtmlWebpackPlugin配置项中关闭自动注入能力：

plugins: [
  new HtmlWebpackPlugin({
    template: path.resolve(__dirname, "src", "index.html"),
    inject: false // 关闭自动注入
  })
],

修改后重启webpack-dev-server即可验证日志只输出一次。

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