react history模式下的白屏问题

近期，再用react的时候,因为不想用丑陋的hash,便将路由模式切换成history了，结果带来了一些问题，好比刷新白屏，还有图片加载不出来，这里咱们说一下解决方案。

缘由

首先，咱们说一下形成这一系列现象的缘由。
咱们在http://localhost:xxxx/这个路径下去刷新页面是没有问题的，一切都显得那么正常，可是当咱们换到一个子模块，刷新就会白屏，为何呢？

咱们看到，它会从当前路径下去找bundle.js，为何？由于HtmlWebpackPlugin插件在帮咱们引入bundle.js时，引入的是相对路径

因此，在刷新时，它是相对于如今的url取寻找的。

解决方案

缘由一旦清楚，解决方案便呼之欲出了。咱们只要想办法让bundle.js的加载路径在刷新的时候，也从根目录开始寻找，而不是跟随当前url便可。

1.output配置加入publicPath

output: {
    filename: 'assets/js/bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: "/"
}

publicPath是什么意思呢？官网中有这么一句话

webpack-dev-server 也会默认从 publicPath 为基准，使用它来决定在哪一个目录下启用服务，来访问 webpack 输出的文件。

简单理解，你的静态资源，都会今后路径下开始加载

publicPath: "/"     //加载路径‘/assets/js/bundle.js’

这样，每次刷新都会从根目录开始加载，就不会丢失咱们的bundle.js了。图片加载不出来也是这个问题。

2.webpack-dev-server的historyApiFallback

history模式下，devServer须要配置historyApiFallback为true

devServer: {
historyApiFallback: true
}

注意以上两点，history模式就能正常使用了。若是还有其余缘由，欢迎你们补充。
ps:项目部署上服务器后，页面白屏，须要后台进行相关设置，这里不作讨论。