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