react MPA 多页配置详解

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)

2、webpack 配置

① 增加 entry 配置

② 增加 HtmlWebpackPlugin 配置

运行工程
yarn start

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • webpack构建react多页面应用详解

    webpack构建react多页面应用详解

    写这个的初衷是很难找一个简洁的项目脚手架,很多脚手架都有很多依赖,光看依赖就要很久,所以自己参照网上的内容,弄个这么一个简单的多页面的脚手架. 利用creat-react-app 新建一个react应用 npm install -g create-react-app 然后创建一个项目 create-react-app demo create-react-app会自动初始化一个脚手架并安装 React 项目的各种必要依赖,如果在过程中出现网络问题,请用cnpm淘宝镜像安装. 然后我们进入项目并启动

  • 详解一个基于react+webpack的多页面应用配置

    简单介绍 首先本文不会对webpack代码进行解释,其所有配置都可以在文档上找到. 平时工作中会写一些多页面应用,因为习惯了react的开发模式,故此写了一个简单的配置,跟大家一起分享.如果你也喜欢,对你的开发有所帮助,希望给点鼓励(start) github地址:https://github.com/ivan-GM/Gm-cli 项目目录介绍: 打包后文件目录: 打包成cli如果你厌烦了新项目的复制.粘贴,也可以构建成cli 1,首先创建个文件夹,npm init初始化项目: 2, 创建bin

  • create-react-app修改为多页面支持的方法

    新公司前端就我一个,目前个人选型用react作技术栈开发前端h5页面.最近做一个需求是pc页面需要seo的,后端是Java开发,又不想自己用ssr做seo渲染,只好写html给java大神改成jsp了.然而这个又需要搞一套工作流太麻烦(太懒了),所以直接拿来create-react-app的工作流进行修改了.附上Git地址. 修改dev流程 在已经通过create-react-app生成项目的基础下yarn run eject yarn add globby 用于查看html文件 修改confi

  • webpack4+react多页面架构的实现

    webpack在单页面打包上应用广泛,以create-react-app为首的脚手架众多,单页面打包通常是将业务js,css打包到同一个html文件中,整个项目只有一个html文件入口,但也有许多业务需要多个页面不同的入口,比如不同的h5活动,或者需要支持seo的官方网站,都需要多个不同的html,webpack-react-multi-page架构让你可以实现多页面架构,在项目开发中保证每个页面都可以热更新并且打包后有清晰的文件层次结构. Github地址 项目架构 技术使用 react16

  • webpack4 + react 搭建多页面应用示例

    webpack 升级到4之后还没好好的同步一个可实用的webpack架子,接下来用webpack4来搭建一个简单的react的多界面应用,废话不说 直接撸码 创建工程 $ mkdir demo && cd demo $ npm init -y webpack 配置 安装react + babel 依赖 $ npm i -S react@16.3.0 react-dom@16.3.0 $ npm i -D webpack@4.4.1 webpack-cli@2.0.13 webpack-de

  • 浅谈webpack+react多页面开发终极架构

    webpack在单页面打包上应用广泛,以create-react-app为首的脚手架众多,单页面打包通常指的是将业务js,css打包到同一个html文件中,整个项目只有一个html文件入口,但也有许多业务需要多个页面不同的入口,比如不同的h5活动,或者需要支持seo的官方网站,都需要多个不同的html.webpack-react-multi-page架构让你可以在多页面在项目开发中自动化打包新创建页面并保证每个页面都可以热更新 ,build打包后有清晰的文件层次结构. 概览 key value

  • react MPA 多页配置详解

    react MPA 多页配置详解

    create-react-app 默认创建的是 SPA 应用,随着代码量的增加,build 后的 js 文件会越来越大.网上有很多拆分大的 js 文件的方案,但其实把 SPA 拆分成 MPA 也未尝不是一种解决方案.下面是 react 多页面配置过程,以备忘. 一.创建工程 create-react-app react-mpa 二.eject 配置文件 yarn eject 测试下 eject 是否正常yarn start 三.配置页面 ① 修改 webpack entry entry: { i

  • react 路由Link配置详解

    1.Link的to属性 (1)放置路由路径 (2)放置对象,且为规定格式 {pathname:"/xx",search:'?键值对',hash:"#xxx",state:{键值对}} 会自动将pathname.search.hash拼接在url路径上,state为传入的参数 可通过输出props查看对象内的信息 this.props.location.state.键名获取state内的数据 2.Link的replace属性 添加replace将跳转前的上一个页面替换

  • React Redux使用配置详解

    React Redux使用配置详解

    目录 前言 redux三大原则 redux执行流程 redux具体使用 执行流程 redux使用流程 前言 在使用redux之前,首先了解一下redux到底是什么? 用过vue的肯定知道vuex,vuex是vue中全局状态管理工具,主要是用于解决各个组件和页面之间数据共享问题,对数据采用集中式管理,而且可以通过插件实现数据持久化 redux跟vuex类似,最主要的就是用作状态的管理,redux用一个单独的常量状态state来保存整个应用的状态,可以把它想象成数据库,用来保存项目应用中的公共数据

  • Vue-cli3多页面配置详解

    Vue-cli3发布已经好长时间了,笔者也在一直使用,由于公司业务需要要使用多页面配置,于是花时间研究了一下Vue-cli3如何配置多页面.由于Vue-cli3相比之前的版本做了很大的改动,在研究过程中也遇到一些问题. 对于Vue-cli3创建项目这里就不做太多的赘述了,毕竟不属于本文内容,有关相关博客也有很多,大家可以自行Google一下就好了. 多页面应用(mpa)与单页面应用(spa)优缺点 在项目中我们用到的大多数都是单页面应用(spa),对于多页面可能用到的比较少一些,具体还是要根据具

  • android中使用react-native设置应用启动页过程详解

    android中使用react-native设置应用启动页过程详解

    一.背景 在我们使用react-native进行编写代码的时候,当启动应用的时候,我们会看到如下界面 然而,这样的启动界面是非常的不又好,那么我们该怎么进行处理启动界面呢?有如下两种方案 二.方案 1.使用第三方库(react-native-splash-screen) 2.ios系统设置(仅适用ios系统,在这里不做讲解) 三.具体实现方式 一).react-native-splash-screen 1.安装 npm i react-native-splash-screen --save 2.

  • 微信小程序Server端环境配置详解（SSL， Nginx HTTPS，TLS 1.2 升级）

    微信小程序Server端环境配置详解（SSL， Nginx HTTPS，TLS 1.2 升级）

    微信小程序Server环境配置详解 主要内容: 1. SSL免费证书申请步骤 2. Nginx HTTPS 配置 3. TLS 1.2 升级过程 微信小程序要求使用 https 发送请求,那么Web服务器就要配置成支持 https,需要先申请SSL证书 小程序也要求 TLS(传输层安全协议)的版本至少为 1.2,在配置好 https之后,如果 TLS 的版本较低,就涉及到升级问题 所以 Server端环境配置的主要步骤: 申请 SSL 证书 配置web服务器支持https(我使用的是nginx)

  • Nginx配置详解(推荐)

    Nginx配置详解(推荐)

    序言 Nginx是lgor Sysoev为俄罗斯访问量第二的rambler.ru站点设计开发的.从2004年发布至今,凭借开源的力量,已经接近成熟与完善. Nginx功能丰富,可作为HTTP服务器,也可作为反向代理服务器,邮件服务器.支持FastCGI.SSL.Virtual Host.URL Rewrite.Gzip等功能.并且支持很多第三方的模块扩展. Nginx的稳定性.功能集.示例配置文件和低系统资源的消耗让他后来居上,在全球活跃的网站中有12.18%的使用比率,大约为2220万个网站.

  • git中ssh key配置详解

    git clone支持https和git(即ssh)两种方式下载源码: 当使用git方式下载时,如果没有配置过ssh key,则会有如下错误提示: 下面就介绍一下如何配置git的ssh key,以便我们可以用git方式下载源码. 首先用如下命令(如未特别说明,所有命令均默认在Git Bash工具下执行)检查一下用户名和邮箱是否配置(github支持我们用用户名或邮箱登录): git config --global --list 笔者的机器显示信息如下(已配置): 如未配置,则执行以下命令进行配置

  • 微信小程序全局配置以及页面配置详解

    微信小程序全局配置以及页面配置详解

    目录 全局配置 全局配置文件及常用配置项 全局配置—window 小程序窗口组成部分 了解window节点常用的配置项 设置导航栏的标题 设置导航栏的背景色 设置导航栏的标题颜色 全局开启下拉刷新功能 设置下拉刷新时窗口的背景色 设置下拉刷新时loading的样式 设置上拉触底的距离 全局配置—tabbar 什么是tabbar tabbar的6个组成部分 tabbar节点的配置项 每个tab项的配置选项 页面配置 页面配置文件的作用 页面配置和全局配置的关系 页面配置中常用的配置项 小结 全局配

  • SpringBoot整合Web之AOP配置详解

    SpringBoot整合Web之AOP配置详解

    目录 配置AOP AOP简介 Spring Boot 支持 其它 自定义欢迎页 自定义 favicon 除去某个自动配置 配置AOP AOP简介 要介绍面向切面变成(Aspect-Oriented Programming,AOP),需要先考虑一个这样的场景:公司有一个人力资源管理系统目前已经上线,但是系统运行不稳定,有时运行的很慢,为了检测到底是哪个环节出现问题了,开发人员想要监控每一个方法执行的时间,再根据这些执行时间判断出问题所在.当问题解决后,再把这些监控移除掉.系统目前已经运行,如果手动

随机推荐