Comment modifier create-react-app pour prendre en charge plusieurs pages

Cette fois, je vais vous montrer comment modifier create-react-app pour prendre en charge plusieurs pages. Quelles sont les précautions pour modifier create-react-app pour prendre en charge plusieurs pages. cas pratique. Jetons un coup d’oeil.

Modifier le processus de développement

Basé sur le projet généré via create-react-appyarn run eject

yarn add globby est utilisé pour afficher le fichier html

Modifier config/paths.js

//遍历public下目录下的html文件生成arry
const globby = require('globby');
const htmlArray = globby.sync([path.join(resolveApp('public'), '/*.html')]);
//module.exports 里面增加
htmlArray

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

Modifier 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

Ce qui précède sont les modifications en mode dev, essayez fil start.

Modifier le processus produit

Modifier la configuration/

//增加
// 遍历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,

Ajouter un module de copie (yarn add cpy)

Modifier les 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,
 // });
}

Après la modification ci-dessus, testez yarn build

pour voir si le html correspondant est généré correctement.

Fonction ajoutée

support sass (se référer au document de create-react-app pour cela, attention à ne pas copier directement le "start" dans le document : "react-scripts start", "build": "react-scripts build", car nous avons déjà utilisé l'éjection de fil, donc il y a des problèmes si vous l'utilisez de cette façon. Vous pouvez l'essayer vous-même)

// 增加模块
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",

module d'importation HTML

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

Vous pouvez écrire img en HTML pour prendre en charge l'empaquetage dans la construction. Si vous ne l'écrivez pas, vous ne pouvez pas l'empaqueter, sauf si vous en avez besoin

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

en js puis annulez le hachage et les autres configurations. Cela ne fonctionnera pas.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment créer un environnement de développement webpack+react

Comment utiliser JS pour implémenter 3des+ Algorithme de cryptage et de décryptage base64

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!