背景
还是之前的那个项目,做完国际化没多久,还没来得及划水, 又有新的活了 -- 移动端的兼容。 考虑到后期的复杂度, 需要做两套资源。 具体的目标是:同一个url,pc打开就显示pc的那一套, m端打开就显示mobile的页面
。 create-react-app 脚手架本身不支持多入口, 需要改造,今天下午研究了一下,改造了一波, 基本达到了预期, 在这里简单把经验总结分享下。
先睹为快
mobile:
pc:
输出之后的文件, 相比之前的, 多了一个额外的mobile.html.
最终的源代码目录:
具体的改造步骤如下:
steps
step1: eject
在下之前图方便, 直接用了create-react-app
, 现在需要更改配置, 需要弹出默认配置:
在终端执行:yarn eject
.
step2: 修改webpack config
原本的 webpack.config.dev.js:
entry: [ require.resolve('react-dev-utils/webpackhotdevclient'), require.resolve('./polyfills'), require.resolve('react-error-overlay'), paths.appindexjs, ], output: { path: paths.appbuild, pathinfo: true, filename: 'static/js/bundle.js', chunkfilename: 'static/js/[name].chunk.js', publicpath: publicpath, devtoolmodulefilenametemplate: info => path.resolve(info.absoluteresourcepath), },
需要修改为:
entry: { index: [ require.resolve('./polyfills'), require.resolve('react-dev-utils/webpackhotdevclient'), paths.appindexjs, ], mobile: [ require.resolve('./polyfills'), require.resolve('react-dev-utils/webpackhotdevclient'), paths.appsrc + "/mobile/index.js", ] }, output: { pathinfo: true, filename: 'static/js/[name].bundle.js', chunkfilename: 'static/js/[name].chunk.js', publicpath: publicpath, devtoolmodulefilenametemplate: info => path.resolve(info.absoluteresourcepath).replace(/\\/g, '/'), },
可能需要注意的几点:
这样你就可以在src
目录下新起一个民目录开发新的spa:
step3: 生成多个html入口文件
webpack配置多入口后,只是编译出多个入口的js,入口的html文件也需要配置, 可以用htmlwebpackplugin来生成。
webpack.config.dev.js
原配置:
// generates an `` file with the <script> injected. new htmlwebpackplugin({ inject: true, chunks: ["index"], template: paths.apphtml, }),
需要加多一个配置, 改成:
// generates an `` file with the <script> injected. new htmlwebpackplugin({ inject: true, chunks: ["index"], template: paths.apphtml, }), new htmlwebpackplugin({ inject: true, chunks: ["mobile"], template: paths.apphtml, filename: 'mobile.html', }),
step4: 配置webpack dev server
上述配置做完后,理论就可以打包出多入口的版本;但使用npm start启动后,发现无论输入/还是/mobile.html,好像都是和原来/显示一样的内容。
甚至输入显然不存在的/xxxx.html,也显示为/的内容。
这种现象,初步判断是http服务器把所有请求重定向到了/。
对于单页应用,这种做法是没有问题的(本来就一个页面), 但我们新增的/mobile.html就可以访问到了。
参考官方文档 the historyapifallback option,发现是webpack dev server的问题,还要额外做一些配置,需修改webpackdevserver.config.js:
原配置:
historyapifallback: { // paths with dots should still use the history fallback. // see https://github.com/facebookincubator/create-react-app/issues/387. disabledotrule: true, },
修改为:
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自动显示不同的页面了, 具体的效果图在文章开头的先睹为快
中。
其他
上面的路由就为了简单的出个效果, 比较粗暴, 仅供参考。
结语
以上就是全部的细节了, 达到了预期的效果, 但是也有很大优化空间。 等后面一波需求做完了, 再来做补充吧。希望对大家的学习有所帮助,也希望大家多多支持移动技术网。
如对本文有疑问, 点击进行留言回复!!
offset、client、scroll (width,height、left,top、X,Y)
网友评论