react MPA 多页配置详解
2019-10-19 07:05
3059 查看
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
以上就是本文的全部内容,希望对大家的学习有所帮助
您可能感兴趣的文章:
相关文章推荐
- 详解多页应用 Webpack4 配置优化与踩坑记录
- vue-cli单页应用改成多页应用配置详解
- struts2中的constant配置详解
- Spring事务配置详解
- 关于RED5——配置文件详解
- LOG4J配置详解
- 第41课 WEB代理、Haproxy 配置详解及Haproxy ACL使用
- SSM框架配置文件详解(图解)
- web.xml 配置详解
- Hadoop 2.x 入门学习(一)--Centos 6.8 系统Hadoop 2.7.4 伪分布式安装配置详解
- SSH中事务配置详解(每个Bean都有一个代理)
- QoS实验配置详解
- win7的配置要求详解
- Web.xml配置详解
- spring+springMVC+JPA配置详解
- 标准ACL、扩展ACL和命名ACL的配置详解
- Linux 内核配置选项详解
- Ehcache配置详解及CacheManager使用
- applicationContext.xml配置文件详解
- Cisco路由器上配置DHCP全程详解