如何对于create-react-app修改为多页面支持
这次给大家带来如何对于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
修改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之类的配置,这个就不记录了。
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
Atas ialah kandungan terperinci 如何对于create-react-app修改为多页面支持. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

AI Hentai Generator
Menjana ai hentai secara percuma.

Artikel Panas

Alat panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas



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.

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

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 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

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.

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

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.

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
