historyApiFallback: { // Paths with dots should still use the history fallback. // See https://github.com/facebookincubator/create-react-app/issues/387. disableDotRule: true, // 指明哪些路径映射到哪个html rewrites: [ { from: /^\/mobile.html/, to: '/dist/mobile.html' }, ] },
增加的rewrites节点，特别对/admin.html这个URL重定向为/dist/mobile.html页面（也就是HtmlWebpackPlugin输出的HTML文件路径），这样/mobile.html就可以正常访问了。
至此，dev环境的多入口问题就解决了。
step5: Prod 环境配置
prod环境，比dev环境更简单。由于不存在webpack Dev Server，直接在config/webpack.config.prod.js同理做2和3步骤即可。
这时候你就可以通过手动修改URl 来访问了：
路由相关
到这， 已经可以手动修改URL 来访问pc 和 mobile的页面了。 还有一个问题没有解决：
URL最后肯定是不能给你手动改来改去的， 需要根据设备的情况自己判断， 这里有两个思路：
1: 配置 Nginx 的路径的时候, 加多一个alias 的映射。
2: 前端根据UA自行配置。
为了快速出效果， 简单搞了一下， 具体代码如下：
这样， 不用手动修改URL 也能根据UA自动显示不同的页面了, 具体的效果图在文章开头的先睹为快中。
其他
上面的路由就为了简单的出个效果， 比较粗暴， 仅供参考。
结语
以上就是全部的细节了， 达到了预期的效果， 但是也有很大优化空间。 等后面一波需求做完了， 再来做补充吧。希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章: