create-react-app修改為多頁面支持的方法

更新時間：2018年05月17日 14:05:27 投稿：zx

本篇文章主要介紹了create-react-app修改為多頁面支持的方法，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

新公司前端就我一個，目前個人選型用react作技術棧開發(fā)前端h5頁面。最近做一個需求是pc頁面需要seo的，后端是Java開發(fā)，又不想自己用ssr做seo渲染，只好寫html給java大神改成jsp了。然而這個又需要搞一套工作流太麻煩（太懶了），所以直接拿來create-react-app的工作流進行修改了。附上Git地址。

修改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之類的配置，這個就不記錄了。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

淺析React中的受控組件和非受控組件
具體來說這是一種react非受控組件，其狀態(tài)是在input的react內部控制，不受調用者控制。可以使用受控組件來實現。下面就說說這個React中的受控組件與非受控組件的相關知識，感興趣的朋友一起看看吧
2021-05-05
React?Hooks鉤子中API的使用示例分析
在react類組件（class）寫法中，有setState和生命周期對狀態(tài)進行管理，但是在函數組件中不存在這些，故引入hooks（版本：>=16.8），使開發(fā)者在非class的情況下使用更多react特性
2022-08-08
React類組件中super()和super(props)的區(qū)別詳解
這篇文章給大家詳細介紹了React類組件中super()和super(props)有什么區(qū)別,文中通過代碼示例給大家介紹的非常詳細,對大家的學習或工作有一定的幫助,需要的朋友可以參考下
2024-01-01
詳解如何在React中監(jiān)聽鼠標事件
React可以通過使用React事件系統(tǒng)來監(jiān)聽鼠標事件,您可以在React組件中通過使用特定的事件處理函數來注冊和處理鼠標事件,本文小編講給大家詳細介紹一下如何在React中監(jiān)聽鼠標事件,需要的朋友可以參考下
2023-09-09
解決React報錯You provided a `checked` prop&n
這篇文章主要為大家介紹了React報錯You provided a `checked` prop to a form field的解決方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-12-12
教你在react中創(chuàng)建自定義hooks
簡單來說就是使用自定義hook可以將某些組件邏輯提取到可重用的函數中。自定義hook是一個從use開始的調用其他hook的Javascript函數，下面看下react中創(chuàng)建自定義hooks的相關知識，感興趣的朋友一起看看吧
2021-11-11
深入淺析react native es6語法
這篇文章主要介紹了深入淺析react native es6語法的相關資料,需要的朋友可以參考下
2015-12-12
React Js 微信禁止復制鏈接分享禁止隱藏右上角菜單功能
這篇文章主要介紹了React Js 微信禁止復制鏈接，分享，禁止隱藏右上角菜單的解決代碼,需要的朋友可以參考下
2017-05-05
React實現前端選區(qū)的示例代碼
本文主要介紹了React實現前端選區(qū)的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2023-05-05
淺談react+es6+webpack的基礎配置
下面小編就為大家?guī)硪黄獪\談react+es6+webpack的基礎配置。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-08-08