Rumah hujung hadapan web tutorial js 如何对于create-react-app修改为多页面支持

如何对于create-react-app修改为多页面支持

May 28, 2018 pm 03:54 PM
Semak semula

这次给大家带来如何对于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
Salin selepas log masuk

修改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,
Salin selepas log masuk

修改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
Salin selepas log masuk

以上就是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,
Salin selepas log masuk

增加复制模块(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,
 // });
}
Salin selepas log masuk

以上修改后测试下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",
Salin selepas log masuk

html引入模块

yarn add html-loader
<!--index.html-->
<%= require(&#39;html-loader!./partials/header.html&#39;) %>
Salin selepas log masuk

html里可以写img支持打包到build,如果不写的话是无法打包的,除非你在js里面require

<img src="<%= require(&#39;../src/imgs/phone.png&#39;) %>" alt="">
Salin selepas log masuk

后面还要取消hash之类的配置,这个就不记录了。

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

应该如何搭建webpack+react开发环境

怎样使用JS实现3des+base64加密解密算法

Atas ialah kandungan terperinci 如何对于create-react-app修改为多页面支持. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Cara Membuka Segala -galanya Di Myrise
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Cara menukar nama peribadi dalam kumpulan di DingTalk_Cara mengubah suai nama peribadi dalam kumpulan di DingTalk Cara menukar nama peribadi dalam kumpulan di DingTalk_Cara mengubah suai nama peribadi dalam kumpulan di DingTalk Mar 29, 2024 pm 08:41 PM

1. Mula-mula buka DingTalk. 2. Buka sembang kumpulan dan klik tiga titik di penjuru kanan sebelah atas. 3. Cari nama panggilan saya dalam kumpulan ini. 4. Klik untuk masuk untuk mengubah suai dan menyimpan.

Cara Menukar Nama Folder Pengguna: Tutorial Win11 Cara Menukar Nama Folder Pengguna: Tutorial Win11 Jan 09, 2024 am 10:34 AM

Sesetengah permainan akan dipasang secara automatik ke dalam folder pengguna dan memerlukan folder Bahasa Inggeris Namun, ramai rakan tidak tahu cara menukar nama folder pengguna dalam win11. Ubah suai nama folder pengguna dalam win11: Langkah pertama ialah menekan kombinasi kekunci "Win+R" pada papan kekunci. Dalam langkah kedua, masukkan "gpedit.msc" dan tekan Enter untuk membuka Editor Dasar Kumpulan. Langkah 3: Kembangkan "Tetapan Keselamatan" di bawah "Tetapan Windows" Langkah 4: Buka "Pilihan Keselamatan" dalam "Dasar Tempatan" Langkah 5: Klik dua kali untuk membuka dasar "Akaun: Namakan Semula Akaun Pentadbir Sistem" di sebelah kanan. Langkah 6: Masukkan nama folder yang anda ingin ubah suai di bawah dan klik "OK" untuk menyimpan. Ubah suai folder pengguna

Bolehkah Douyin Blue V menukar namanya? Apakah langkah-langkah untuk menukar nama akaun korporat Douyin Blue V? Bolehkah Douyin Blue V menukar namanya? Apakah langkah-langkah untuk menukar nama akaun korporat Douyin Blue V? Mar 22, 2024 pm 12:51 PM

Pensijilan Douyin Blue V ialah pensijilan rasmi syarikat atau jenama pada platform Douyin, yang membantu meningkatkan imej dan kredibiliti jenama. Dengan pelarasan strategi pembangunan korporat atau kemas kini imej jenama, syarikat mungkin ingin menukar nama pensijilan Douyin Blue V. Jadi, bolehkah Douyin Blue V menukar namanya? Jawapannya ya. Artikel ini akan memperkenalkan secara terperinci langkah-langkah untuk mengubah suai nama akaun Douyin Blue V perusahaan. 1. Bolehkah Douyin Blue V menukar namanya? Anda boleh menukar nama akaun Douyin Blue V. Menurut peraturan rasmi Douyin, akaun diperakui Blue V korporat boleh memohon untuk menukar nama akaun mereka selepas memenuhi syarat tertentu. Secara umumnya, perusahaan perlu menyediakan bahan sokongan yang berkaitan, seperti lesen perniagaan, sijil kod organisasi, dll., untuk membuktikan kesahihan dan keperluan menukar nama. 2. Apakah langkah-langkah untuk mengubah suai nama akaun korporat Douyin Blue V?

Petua pengubahsuaian masa tidur Win10 didedahkan Petua pengubahsuaian masa tidur Win10 didedahkan Mar 08, 2024 pm 06:39 PM

Petua Pengubahsuaian Masa Tidur Win10 Didedahkan Sebagai salah satu sistem pengendalian yang digunakan secara meluas pada masa ini, Windows 10 mempunyai fungsi tidur untuk membantu pengguna menjimatkan kuasa dan melindungi skrin apabila tidak menggunakan komputer. Walau bagaimanapun, kadangkala masa tidur lalai tidak memenuhi keperluan pengguna, jadi amat penting untuk mengetahui cara mengubah suai masa tidur Win10. Artikel ini akan mendedahkan petua untuk mengubah suai masa tidur Win10, membolehkan anda menyesuaikan tetapan tidur sistem dengan mudah. 1. Ubah suai masa tidur Win10 melalui "Tetapan" Pertama, pembetulan yang paling mudah

Lokasi dan kaedah pengubahsuaian mod kuasa Win11 Lokasi dan kaedah pengubahsuaian mod kuasa Win11 Dec 30, 2023 pm 05:25 PM

Dalam sistem win11, kami boleh mengurangkan penggunaan bateri kami atau meningkatkan prestasi sistem kami dengan mengubah suai mod kuasa. Kaedah tetapan adalah sangat mudah, cuma cari pilihan kuasa Mari ikut editor untuk melihat proses operasi tertentu. Cara menukar mod kuasa dalam win11 1. Mula-mula klik butang paling kiri pada bar tugas untuk membuka menu mula. 2. Kemudian cari dan buka "Panel Kawalan" di atas menu mula 3. Dalam panel kawalan, anda boleh menemui "Perkakasan dan Bunyi" 4. Masukkan Perkakasan dan Bunyi, klik "Pilih pelan kuasa" di bawah Pilihan Kuasa 5. Kemudian dalam Anda boleh mengubah suai mod kuasa Anda boleh memilih mod seimbang, penjimatan tenaga atau mengembangkan pelan tambahan tersembunyi dan memilih mod berprestasi tinggi.

Panduan untuk mengubah suai sudut tingkap win11 kepada sudut bulat Panduan untuk mengubah suai sudut tingkap win11 kepada sudut bulat Dec 31, 2023 pm 08:35 PM

Selepas mengemas kini sistem win11, ramai rakan mendapati tetingkap antara muka win11 menggunakan reka bentuk sudut bulat baharu. Tetapi sesetengah orang tidak menyukai reka bentuk sudut bulat ini dan mahu mengubah suainya kepada antara muka sebelumnya, tetapi mereka tidak tahu cara mengubah suainya. Mari lihat di bawah. Cara mengubah suai sudut bulat dalam win11 1. Reka bentuk sudut bulat win11 ialah tetapan sistem terbina dalam yang tidak boleh diubah suai pada masa ini. 2. Jadi jika anda tidak suka menggunakan reka bentuk sudut bulat win11, anda boleh menunggu untuk Microsoft menyediakan kaedah pengubahsuaian. 3. Jika anda benar-benar tidak biasa, anda juga boleh memilih untuk kembali ke sistem win10 sebelum ini. 4. Jika anda tidak tahu bagaimana untuk kembali, anda boleh menyemak tutorial yang disediakan di laman web ini. 5. Jika anda tidak boleh kembali menggunakan tutorial di atas, anda masih boleh

Petua pelarasan warna latar belakang PyCharm: Kuasai dengan cepat! Petua pelarasan warna latar belakang PyCharm: Kuasai dengan cepat! Feb 03, 2024 am 09:39 AM

Untuk menguasai kemahiran mengubah suai warna latar belakang PyCharm dengan cepat, anda memerlukan contoh kod khusus Dalam beberapa tahun kebelakangan ini, bahasa Python telah menjadi semakin popular dalam bidang pembangunan program, dan PyCharm, sebagai persekitaran pembangunan bersepadu (IDE). , disukai dan digunakan oleh majoriti pembangun. Dalam PyCharm, sesetengah pembangun sering memperibadikan antara muka IDE, termasuk menukar warna latar belakang. Artikel ini akan memperkenalkan teknik mengubah suai warna latar belakang PyCharm dan memberikan contoh kod khusus untuk membantu pembaca menguasai kemahiran ini dengan cepat.

Percepatkan sumber pip dan selesaikan masalah kelajuan muat turun yang perlahan Percepatkan sumber pip dan selesaikan masalah kelajuan muat turun yang perlahan Jan 17, 2024 am 10:18 AM

Ubah suai sumber pip dengan cepat untuk menyelesaikan masalah kelajuan muat turun yang perlahan Contoh kod khusus diperlukan Pengenalan: Semasa proses pembangunan menggunakan Python, kita sering perlu menggunakan pip untuk memasang pelbagai perpustakaan pihak ketiga. Walau bagaimanapun, disebabkan oleh had persekitaran rangkaian atau isu sumber lalai, kelajuan muat turun pip selalunya sangat perlahan, yang membawa kesulitan kepada pembangunan kami. Oleh itu, artikel ini akan memperkenalkan cara mengubah suai sumber pip dengan cepat untuk menyelesaikan masalah kelajuan muat turun yang perlahan, dan memberikan contoh kod khusus. 1. Analisis Masalah Apabila menggunakan pip untuk memuat turun perpustakaan pihak ketiga, I

See all articles