react 应用多入口配置及实践总结


Posted in Javascript onOctober 17, 2018

背景

还是之前的那个项目,做完国际化没多久,还没来得及划水, 又有新的活了 -- 移动端的兼容。 考虑到后期的复杂度, 需要做两套资源。 具体的目标是:同一个URL,PC打开就显示PC的那一套, M端打开就显示Mobile的页面。 create-react-app 脚手架本身不支持多入口, 需要改造,今天下午研究了一下,改造了一波, 基本达到了预期, 在这里简单把经验总结分享下。

先睹为快

Mobile:

react 应用多入口配置及实践总结

PC:

react 应用多入口配置及实践总结

react 应用多入口配置及实践总结

输出之后的文件, 相比之前的index.html, 多了一个额外的mobile.html.

最终的源代码目录:

react 应用多入口配置及实践总结

具体的改造步骤如下:

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, '/'),
 },

可能需要注意的几点:

  • entry从原来的数组扩展为对象,每个key代表一个入口。
  • output中的filename要区分输出名,可增加[name]变量,这样会根据entry分别编译出每个entry的js文件。

这样你就可以在src 目录下新起一个民目录开发新的SPA:

react 应用多入口配置及实践总结

step3: 生成多个html入口文件

Webpack配置多入口后,只是编译出多个入口的Js,入口的HTML文件也需要配置, 可以用HtmlWebpackPlugin来生成。

webpack.config.dev.js 原配置:

// Generates an `index.html` file with the <script> injected.
  new HtmlWebpackPlugin({
   inject: true,
   chunks: ["index"],
   template: paths.appHtml,
  }),

需要加多一个配置, 改成:

// Generates an `index.html` 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',
  }),
  • 每调一次HtmlWebpackPlugin生成一次HTML页面,这里有两个,所以就会多增加一个mobile.html节点。
  • chunks: 指明哪些webpack入口的js会被注入到这个HTML页面。如果不配置,则将所有entry的JS文件都注入HTML。
  • filename: 指明生成的HTML路径,如果不配置就是dist/index.html。mobile配置了新的filename,避免与第一个入口相互覆盖。
  • template: 指定模版, 我这里因为用的这两个模版都一样, 所以就指定的同一个appHtml, 如有特殊需求, 就新建一个html 文件, 在template字段里引用即可。

Step4: 配置webpack Dev Server

上述配置做完后,理论就可以打包出多入口的版本;但使用npm start启动后,发现无论输入/index.html还是/mobile.html,好像都是和原来/index.html显示一样的内容。

甚至输入显然不存在的/xxxx.html,也显示为/index.html的内容。

这种现象,初步判断是HTTP服务器把所有请求重定向到了/index.html。

对于单页应用,这种做法是没有问题的(本来就一个页面), 但我们新增的/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 来访问了:

react 应用多入口配置及实践总结

react 应用多入口配置及实践总结

路由相关

到这, 已经可以手动修改URL 来访问pc 和 mobile的页面了。 还有一个问题没有解决:

URL最后肯定是不能给你手动改来改去的, 需要根据设备的情况自己判断, 这里有两个思路:

1: 配置 Nginx 的路径的时候, 加多一个alias 的映射。
2: 前端根据UA自行配置。

为了快速出效果, 简单搞了一下, 具体代码如下:

react 应用多入口配置及实践总结

这样, 不用手动修改URL 也能根据UA自动显示不同的页面了, 具体的效果图在文章开头的先睹为快中。

其他

上面的路由就为了简单的出个效果, 比较粗暴, 仅供参考。

结语

