react MPA 多页配置详解


Posted in Javascript onOctober 18, 2019

create-react-app 默认创建的是 SPA 应用,随着代码量的增加,build 后的 js 文件会越来越大。网上有很多拆分大的 js 文件的方案,但其实把 SPA 拆分成 MPA 也未尝不是一种解决方案。下面是 react 多页面配置过程,以备忘。

一、创建工程

create-react-app react-mpa

二、eject 配置文件

yarn eject

测试下 eject 是否正常yarn start

三、配置页面

① 修改 webpack entry

entry: {
   index:[
    isEnvDevelopment && require.resolve('react-dev-utils/webpackHotDevClient'),
    paths.appIndexJs,
   ].filter(Boolean)
  },

② 修改 webpack output

output: {
  filename: isEnvProduction
    ? 'static/js/[name].[contenthash:8].js'
    : isEnvDevelopment && 'static/js/[name].js',
}

③ 修改 HtmlWebpackPlugin

{
 inject: true,
 template: paths.appHtml,
 // 新增
 filename: 'index.html',
 chunks: ['index'],
}

测试下项目工程是否正常运行 yarn start

四、增加页面

1、新建页面所需文件

① 新建 html 页面
复制 public/index.html 为 public/index2.html

② 新建 js 文件
复制 src/index.js 为 src/index2.js
复制 src/App.js 为 src/App2.js

③ 增加文件引用(config/paths.js)

react MPA 多页配置详解

2、webpack 配置

① 增加 entry 配置

react MPA 多页配置详解

② 增加 HtmlWebpackPlugin 配置

react MPA 多页配置详解

运行工程
yarn start

测试页面
http://localhost:3000/index.html
http://localhost:3000/index2.html

仓库地址
https://github.com/lifefriend/react-mpa

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
关于图片验证码设计的思考
Jan 29 Javascript
javascript 写的一个简单的timer
Jul 30 Javascript
jQuery UI的Dialog无法提交问题的解决方法
Jan 11 Javascript
Jquery创建层显示标题和内容且随鼠标移动而移动
Jan 26 Javascript
浅谈JavaScript字符串拼接
Jun 25 Javascript
jQuery深拷贝Json对象简单示例
Jul 06 Javascript
如何解决hover在ie6中的兼容性问题
Dec 15 Javascript
iOS + node.js使用Socket.IO框架进行实时通信示例
Apr 14 Javascript
Angularjs的键盘事件的绑定
Jul 27 Javascript
Vue写一个简单的倒计时按钮功能
Apr 20 Javascript
Vue实现双向绑定的原理以及响应式数据的方法
Jul 02 Javascript
微信小程序实现锚点功能
Nov 20 Javascript
vue滚动插件better-scroll使用详解
Oct 18 #Javascript
VUE实现密码验证与提示功能
Oct 18 #Javascript
VUE实现图片验证码功能
Nov 18 #Javascript
countUp.js实现数字滚动效果
Oct 18 #Javascript
Vue-cli3项目引入Typescript的实现方法
Oct 18 #Javascript
细述Javascript的加法运算符的具体使用
Oct 18 #Javascript
ElementUI之Message功能拓展详解
Oct 18 #Javascript
You might like
一个简单的php实现的MySQL数据浏览器
2007/03/11 PHP
php 无限极分类
2008/03/27 PHP
php下封装较好的数字分页方法
2010/11/23 PHP
PHP取整数函数常用的四种方法小结
2012/07/05 PHP
php实现把url转换迅雷thunder资源下载地址的方法
2014/11/07 PHP
php 如何禁用eval() 函数实例详解
2016/12/01 PHP
javascript import css实例代码
2008/07/18 Javascript
ASP.NET jQuery 实例14 在ASP.NET form中校验时间范围
2012/02/03 Javascript
JS中for循序中延迟加载动态效果的具体实现
2013/08/18 Javascript
js,jquery滚动/跳转页面到指定位置的实现思路
2014/06/03 Javascript
js实现可兼容IE、FF、Chrome、Opera及Safari的音乐播放器
2015/02/11 Javascript
浅谈bootstrap源码分析之tab(选项卡)
2016/06/06 Javascript
使用Web Uploader实现多文件上传
2016/06/08 Javascript
使用JS轻松实现ionic调用键盘搜索功能(超实用)
2016/09/06 Javascript
Bootstrap整体框架之CSS12栅格系统
2016/12/15 Javascript
JS实现的文件拖拽上传功能示例
2018/05/21 Javascript
vue组件间的参数传递实例详解
2019/04/26 Javascript
vue实现简单图片上传
2020/06/30 Javascript
[01:29]2014DOTA2展望TI 剑指西雅图DK战队专访
2014/06/30 DOTA
Python笔记(叁)继续学习
2012/10/24 Python
Python内置函数之filter map reduce介绍
2014/11/30 Python
详解使用Python下载文件的几种方法
2019/10/13 Python
Python实现读取并写入Excel文件过程解析
2020/05/27 Python
超级实用的8个Python列表技巧
2020/08/24 Python
Python程序慢的重要原因
2020/09/04 Python
加拿大领先的牛仔零售商:Bluenotes
2018/01/22 全球购物
英国最出名高街品牌:Forever Unique
2018/02/24 全球购物
加大码胸罩、内裤和服装:Just My Size
2019/03/21 全球购物
物理系毕业生自荐信
2013/11/01 职场文书
演讲稿怎么写
2014/01/07 职场文书
个人简历自我评价范文
2014/02/04 职场文书
普通党员整改措施
2014/10/24 职场文书
2015年个人现实表现材料
2014/12/10 职场文书
525心理健康活动总结
2015/05/08 职场文书
2015年城市管理工作总结
2015/05/23 职场文书
怎样做好公众演讲能力?
2019/08/28 职场文书