如何對於create-react-app修改為多頁面支持
這次給大家帶來如何對於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('html-loader!./partials/header.html') %>
html裡可以寫img支援打包到build,如果不寫的話是無法打包的,除非你在js裡面require
<img src="<%= require('../src/imgs/phone.png') %>" alt="">
後面還要取消hash之類的配置,這個就不記錄了。
相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
推薦閱讀:
以上是如何對於create-react-app修改為多頁面支持的詳細內容。更多資訊請關注PHP中文網其他相關文章!

熱AI工具

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

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

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

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

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

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

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

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

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

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

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

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

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

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