以上就是全部的细节了, 达到了预期的效果, 但是也有很大优化空间。 等后面一波需求做完了, 再来做补充吧。希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery从头学起第四讲 jquery入门教程
Aug 01 Javascript
uploadify 3.0 详细使用说明
Jun 18 Javascript
原生js实现改变随意改变div属性style的名称和值的结果
Sep 26 Javascript
node.js中的url.parse方法使用说明
Dec 10 Javascript
微信小程序 定义全局数据、函数复用、模版等详细介绍
Oct 27 Javascript
jquery css实现邮箱自动补全
Nov 14 Javascript
详解获取jq ul第一个li定位的四种解决方案
Nov 23 Javascript
jQuery事件_动力节点Java学院整理
Jul 05 jQuery
Vue实现图片与文字混输效果
Dec 04 Javascript
小程序瀑布流组件实现翻页与图片懒加载
May 19 Javascript
Vue 根据条件判断van-tab的显示方式
Aug 03 Javascript
微信小程序实现上传照片代码实例解析
Aug 04 Javascript
vue+echarts实现动态绘制图表及异步加载数据的方法
Oct 17 #Javascript
手把手教你写一个微信小程序(推荐)
Oct 17 #Javascript
微信小程序开发之tabbar图标和颜色的实现
Oct 17 #Javascript
解决百度Echarts图表坐标轴越界的方法
Oct 17 #Javascript
vue实现循环切换动画
Oct 17 #Javascript
element-ui upload组件多文件上传的示例代码
Oct 17 #Javascript
bootstrap table合并行数据并居中对齐效果
Oct 17 #Javascript
You might like
第十三节 对象串行化 [13]
2006/10/09 PHP
PHP之uniqid()函数用法
2014/11/03 PHP
PHP实现中文圆形印章特效
2015/06/19 PHP
PHP用户注册邮件激活账户的实现代码
2017/05/31 PHP
Thinkphp5+Redis实现商品秒杀代码实例讲解
2020/12/29 PHP
javascript 写类方式之四
2009/07/05 Javascript
JavaScript 一行代码,轻松搞定浮动快捷留言-V2升级版
2010/04/02 Javascript
jQuery validate插件submitHandler提交导致死循环解决方法
2016/01/21 Javascript
jQuery实现输入框邮箱内容自动补全与上下翻动显示效果【附demo源码下载】
2016/09/20 Javascript
用jquery的attr方法实现图片切换效果
2017/02/05 Javascript
js实现加载页面就自动触发超链接的示例
2017/08/31 Javascript
JavaScript实现读取与输出XML文件数据的方法示例
2018/06/05 Javascript
iview tabs 顶部导航栏和模块切换栏的示例代码
2019/03/04 Javascript
JS实现放大镜效果
2020/09/21 Javascript
[01:22:29]真视界:2019年国际邀请赛总决赛
2020/01/29 DOTA
批处理与python代码混合编程的方法
2016/05/19 Python
解决Pandas to_json()中文乱码,转化为json数组的问题
2018/05/10 Python
Python Requests库基本用法示例
2018/08/20 Python
python数据批量写入ScrolledText的优化方法
2018/10/11 Python
python3.6使用urllib完成下载的实例
2018/12/19 Python
关于python中密码加盐的学习体会小结
2019/07/15 Python
命令行运行Python脚本时传入参数的三种方式详解
2019/10/11 Python
SELENIUM自动化模拟键盘快捷键操作实现解析
2019/10/28 Python
TensorBoard 计算图的查看方式
2020/02/15 Python
在keras里实现自定义上采样层
2020/06/28 Python
Python requests接口测试实现代码
2020/09/08 Python
如何使用html5与css3完成google涂鸦动画
2012/12/16 HTML / CSS
Under Armour安德玛荷兰官网:美国高端运动科技品牌
2019/07/10 全球购物
令人啧啧称赞的经理推荐信
2013/11/07 职场文书
小学生个人先进事迹材料
2014/05/08 职场文书
会计试用期自我评价
2014/09/19 职场文书
工商管理专业毕业生自我鉴定2014
2014/10/04 职场文书
网站文案策划岗位职责
2015/04/14 职场文书
Mysql 性能监控及调优
2021/04/06 MySQL
SQL实现LeetCode(175.联合两表)
2021/08/04 MySQL
Oracle用户管理及赋权
2022/04/24 Oracle