如何对于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