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


Posted in Javascript onMay 17, 2018

新公司前端就我一个,目前个人选型用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

以上就是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-->
 entry: entryObj,
<!--替换 new HtmlWebpackPlugin 这个值-->
...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, {
 //  dereference: true,
 //  filter: file => file !== paths.appHtml,
 // });
}

以上修改后测试下yarn build

查看下html对应生成对不对,正常是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
<!--index.html-->
<%= require('html-loader!./partials/header.html') %>

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

<img src="<%= require('../src/imgs/phone.png') %>" alt="">

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
非常不错的一个javascript 类
Nov 07 Javascript
javascript获得网页窗口实际大小的示例代码
Sep 21 Javascript
JS网页图片按比例自适应缩放实现方法
Jan 15 Javascript
JS+CSS实现淡入式焦点图片幻灯切换效果的方法
Feb 26 Javascript
使用Meteor配合Node.js编写实时聊天应用的范例
Jun 23 Javascript
JavaScript中this的用法实例分析
Dec 19 Javascript
Angular使用Md5加密的解决方法
Sep 16 Javascript
VueJs使用Amaze ui调整列表和内容页面
Nov 30 Javascript
AngularJS对动态增加的DOM实现ng-keyup事件示例
Mar 12 Javascript
通过layer实现可输入的模态框的例子
Sep 27 Javascript
vue element-ui中table合计指定列求和实例
Nov 02 Javascript
vue 通过base64实现图片下载功能
Dec 19 Vue.js
vue 不使用select实现下拉框功能(推荐)
May 17 #Javascript
微信小程序自定义多选事件的实现代码
May 17 #Javascript
vue 标签属性数据绑定和拼接的实现方法
May 17 #Javascript
JS实现的判断方法、变量是否存在功能示例
Mar 28 #Javascript
vue 路由嵌套高亮问题的解决方法
May 17 #Javascript
JS实现字符串中去除指定子字符串方法分析
May 17 #Javascript
结合Vue控制字符和字节的显示个数的示例
May 17 #Javascript
You might like
IIS+PHP+MySQL+Zend配置 (视频教程)
2006/12/13 PHP
ThinkPHP模板引擎之导入资源文件方法详解
2014/06/18 PHP
php7 新增功能实例总结
2020/05/25 PHP
Flash对联广告的关闭按钮讨论
2007/01/30 Javascript
jquery $.each() 使用小探
2013/08/23 Javascript
javascript常见用法总结
2014/05/22 Javascript
用javascript关闭本窗口不弹出询问框的方法
2014/09/12 Javascript
JavaScript程序开发之JS代码放置的位置
2016/01/15 Javascript
AngularJS  $on、$emit和$broadcast的使用
2016/09/05 Javascript
JavaScript中的一些隐式转换和总结(推荐)
2017/12/22 Javascript
vue2.0 父组件给子组件传递数据的方法
2018/01/15 Javascript
Bootstrap模态对话框用法简单示例
2018/08/31 Javascript
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
2018/12/06 jQuery
es6基础学习之解构赋值
2018/12/10 Javascript
[01:25]2015国际邀请赛最佳短片奖——斧王《拆塔英雄:天赋异禀》
2015/09/22 DOTA
用tensorflow实现弹性网络回归算法
2018/01/09 Python
django.db.utils.ProgrammingError: (1146, u“Table‘’ doesn’t exist”)问题的解决
2018/07/13 Python
Pandas:Series和DataFrame删除指定轴上数据的方法
2018/11/10 Python
python最小生成树kruskal与prim算法详解
2019/01/17 Python
python实现诗歌游戏(类继承)
2019/02/26 Python
利用PyCharm Profile分析异步爬虫效率详解
2019/05/08 Python
python中pip的使用和修改下载源的方法
2019/07/08 Python
python创建属于自己的单词词库 便于背单词
2019/07/30 Python
wxpython多线程防假死与线程间传递消息实例详解
2019/12/13 Python
Pytorch GPU显存充足却显示out of memory的解决方式
2020/01/13 Python
基于Python数据分析之pandas统计分析
2020/03/03 Python
Python 如何反方向迭代一个序列
2020/07/28 Python
windeln官方海外旗舰店:德淘超人气母婴超市
2017/12/15 全球购物
公开服务承诺制度
2014/03/26 职场文书
党员学习党的群众路线思想汇报(5篇)
2014/09/10 职场文书
民主生活会对照检查材料范文
2014/10/01 职场文书
民主生活会汇报材料
2014/12/15 职场文书
2015年纪检监察工作总结
2015/04/08 职场文书
稽核岗位职责范本
2015/04/13 职场文书
2016关于学习党章的心得体会
2016/01/15 职场文书
2019求职信:应届生求职信范文
2019/04/24 职场文书