新公司前端就我一个,目前个人选型用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
修改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
// new HtmlWebpackPlugin({
// inject: true,// chunks: ["index"],// template: paths.appPublic + '/index.html',// }),...htmlPluginsAray,
修改config/webpackDevServer.config.js
const fileParse = path.parse(v);
return {
from: new RegExp(
^\/${fileParse.base}
),to: /build/${fileParse.base}
};
});
rewrites: htmlPluginsAray
以上就是dev模式下的修改了,yarn start一下试试。
修改product流程
修改config/
entryObj[fileParse.name] = [
require.resolve('./polyfills'),];
console.log(v);
return new HtmlWebpackPlugin({
inject: true,filename: fileParse.base
})
});
entry: entryObj,
...htmlPluginsAray,
增加复制模块(yarn add cpy
)
修改scripts/build.js
以上修改后测试下yarn build
查看下html对应生成对不对,正常是OK的。
增加功能
sass支持(此参考create-react-app的文档,注意不要直接复制文档里面的"start": "react-scripts start","build": "react-scripts build",因为我们前面已经yarn eject,所以这样用的话是有问题的可以自行体验一下)
html引入模块
html里可以写img支持打包到build,如果不写的话是无法打包的,除非你在js里面require
后面还要取消hash之类的配置,这个就不记录了。