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

Sike 发布于2019-08-29 16:57 / 1899人阅读

摘要：如果不配置，则将所有的文件都注入。指明生成的路径，如果不配置就是。配置了新的，避免与第一个入口相互覆盖。甚至输入显然不存在的，也显示为的内容。这种现象，初步判断是服务器把所有请求重定向到了。至此，环境的多入口问题就解决了。前端根据自行配置。

背景

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

先睹为快

Mobile:

PC:

输出之后的文件，相比之前的index.html，多了一个额外的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, "/"),
  },

可能需要注意的几点：

entry从原来的数组扩展为对象，每个key代表一个入口。

output中的filename要区分输出名，可增加[name]变量，这样会根据entry分别编译出每个entry的js文件。

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

step3: 生成多个html入口文件

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

webpack.config.dev.js 原配置：

// Generates an `index.html` file with the

路由相关

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

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

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

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

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

其他

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

结语

以上就是全部的细节了，达到了预期的效果，但是也有很大优化空间。等后面一波需求做完了，再来做补充吧。:P

End。

参考资料：

https://medium.com/a-beginner...

http://imshuai.com/create-rea...

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114004.html

react 应用多入口配置 &amp;&amp; 实践总结

摘要：如果不配置，则将所有的文件都注入。指明生成的路径，如果不配置就是。配置了新的，避免与第一个入口相互覆盖。甚至输入显然不存在的，也显示为的内容。这种现象，初步判断是服务器把所有请求重定向到了。至此，环境的多入口问题就解决了。前端根据自行配置。背景还是之前的那个项目，做完国际化没多久，还没来得及划水，又有新的活了 -- 移动端的兼容。考虑到后期的复杂度，需要做两套资源。具体的目...

curried 2019-08-23 12:20 评论0 收藏0
前端每周清单第 29 期：Web 现状分析与优化策略、Vue 单元测试、Headless Chrom

摘要：前端每周清单第期现状分析与优化策略单元测试爬虫作者王下邀月熊编辑徐川前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点分为新闻热点开发教程工程实践深度阅读开源项目巅峰人生等栏目。 showImg(https://segmentfault.com/img/remote/1460000011008022); 前端每周清单第 29 期：Web 现状分析与优化策略...

HackerShell 2019-08-21 12:05 评论0 收藏0
Byemess-基于React&amp;redux的在线Todo应用

摘要：在线注册账号，数据存储于。年了，还不使用的异步控制体系。过度对数据模型进行装饰的结果便是高耦合，这跟我初衷是基于在线存储数据有关。为什么又是Todo，全世界的初学者都在做todo吗？可能很多人要问这句话，其实这句话可以等同于：为什么你做了个云音乐播放器？为什么你做了个新闻阅读APP？为什么你做了个VUE/REACT版本的CNODE？究其本质，这几个应用都是data-map...

MRZYD 2019-08-20 17:07 评论0 收藏0
微前端qiankun安装使用

一、前言大型中后台项目一般包括10个以上的子项目，如果维护在一个单页面应用中，项目就会越来越大，而且不利于版本的迭代，微前端就很好的解决了这些问题。这篇文章主要来体验下蚂蚁的微前端：qiankun，虽然比较成熟了，但在体验过程中还是有一些问题，记录总结下，项目代码实践项目以react单页面应用为主应用，然后构建了三个微应用：react、vue3、node静态页面二、前期准备微前端要求多个前端服务，...

社区管理员 2022-10-08 14:59 评论0 收藏0
前端资源系列（4）-前端学习资源分享&amp;前端面试资源汇总

摘要：特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。本以为自己收藏的站点多，可以很快搞定，没想到一入汇总深似海。还有很多不足&遗漏的地方，欢迎补充。有错误的地方，还请斧正... 托管: welcome to git，欢迎交流，感谢star 有好友反应和斧正，会及时更新，平时业务工作时也会不定期更...

princekin 2019-08-20 11:28 评论0 收藏0