create-react-app修改为多页面支持的方法

来源：动视网责编：小采时间：2020-11-27 22:14:36

create-react-app修改为多页面支持的方法

create-react-app修改为多页面支持的方法:新公司前端就我一个，目前个人选型用react作技术栈开发前端h5页面。最近做一个需求是pc页面需要seo的，后端是Java开发，又不想自己用ssr做seo渲染，只好写html给java大神改成jsp了。然而这个又需要搞一套工作流太麻烦（太懒了），所以直接拿来create-

推荐度：

点击下载本文 文档为doc格式

导读create-react-app修改为多页面支持的方法:新公司前端就我一个，目前个人选型用react作技术栈开发前端h5页面。最近做一个需求是pc页面需要seo的，后端是Java开发，又不想自己用ssr做seo渲染，只好写html给java大神改成jsp了。然而这个又需要搞一套工作流太麻烦（太懒了），所以直接拿来create-

新公司前端就我一个，目前个人选型用react作技术栈开发前端h5页面。最近做一个需求是pc页面需要seo的，后端是Java开发，又不想自己用ssr做seo渲染，只好写html给java大神改成jsp了。然而这个又需要搞一套工作流太麻烦（太懒了），所以直接拿来create-react-app的工作流进行修改了。附上Git地址。

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

create-react-app修改为多页面支持的方法

推荐度：

点击下载本文 文档为doc格式

标签：修改页面 create

热门焦点

create-react-app修改为多页面支持的方法

create-react-app修改为多页面支持的方法

create-react-app修改为多页面支持的方法

最新推荐

猜你喜欢

热门推荐