java中的接口是类吗
298
2023-02-04
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,
chuhttp://nks:[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 path = require('path');
const htmlPluginsAray = paths.htmlArray.map((v)=> {
const fileParse = path.parse(v);
return {
from: new RegExp(`^\/${fileParse.base}`), to: `/build/${fileParse.base}`
};
});
rewrites: htmlPluginsAray
以上就是dev模式下的修改了,yarn start一下试试。
修改product流程
修改config/
//增加
// 遍历html
const entryObj = {};
const htmlPluginsAray = paths.htmlArray.map((v)=> {
const fileParse = path.parse(v);
entryObj[fileParse.name] = [
require.resolve('./polyfills'),
`${paths.appSrc}/${fileParse.name}.js`,
];
console.log(v);
return new HtmlWebpackPlugin({
inject: true,
chunks:[fileParse.name],
template: `${paths.appPublic}/${fileParse.base}`,
filename: fileParse.base
})
});
entry: entryObj,
...htmlPluginsAray,
增加复制模块(yarn add cpy)
修改scripts/build.js
// function copyPublicFolder () 替换
// 原来的方法是复制public下所有的内容,因为增加了多html 所以不再直接复制过去(直接复制会覆盖html)
const copyPublicFolder = async() => {
await cpy([`${paths.appPublic}/*.*`, `!${paths.appPublic}/*.html`], paths.appBuild);
console.log('copy success!');
// fs.copySync(paths.appPublic, paths.appBuild, {
// dereYYWSwkTifcference: true,
// filter: file => file !== paths.appHtml,
// });
}
以上修改后测试下yarn build
查看下html对应生成对不对,http://正常是OK的。
增加功能
sass支持(此参考create-react-app的文档,注意不要直接复制文档里面的"start": "react-scripts start", "build": "react-scripts build",因为我们前面已经yarn eject,所以这样用的话是有问题的可以自行体验一下)
// 增加模块
yarn add node-sass-chokidar npm-run-all
// package.json删除配置
"start": "node scripts/start.js",
"build": "node scripts/build.js",
// package.json里面增加scripts
"build-css": "node-sass-chokidar src/scss -o src/css",
"watch-css": "npm run build-css && node-sass-chokidar src/scss -o src/css --watch --recursive",
"start-js": "node scripts/start.js",
"start": "npm-run-all -p watch-css start-js",
"build-js": "node scripts/build.js",
"build": "npm-run-all build-css build-js",
html引入模块
yarn add html-loader
<%= require('html-loader!./partials/header.html') %>
html里可以写img支持打包到build,如果不写的话是无法打包的,除非你在js里面require
后面还要取消hash之类的配置,这个就不记录了。
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。
发表评论
暂时没有评论,来抢沙发吧~