create-react-app修改為多頁(yè)面支持的方法
新公司前端就我一個(gè)，目前個(gè)人選型用react作技術(shù)棧開(kāi)發(fā)前端h5頁(yè)面。最近做一個(gè)需求是pc頁(yè)面需要seo的，后端是Java開(kāi)發(fā)，又不想自己用ssr做seo渲染，只好寫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,所以這樣用的話是有問(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里可以寫img支持打包到build，如果不寫的話是無(wú)法打包的，除非你在js里面require
<img src="<%= require('../src/imgs/phone.png') %>" alt="">
后面還要取消hash之類的配置，這個(gè)就不記錄了。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
具體來(lái)說(shuō)這是一種react非受控組件，其狀態(tài)是在input的react內(nèi)部控制，不受調(diào)用者控制?？梢允褂檬芸亟M件來(lái)實(shí)現(xiàn)。下面就說(shuō)說(shuō)這個(gè)React中的受控組件與非受控組件的相關(guān)知識(shí)，感興趣的朋友一起看看吧2021-05-05
在react類組件（class）寫法中，有setState和生命周期對(duì)狀態(tài)進(jìn)行管理，但是在函數(shù)組件中不存在這些，故引入hooks（版本：>=16.8），使開(kāi)發(fā)者在非class的情況下使用更多react特性2022-08-08
React類組件中super()和super(props)的區(qū)別詳解
這篇文章給大家詳細(xì)介紹了React類組件中super()和super(props)有什么區(qū)別,文中通過(guò)代碼示例給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-01-01
詳解如何在React中監(jiān)聽(tīng)鼠標(biāo)事件
React可以通過(guò)使用React事件系統(tǒng)來(lái)監(jiān)聽(tīng)鼠標(biāo)事件,您可以在React組件中通過(guò)使用特定的事件處理函數(shù)來(lái)注冊(cè)和處理鼠標(biāo)事件,本文小編講給大家詳細(xì)介紹一下如何在React中監(jiān)聽(tīng)鼠標(biāo)事件,需要的朋友可以參考下2023-09-09
解決React報(bào)錯(cuò)You provided a `checked` prop&n
這篇文章主要為大家介紹了React報(bào)錯(cuò)You provided a `checked` prop to a form field的解決方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
簡(jiǎn)單來(lái)說(shuō)就是使用自定義hook可以將某些組件邏輯提取到可重用的函數(shù)中。 自定義hook是一個(gè)從use開(kāi)始的調(diào)用其他hook的Javascript函數(shù)，下面看下react中創(chuàng)建自定義hooks的相關(guān)知識(shí)，感興趣的朋友一起看看吧2021-11-11
這篇文章主要介紹了深入淺析react native es6語(yǔ)法的相關(guān)資料,需要的朋友可以參考下2015-12-12
React Js 微信禁止復(fù)制鏈接分享禁止隱藏右上角菜單功能
這篇文章主要介紹了React Js 微信禁止復(fù)制鏈接，分享，禁止隱藏右上角菜單的解決代碼,需要的朋友可以參考下2017-05-05
React實(shí)現(xiàn)前端選區(qū)的示例代碼
本文主要介紹了React實(shí)現(xiàn)前端選區(qū)的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
下面小編就為大家?guī)?lái)一篇淺談react+es6+webpack的基礎(chǔ)配置。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08