create-react-app修改為多頁(yè)面支持的方法
新公司前端就我一個(gè)，目前個(gè)人選型用react作技術(shù)棧開(kāi)發(fā)前端h5頁(yè)面。最近做一個(gè)需求是pc頁(yè)面需要seo的，后端是Java開(kāi)發(fā)，又不想自己用ssr做seo渲染，只好寫(xiě)html給java大神改成jsp了。然而這個(gè)又需要搞一套工作流太麻煩（太懶了），所以直接拿來(lái)create-react-app的工作流進(jìn)行修改了。附上Git地址。
修改dev流程
在已經(jīng)通過(guò)create-react-app生成項(xiàng)目的基礎(chǔ)下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內(nèi)容-->
// 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 這個(gè)值-->
...htmlPluginsAray,
增加復(fù)制模塊（yarn add cpy）
修改scripts/build.js
// function copyPublicFolder () 替換
// 原來(lái)的方法是復(fù)制public下所有的內(nèi)容，因?yàn)樵黾恿硕鄅tml 所以不再直接復(fù)制過(guò)去(直接復(fù)制會(huì)覆蓋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,
// });
}
以上修改后測(cè)試下yarn build
查看下html對(duì)應(yīng)生成對(duì)不對(duì)，正常是OK的。
增加功能
sass支持(此參考create-react-app的文檔，注意不要直接復(fù)制文檔里面的"start": "react-scripts start", "build": "react-scripts build",因?yàn)槲覀兦懊嬉呀?jīng)yarn eject,所以這樣用的話(huà)是有問(wèn)題的可以自行體驗(yàn)一下)
// 增加模塊 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里可以寫(xiě)img支持打包到build，如果不寫(xiě)的話(huà)是無(wú)法打包的，除非你在js里面require
<img src="<%= require('../src/imgs/phone.png') %>" alt="">
后面還要取消hash之類(lèi)的配置，這個(gè)就不記錄了。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Redux DevTools不能顯示數(shù)據(jù)問(wèn)題
這篇文章主要介紹了Redux DevTools不能顯示數(shù)據(jù)問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
使用React+ts實(shí)現(xiàn)無(wú)縫滾動(dòng)的走馬燈詳細(xì)過(guò)程
這篇文章主要給大家介紹了關(guān)于使用React+ts實(shí)現(xiàn)無(wú)縫滾動(dòng)的走馬燈詳細(xì)過(guò)程,文中給出了詳細(xì)的代碼示例以及圖文教程,對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-08-08
react antd實(shí)現(xiàn)動(dòng)態(tài)增減表單
antd是react流行的ui框架庫(kù)，本文主要介紹了react antd實(shí)現(xiàn)動(dòng)態(tài)增減表單，分享給大家，感興趣的小伙伴們可以參考一下2021-06-06
React實(shí)現(xiàn)阿里云OSS上傳文件的示例
這篇文章主要介紹了React實(shí)現(xiàn)阿里云OSS上傳文件的示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
下面小編就為大家?guī)?lái)一篇淺談React 屬性和狀態(tài)的一些總結(jié)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11
這篇文章主要介紹了在create-react-app中使用sass的方法示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
本文我們將介紹 React中組件的類(lèi)別，以及如何創(chuàng)建和使用組件。具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
React文字展開(kāi)收起組件的實(shí)現(xiàn)示例
本文主要介紹了React文字展開(kāi)收起組件的實(shí)現(xiàn)示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
react組件memo useMemo useCallback使用區(qū)別示例
這篇文章主要為大家介紹了react組件memo useMemo useCallback使用區(qū)別的示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
基于Cloud?Studio構(gòu)建React完成點(diǎn)餐H5頁(yè)面(騰訊云?Cloud?Studio?實(shí)戰(zhàn)訓(xùn)練營(yíng))
最近也是有機(jī)會(huì)參與到了騰訊云舉辦的騰訊云Cloud Studio實(shí)戰(zhàn)訓(xùn)練營(yíng)，借此了解了騰訊云Cloud?Studio產(chǎn)品,下面就來(lái)使用騰訊云Cloud?Studio做一個(gè)實(shí)戰(zhàn)案例來(lái)深入了解該產(chǎn)品的優(yōu)越性吧,感興趣的朋友跟隨小編一起看看吧2023-08-08