首頁 web前端 js教程 如何對於create-react-app修改為多頁面支持

如何對於create-react-app修改為多頁面支持

May 28, 2018 pm 03:54 PM
修改

這次給大家帶來如何對於create-react-app修改為多頁面支持,對於create-react-app修改為多頁面支持的注意事項有哪些,下面就是實戰案例,一起來看一下。

修改dev流程

在已經透過create-react-app產生專案的基礎下yarn run eject

yarn add globby 用於查看html檔案

修改config/paths.js

//遍历public下目录下的html文件生成arry
const globby = require('globby');
const htmlArray = globby.sync([path.join(resolveApp('public'), '/*.html')]);
//module.exports 里面增加
htmlArray
登入後複製

修改config/webpack.config.dev.js

<!--增加配置-->
// 遍历html
const entryObj = {};
const htmlPluginsAray = paths.htmlArray.map((v)=> {
 const fileParse = path.parse(v);
 
 entryObj[fileParse.name] = [
  require.resolve('./polyfills'),
  require.resolve('react-dev-utils/webpackHotDevClient'),
  `${paths.appSrc}/${fileParse.name}.js`,,
 ]
 return new HtmlWebpackPlugin({
  inject: true,
  chunks:[fileParse.name],
  template: `${paths.appPublic}/${fileParse.base}`,
  filename: fileParse.base
 })
});
<!--entry 替换为entryObj-->
entry:entryObj
<!--替换htmlplugin内容-->
// new HtmlWebpackPlugin({
//  inject: true,
//  chunks: ["index"],
//  template: paths.appPublic + '/index.html',
// }),
...htmlPluginsAray,
登入後複製

#修改config/webpackDevServer.config.js

// 增加
const path = require('path');
const htmlPluginsAray = paths.htmlArray.map((v)=> {
 const fileParse = path.parse(v);
 return {
  from: new RegExp(`^\/${fileParse.base}`), to: `/build/${fileParse.base}`
 };
});
<!--historyApiFallback 增加 rewrites-->
rewrites: htmlPluginsAray
登入後複製

以上就是dev模式下的修改了,yarn start試試看。

修改product流程

修改config/

//增加
// 遍历html
const entryObj = {};
const htmlPluginsAray = paths.htmlArray.map((v)=> {
 const fileParse = path.parse(v);
 
 entryObj[fileParse.name] = [
  require.resolve('./polyfills'),
  `${paths.appSrc}/${fileParse.name}.js`,
 ];
 console.log(v);
 return new HtmlWebpackPlugin({
  inject: true,
  chunks:[fileParse.name],
  template: `${paths.appPublic}/${fileParse.base}`,
  filename: fileParse.base
 })
});
<!--修改entry-->
 entry: entryObj,
<!--替换 new HtmlWebpackPlugin 这个值-->
...htmlPluginsAray,
登入後複製

