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 相关文章推荐
jQuery:delegate中select()不起作用的解决方法(实例讲解)
Jan 26 Javascript
js实现在同一窗口浏览图片
Sep 17 Javascript
使用JavaScript获取地址栏参数的方法
Dec 19 Javascript
原生JS简单实现ajax的方法示例
Nov 29 Javascript
Bootstrap基本样式学习笔记之标签(5)
Dec 07 Javascript
深入理解JavaScript中的尾调用(Tail Call)
Feb 07 Javascript
jquery实现提示语淡入效果
May 05 jQuery
require.js与bootstrap结合实现简单的页面登录和页面跳转功能
May 12 Javascript
基于JavaScript中标识符的命名规则介绍
Jan 06 Javascript
jQuery序列化form表单数据为JSON对象的实现方法
Sep 20 jQuery
微信小程序开发的基本流程步骤
Jan 31 Javascript
vue实现手机号码的校验实例代码(防抖函数的应用场景)
Sep 05 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的聊天室设计
2006/10/09 PHP
PHP中全面阻止SQL注入式攻击分析小结
2012/01/30 PHP
基于php冒泡排序算法的深入理解
2013/06/09 PHP
php实现paypal 授权登录
2015/05/28 PHP
php使用Jpgraph创建折线图效果示例
2017/02/15 PHP
ThinkPHP框架获取最后一次执行SQL语句及变量调试简单操作示例
2018/06/13 PHP
window.location.hash 使用说明
2010/11/08 Javascript
javascript学习笔记(一) 在html中使用javascript
2012/06/18 Javascript
JS使用eval解析JSON的注意事项分析
2015/11/14 Javascript
JS中改变this指向的方法(call和apply、bind)
2016/03/26 Javascript
js学习笔记之事件处理模型
2016/10/31 Javascript
jQuery设置图片等比例缩小的方法
2017/04/29 jQuery
网页中的图片查看器viewjs使用方法
2017/07/11 Javascript
JavaScript正则表达式校验与递归函数实际应用实例解析
2017/08/04 Javascript
vue.js提交按钮时进行简单的if判断表达式详解
2018/08/08 Javascript
解决layer.open弹出框不能获取input框的值为空的问题
2019/09/10 Javascript
Nuxt页面级缓存的实现
2020/03/09 Javascript
详解vue-router的Import异步加载模块问题的解决方案
2020/05/13 Javascript
原生js实现表格循环滚动
2020/11/24 Javascript
Python 实现选择排序的算法步骤
2018/04/22 Python
pandas 选择某几列的方法
2018/07/03 Python
对python sklearn one-hot编码详解
2018/07/10 Python
pygame游戏之旅 添加游戏介绍
2018/11/20 Python
python之验证码生成(gvcode与captcha)
2019/01/02 Python
wxPython:python首选的GUI库实例分享
2019/10/05 Python
关于Python 中的时间处理包datetime和arrow的方法详解
2020/03/19 Python
python能在浏览器能运行吗
2020/06/17 Python
利用Python实现字幕挂载(把字幕文件与视频合并)思路详解
2020/10/21 Python
详解用 python-docx 创建浮动图片
2021/01/24 Python
H5 canvas中width、height和style的宽高区别详解
2018/11/02 HTML / CSS
Willer台湾:日本高速巴士/夜行巴士预约
2017/07/09 全球购物
为您的家、后院、车库等在线购物:Spreetail
2019/06/17 全球购物
EJB发布WEB服务一般步骤
2012/10/31 面试题
运动会通讯稿300字
2014/02/02 职场文书
语文教研活动总结
2014/07/02 职场文书
Python 机器学习工具包SKlearn的安装与使用
2021/05/14 Python