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

2018-10-13 admin

背景

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

先睹为快

Mobile:

clipboard.png

PC:

clipboard.png

clipboard.png

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

最终的源代码目录:

clipboard.png

具体的改造步骤如下:

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:

clipboard.png

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 来访问了:

clipboard.png

clipboard.png

路由相关

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

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

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

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

clipboard.png

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

其他

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

结语

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

End。

参考资料:

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

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

原文链接:https://segmentfault.com/a/1190000016668274

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-42552.html

文章标题:react 应用多入口 配置 && 实践总结

相关文章
关于Ajax应用开发需要注意的事项
接触Ajax,那时候的Ajax支持还不是很好,都要涉及底层,没有现成的框架给你调用。现在把常见的问题列举如下。 [b]1、编码问题[/b] 注意AJAX要取的文件是UTF-8编码的。GB2312编码传回BROWSE后中文会乱码。如果用VBS...
2015-11-11
Bootstrap 下拉多选框插件Bootstrap Multiselect
引入文件: &lt;link rel=&quot;stylesheet&quot; href=&quot;css&#x2F;bootstrap.min.css&quot; type=&quot;text&#x2F;css&quot;&#x2...
2017-02-22
2015年将会有大量基于HTML5和JS的WEB应用
随着HTML5的定稿,以及JS的迅速发展,我们有理由相信,在接下来的一年里,将会涌现出大量的WEB应用,网站的表现形式将不再仅仅局限于过去的形式,必将在2015年引来一次重大改革! ...
2015-11-12
HTML5移动应用开发的12大特性
1.离线缓存为HTML5开发移动应用提供了基础 HTML5 Web Storage API可以看做是加强版的cookie,不受数据大小限制,有更好的弹性以及架构,可以将数据写入到本机的ROM中,还可以在关闭浏览器后再次打开时恢复数据,以减少...
2015-11-11
三步搞定vue在vscode的环境配置问题
1. vscode基础开发插件 vscode-icons 图标美化 Debugger for Chrome 调试 Beautify 代码格式化 Prettier 代码格式化 ESLint 代码规范 JavaScript (ES6) cod...
2017-12-25
HTML5渐行渐近 APP还能走多远
鎽樿�侊細浠讳綍浜嬬墿閮界洓鏋佽€岃“锛孉PP涔熶笉渚嬪�栥€傚湪鍙栧緱杈夌厡鎴愮哗鐨勫悓鏃讹紝APP涔熷悓鏍烽潰涓寸潃璇稿�氶毦浠ラ€捐秺鐨勯殰纰嶃€� 鍦ㄧ粡鍘嗕簡闀胯揪8骞寸殑闀胯窇鍚庯紝HTML5瑙勮寖缁堜簬鐡滅啛钂傝惤銆佹�e紡瀹...
2015-11-12
Bootstrap table简单使用总结
最近接触一个很棒的插件,Bootstrap table没做过前端的表示对table的印象还只停留在html的table标签那一套,用过bootstrap table之后不得不说真的很实用。 构造方式 1 、HTML &lt;div clas...
2017-03-17
Webpack(含 4)配置详解——从 0 配置一套开发模板
前言 源代码 熟悉 webpack 与 webpack4 配置。 webpack4 相对于 3 的最主要的区别是所谓的零配置,但是为了满足我们的项目需求还是要自己进行配置,不过我们可以使用一些 webpack 的预设值。同时 webpack...
2018-05-02
jQuery给多个不同元素添加class样式的方法
本文实例讲述了jQuery给多个不同元素添加class样式的方法。分享给大家供大家参考。具体分析如下: jQuery可以通过addClass()方法给多个不同的html元素同时添加相同的class &lt;!DOCTYPE html&gt;...
2017-03-22
CIO最为关注的六大企业移动应用平台
2014年10月18日,由北大信息化与管理研究中心、北大CIO班教务办、大华南IT高管共赢圈联合主办,CIO时代网承办的2014“北大CIO中国行-深圳站”活动顺利举行。会上,来自各大企业的CIO、移动应用专家等140余人共聚一堂,共同探讨...
2015-11-12
回到顶部