react MPA 多頁配置詳解
create-react-app 默認創(chuàng)建的是 SPA 應用，隨著代碼量的增加，build 后的 js 文件會越來越大。網(wǎng)上有很多拆分大的 js 文件的方案，但其實把 SPA 拆分成 MPA 也未嘗不是一種解決方案。下面是 react 多頁面配置過程，以備忘。
一、創(chuàng)建工程
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
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要給大家分享React中的useEffect四種用法，useEffect中 觸發(fā)更新，重復的 useEffect，依賴值觸發(fā)回調(diào)，useEffect 的返回值，通過代碼示例介紹的非常詳細,需要的朋友可以參考下2023-07-07
React?Hook中的useState函數(shù)的詳細解析
Hook 就是 JavaScript 函數(shù)，這個函數(shù)可以幫助你鉤入(hook into) React State以及生命周期等特性，這篇文章主要介紹了React?Hook?useState函數(shù)的詳細解析的相關資料,需要的朋友可以參考下2022-10-10
React native ListView 增加頂部下拉刷新和底下點擊刷新示例
這篇文章主要介紹了React native ListView 增加頂部下拉刷新和底下點擊刷新示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
react-beautiful-dnd 實現(xiàn)組件拖拽功能
這篇文章主要介紹了react-beautiful-dnd 實現(xiàn)組件拖拽功能，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-08-08
這篇文章主要介紹了React如何自定義輪播圖Carousel組件問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
Node-sass是一個庫,它將Node.js綁定到LibSass（流行樣式表預處理器Sass的C版本）,它允許用戶以令人難以置信的速度將.scss文件本地編譯為css,并通過連接中間件自動編譯,下面這篇文章主要給大家介紹了關于React安裝node-sass失敗解決的相關資料,需要的朋友可以參考下2022-11-11
這篇文章主要介紹了Redux使用方法和基本原理,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
React封裝自定義Hook捕獲所有錯誤的實現(xiàn)方法
在 React 開發(fā)中,錯誤處理是確保應用穩(wěn)定性和用戶體驗的重要部分,React 提供了多種錯誤捕獲方式,包括錯誤邊界**等,本文將詳細介紹這些方法,并展示如何封裝一個能夠捕獲所有同步和異步錯誤的自定義 Hook,需要的朋友可以參考下2024-12-12
這篇文章主要為大家詳細介紹了react封裝Dialog彈框的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
React Native中的RefreshContorl下拉刷新使用
本篇文章主要介紹了React Native中的RefreshContorl下拉刷新使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10