webpack-dev-server 多入口 history 路由跳转404问题

场景

项目中用react-router 的 BrowserRouter做路由配置，webpack有多个入口。入口A挂在a.html上。

问题

通过http://localhost:8000/a.html访问A项目， 在页面上点击路由跳转至http://localhost:8000/a.html/dashborad可正常访问。如果刷新当前页，页面提示 Cannot GET /a.html/dashborad。

解决方案

在webpack devServer 的配置项中增加

historyApiFallback: { rewrites: [ { from: /^\/a.html/, to: '/a.html' } ], },

问题分析

BrowserRouter使用的browserHistory 是h5 history api，用户从浏览器地址栏看到的url与普通的path没有区别，但路由实际上是由js来处理的。

webpack-dev-sever会通过配置的output路径去读取文件，通过’/’分割进行文件查找匹配。由于我们配置的路由并不是实际存在的文件，所以根据文件查找的方式是找不到的只会404。

通过配置webpack-dev-sever提供的historyApiFallback来定义404时的行为，配置项可参考官方

When using the HTML5 History API, the index.html page will likely have to be served in place of any 404 responses. Enable devServer.historyApiFallback