新公司前端就我一个，目前个人选型用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之类的配置，这个就不记录了。
原文链接：https://www.f2er.com/js/32267.html