怎么將create-react-app修改為多頁面支持-創(chuàng)新互聯(lián)

今天就跟大家聊聊有關(guān)怎么將create-react-app修改為多頁面支持，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

沂水網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián)建站,沂水網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為沂水上千多家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站建設(shè)公司要多少錢，請找那個(gè)售后服務(wù)好的沂水做網(wǎng)站的公司定做！

修改dev流程

在已經(jīng)通過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 () 替換
// 原來的方法是復(fù)制public下所有的內(nèi)容，因?yàn)樵黾恿硕鄅tml 所以不再直接復(fù)制過去(直接復(fù)制會覆蓋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對應(yīng)生成對不對，正常是OK的。

增加功能

sass支持(此參考create-react-app的文檔，注意不要直接復(fù)制文檔里面的"start": "react-scripts start", "build": "react-scripts build",因?yàn)槲覀兦懊嬉呀?jīng)yarn eject,所以這樣用的話是有問題的可以自行體驗(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，如果不寫的話是無法打包的，除非你在js里面require

<img src="<%= require('../src/imgs/phone.png') %>" alt="">

看完上述內(nèi)容，你們對怎么將create-react-app修改為多頁面支持有進(jìn)一步的了解嗎？如果還想了解更多知識或者相關(guān)內(nèi)容，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。

本文標(biāo)題：怎么將create-react-app修改為多頁面支持-創(chuàng)新互聯(lián)
標(biāo)題路徑：http://bm7419.com/article16/dsesdg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供域名注冊、云服務(wù)器、企業(yè)網(wǎng)站制作、營銷型網(wǎng)站建設(shè)、靜態(tài)網(wǎng)站、網(wǎng)站策劃

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容