Webpack dev server多层路由404 无法加载index.html与bundle.js

多层路由下资源404的核心原因是静态资源引用默认使用相对路径：当访问/foo/bar这类二级以上路由时，浏览器会默认在/foo/路径下查找bundle.js，而非站点根目录，导致资源找不到。现有配置仅对单页路由的文档回退做了基础设置，没有固定静态资源的加载根路径。

只需要修改两处webpack配置即可：

• 在output配置块中新增publicPath: "/"，强制所有打包生成的静态资源都以站点根目录为基准路径引用，不会随路由层级变化查找位置。
  修改后的output配置如下：

  output: {
      path: path.resolve(__dirname, "dist"),
      filename: "bundle.js",
      publicPath: "/" // 新增配置
  },
  

• 调整devServer的historyApiFallback配置，确保所有非静态资源请求都正确回退到根目录的index.html，推荐直接使用简化配置：

  devServer: {
      static: {
          directory: path.join(__dirname, "dist"),
      },
      historyApiFallback: true // 替换原有historyApiFallback配置
  },
  

  如果需要保留自定义index路径的写法，要注意给路径加上根前缀，同时补充重写规则避免静态资源被错误重定向：

  devServer: {
      static: {
          directory: path.join(__dirname, "dist"),
      },
      historyApiFallback: {
          index: "/index.html",
          rewrites: [
              { from: /^[^.]*$/, to: "/index.html" }
          ]
      },
  },
  

配置修改完成后重启webpack-dev-server，再访问任意层级的前端路由时，都会从根目录正确加载bundle.js资源，不会再出现404报错。由于项目使用HtmlWebpackPlugin自动注入资源引用，不需要手动修改index.html模板内容。

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