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

2023-09-12 16:50:04 228

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

修改dev流程

在已经通过create-react-app生成项目的基础下yarnruneject

yarnaddglobby用于查看html文件

修改config/paths.js

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

修改config/webpack.config.dev.js



//遍历html
constentryObj={};
consthtmlPluginsAray=paths.htmlArray.map((v)=>{
constfileParse=path.parse(v);

entryObj[fileParse.name]=[
require.resolve('./polyfills'),
require.resolve('react-dev-utils/webpackHotDevClient'),
`${paths.appSrc}/${fileParse.name}.js`,,
]
returnnewHtmlWebpackPlugin({
inject:true,
chunks:[fileParse.name],
template:`${paths.appPublic}/${fileParse.base}`,
filename:fileParse.base
})
});

entry：entryObj

//newHtmlWebpackPlugin({
//inject:true,
//chunks:["index"],
//template:paths.appPublic+'/index.html',
//}),
...htmlPluginsAray,

修改config/webpackDevServer.config.js

//增加
constpath=require('path');

consthtmlPluginsAray=paths.htmlArray.map((v)=>{
constfileParse=path.parse(v);
return{
from:newRegExp(`^\/${fileParse.base}`),to:`/build/${fileParse.base}`
};
});

rewrites:htmlPluginsAray

以上就是dev模式下的修改了，yarnstart一下试试。

修改product流程

修改config/

//增加
//遍历html
constentryObj={};
consthtmlPluginsAray=paths.htmlArray.map((v)=>{
constfileParse=path.parse(v);

entryObj[fileParse.name]=[
require.resolve('./polyfills'),
`${paths.appSrc}/${fileParse.name}.js`,
];
console.log(v);
returnnewHtmlWebpackPlugin({
inject:true,
chunks:[fileParse.name],
template:`${paths.appPublic}/${fileParse.base}`,
filename:fileParse.base
})
});

entry:entryObj,

...htmlPluginsAray,

增加复制模块（yarnaddcpy）

修改scripts/build.js

//functioncopyPublicFolder()替换
//原来的方法是复制public下所有的内容，因为增加了多html所以不再直接复制过去(直接复制会覆盖html)
constcopyPublicFolder=async()=>{
awaitcpy([`${paths.appPublic}/*.*`,`!${paths.appPublic}/*.html`],paths.appBuild);
console.log('copysuccess!');
//fs.copySync(paths.appPublic,paths.appBuild,{
//dereference:true,
//filter:file=>file!==paths.appHtml,
//});
}

以上修改后测试下yarnbuild

查看下html对应生成对不对，正常是OK的。

增加功能

sass支持(此参考create-react-app的文档，注意不要直接复制文档里面的"start":"react-scriptsstart","build":"react-scriptsbuild",因为我们前面已经yarneject,所以这样用的话是有问题的可以自行体验一下)

//增加模块
yarnaddnode-sass-chokidarnpm-run-all
//package.json删除配置
"start":"nodescripts/start.js",
"build":"nodescripts/build.js",
//package.json里面增加scripts
"build-css":"node-sass-chokidarsrc/scss-osrc/css",
"watch-css":"npmrunbuild-css&&node-sass-chokidarsrc/scss-osrc/css--watch--recursive",
"start-js":"nodescripts/start.js",
"start":"npm-run-all-pwatch-cssstart-js",
"build-js":"nodescripts/build.js",
"build":"npm-run-allbuild-cssbuild-js",

html引入模块

yarnaddhtml-loader

<%=require('html-loader!./partials/header.html')%>

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

"alt="">

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

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

热门推荐

随机推荐