webpack 配置 react-router BrowserRouter

如果使用 react-router-dom 来配置路由跳转，默认情况下只能使用 HashRouter，使用 BrowserRouter 时匹配 / 以外的路由会找不到服务而报 404 错误

这是因为 react 服务是一个单页面应用，使用 BrowserRouter 模式会向浏览器请求指定的路由资源，如访问 xxx 路由相当于请求服务端的 ~/xxx 资源，但是服务端并没有配置该路由，因此会返回 404，

webpack 中的解决思路是：如果匹配不到对应路由，都返回 index.html，然后通过 js 代码（react-router）来控制显示哪个页面组件，这样就相当于无论请求什么路由都是返回单页面应用模板 index.html

使用 HashRouter 类似 html 中的锚点跳转，因此也是相当于始终定位在 index.html 文件上，但是这样浏览器路径会始终带上 # 符号，很难看，因此使用 BrowserRouter 模式，同时需要配置对应的 webpack

// scripts/config/webpack.dev.js
{
    output: {
    	// PROJECT_PATH 是自己定义的一个根目录路径变量，这里不影响
        path: path.resolve(PROJECT_PATH, './dist'),		
        publicPath: '/dist',
    },
    devServer: {
        historyApiFallback: {
			index: path.join(PROJECT_PATH, './public/index.html')
	},
}

需要同时配置 output.publicPath 和 devServer.historyApiFallback.index 属性才可以生效

output.publicPath：可参考

historyApiFallback.index：当路由与真实文件不匹配时，webpack-dev-server 使用指定文件渲染而非 404 错误