react MPA多页配置详解

默认情况下，创建-反应-应用程序创建SPA应用程序。随着代码量的增加，构建后的js文件会越来越大。网上有很多拆分大型js文件的方案，但其实把SPA拆分成MPA也是一种解决方案。以下是备忘录的react多页配置过程。

首先，创建项目

创建-反应-应用反应-mpa II。弹出配置文件

退纱测试退纱是否正常。纱线开始

第三，配置页面

修改网络包条目

条目： {索引：[is development require。resolve(' react-dev-utils/webpackhtevclient ')，paths.appindexjs，]。过滤(布尔)}，修改网络包输出

output : { filename : isEnvProduction？Static/js/[name]。[内容哈希：8]。js ' 3360 is development ' static/js/[name]。js '，} 修改HtmlWebpackPlugin

{inject: true，template : path . app html，//add filename3360' index.html '，chunk 3360[' index ']，}测试项目是否正常工作。

第四，添加页面

1.创建新页面所需的文件

新建一个html页面，将public/index.html复制为public/index2.html。

新建一个js文件，复制src/index.js为src/index2.js，复制src/App.js为src/app2.js。

添加文件引用(config/path . js)

2.webpack配置

添加入口配置

添加HtmlWebpackPlugin配置

运行项目纱线开始

测试页面http://localhost 33603000/index . html http://localhost 33603000/index 2 . html。

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

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