webpack serve启动服务时代码重复执行、请求重复发送问题排查

核心原因是页面脚本被重复加载执行，结合你给出的配置场景，触发原因按概率从高到低排列：

• HtmlWebpackPlugin自动注入与模板手动引入脚本冲突：HtmlWebpackPlugin默认inject配置为true，会自动将打包生成的bundle.js以script标签形式插入到最终输出的HTML文件中。如果你使用的./public/index.html模板文件内手动写了引入打包后JS文件的script标签，最终浏览器加载的页面中就会存在两个同源脚本引用，直接导致所有业务代码执行两次，接口请求重复发送。
• 配置逻辑冲突：webpack-dev-server默认配置同时开启了热更新（HMR）和全量页面自动刷新（liveReload），部分版本下会出现边缘逻辑冲突导致脚本重复执行；另外babel-loader未配置排除node_modules目录时，也可能触发转译异常导致重复执行。

按优先级依次排查修复：

1. 打开./public/index.html模板文件，删除所有手动引入打包产物（比如bundle.js）的script标签，脚本注入工作完全交给HtmlWebpackPlugin处理即可，不需要手动编写引用。
2. 在webpack配置中补充显式的devServer配置，关闭冲突的刷新逻辑，同时限定静态资源目录范围：

// webpack.config.js 中补充配置
module.exports = {
  // 其他原有配置保持不变
  devServer: {
    hot: true,
    liveReload: false, // 关闭全量页面刷新，避免和HMR逻辑冲突
    static: {
      directory: path.resolve(__dirname, 'public'), // 仅将public目录设为静态资源目录，不要包含dist目录
    }
  }
}

3. 给babel-loader补充排除规则，避免无意义转译引发的异常：

// 修改module.rules中js/jsx匹配的规则
{
  test: /\.jsx?$/,
  loader: 'babel-loader',
  exclude: /node_modules/, // 跳过node_modules下文件的转译
}

所有配置修改完成后，重启本地开发服务，即可看到控制台日志仅输出一次，接口请求也不会重复发送。

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