增加複製模組(yarn add cpy

#修改scripts/build.js

 // function copyPublicFolder () 替换
// 原来的方法是复制public下所有的内容,因为增加了多html 所以不再直接复制过去(直接复制会覆盖html)
const copyPublicFolder = async() => {
 await cpy([`${paths.appPublic}/*.*`, `!${paths.appPublic}/*.html`], paths.appBuild);
 console.log('copy success!');
 // fs.copySync(paths.appPublic, paths.appBuild, {
 //  dereference: true,
 //  filter: file => file !== paths.appHtml,
 // });
}
登入後複製

以上修改後測試下yarn build

看下html對應產生對不對,正常是OK的。

增加功能

sass支援(此參考create-react-app的文檔,注意不要直接複製文檔裡面的"start": "react-scripts start" , "build": "react-scripts build",因為我們前面已經yarn eject,所以這樣用的話是有問題的可以自行體驗一下)

// 增加模块
yarn add node-sass-chokidar npm-run-all
// package.json删除配置
"start": "node scripts/start.js",
"build": "node scripts/build.js",
// package.json里面增加scripts
"build-css": "node-sass-chokidar src/scss -o src/css",
"watch-css": "npm run build-css && node-sass-chokidar src/scss -o src/css --watch --recursive",
"start-js": "node scripts/start.js",
"start": "npm-run-all -p watch-css start-js",
"build-js": "node scripts/build.js",
"build": "npm-run-all build-css build-js",
登入後複製

html引入模組

yarn add html-loader
<!--index.html-->
<%= require(&#39;html-loader!./partials/header.html&#39;) %>
登入後複製

html裡可以寫img支援打包到build,如果不寫的話是無法打包的,除非你在js裡面require

<img src="<%= require(&#39;../src/imgs/phone.png&#39;) %>" alt="">
登入後複製

後面還要取消hash之類的配置,這個就不記錄了。

相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

應該如何建構webpack react開發環境

#怎麼使用JS實作3des base64加密解密演算法

以上是如何對於create-react-app修改為多頁面支持的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1652
14
CakePHP 教程
1413
52
Laravel 教程
1304
25
PHP教程
1251
29
C# 教程
1224
24
釘釘怎麼修改群組裡的個人名稱_釘釘修改群組個人名稱方法 釘釘怎麼修改群組裡的個人名稱_釘釘修改群組個人名稱方法 Mar 29, 2024 pm 08:41 PM

1.首先打開釘釘。 2.打開群組聊,點選右上角的三個點。 3.找到我在本群的暱稱。 4.點選進入即可修改儲存。

如何更改使用者資料夾名稱:Win11教學 如何更改使用者資料夾名稱:Win11教學 Jan 09, 2024 am 10:34 AM

有些遊戲會自動安裝到使用者資料夾中,而且需要英文資料夾才可以,不過很多朋友不知道win11怎麼修改使用者資料夾名稱,其實我們只要修改使用者名稱就可以了。 win11修改使用者資料夾名稱:第一步,按下鍵盤「Win+R」組合鍵。第二步,在其中輸入「gpedit.msc」回車開啟群組原則編輯器。第三步,展開「windows設定」下的「安全設定「第四步,開啟「本機原則」中的「安全性選項」第五步,雙擊開啟右邊的「帳號:重新命名系統管理員帳號」原則。第六步,在下方輸入想要修改的資料夾名稱再點選「確定」儲存即可。修改使用者資料夾

修改win11視窗邊角為圓角的指南 修改win11視窗邊角為圓角的指南 Dec 31, 2023 pm 08:35 PM

很多朋友更新好win11系統後,發現win11的介面視窗採用了全新的圓角設計。但是有些人覺得不喜歡這個圓角設計,想要將它修改為曾經的介面,但卻不知道怎麼修改,下面就一起來看看吧。 win11怎麼修改圓角1、win11的圓角設計時內建的系統設置,目前無法修改。 2.所以大家如果不喜歡使用win11的圓角設計的話,可以等微軟提供修改的方法。 3.如果實在使用起來不習慣,還可以選擇退回曾經的win10系統。 4.如果大家不知道如何回退的話,可以查看本站提供的教學。 5.如果使用上方教學無法回退的話,還可

抖音藍V可以改名字嗎?企業抖音藍V號名稱修改步驟有哪些? 抖音藍V可以改名字嗎?企業抖音藍V號名稱修改步驟有哪些? Mar 22, 2024 pm 12:51 PM

抖音藍V認證是企業或品牌在抖音平台上的官方認證,有助於提升品牌形象和可信度。隨著企業發展策略的調整或品牌形象的更新,企業可能希望更改抖音藍V認證的名字。那麼,抖音藍V可以改名字嗎?答案是可以的。本文將詳細介紹企業抖音藍V號名稱修改的步驟。一、抖音藍V可以改名字嗎?抖音藍V帳號是可以改名字的。根據抖音官方規定,企業藍V認證帳號在滿足一定條件後,可以申請修改帳號名稱。一般來說,企業需要提供相關的證明資料,如營業執照、組織機構代碼證等,以證明修改名稱的合法性和必要性。二、企業抖音藍V號名稱修改步驟有哪

win11電源模式修改位置與方法 win11電源模式修改位置與方法 Dec 30, 2023 pm 05:25 PM

我們在win11系統中,可以透過修改電源模式的方法,來降低我們的電池消耗,或是提高我們的系統效能。設定方法非常簡單,只要找到電源選項就可以了,下面就跟著小編一起來看一下具體的操作流程吧。 win11在哪裡修改電源模式1、先點選工作列最左邊的按鈕,開啟開始功能表。 2、然後在開始功能表上方搜尋並開啟「控制面板」3、在控制面板中,可以找到「硬體和聲音」4、進入硬體和聲音,點擊電源選項下的「選擇電源計畫」5、然後在其中就可以修改電源模式了,可以選擇平衡、節能模式或展開隱藏附加計劃,選擇高性能模式。

加速pip來源,解決下載速度緩慢的難題 加速pip來源,解決下載速度緩慢的難題 Jan 17, 2024 am 10:18 AM

快速修改pip來源,解決下載速度慢的問題,需要具體程式碼範例導語:在使用Python開發過程中,我們經常需要使用pip來安裝各種第三方函式庫。然而,由於網路環境的限製或預設來源的問題,很多時候pip的下載速度會非常慢,這給我們的開發帶來了不便。因此,本文將介紹如何快速修改pip來源,以解決下載速度慢的問題,並提供具體的程式碼範例。一、問題分析在使用pip下載第三方函式庫時,我

PyCharm背景色彩調整技巧:快速掌握! PyCharm背景色彩調整技巧:快速掌握! Feb 03, 2024 am 09:39 AM

快速掌握PyCharm背景顏色的修改技巧,需要具體程式碼範例近年來,Python語言在程式開發領域愈發流行,而PyCharm作為一款整合開發環境(IDE),被廣大開發者所喜愛和使用。在PyCharm中,經常會有一些開發者對IDE的介面進行個人化定制,包括背景顏色的修改。本文將介紹PyCharm背景顏色修改的技巧,並給出具體的程式碼範例,幫助讀者快速掌握這項技能。

如何變更Windows 10工作列的顏色 如何變更Windows 10工作列的顏色 Jan 01, 2024 pm 09:05 PM

win10工作列顏色修改起來非常簡單,但是很多用戶發現設定不了,其實非常的簡單,只要在電腦的個人化裡選擇自己喜愛的顏色就可以了,要是改變不了顏色的注意詳細的設定哦。 win10工作列顏色怎麼改第一步:右鍵桌面-點選個人化第二步:顏色區域自訂第三步:選擇喜歡的顏色PS:如果你無法改變顏色,可以點選顏色->選擇顏色->自訂->預設windows模式,選擇深色即可。

See all articles