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 相关文章推荐
capacityFixed 基于jquery的类似于新浪微博新消息提示的定位框
May 24 Javascript
js 获取和设置css3 属性值的实现方法
May 06 Javascript
jQuery中的pushStack实现原理和应用实例
Feb 03 Javascript
每天一篇javascript学习小结(基础知识)
Nov 10 Javascript
jquery制作图片时钟特效
Mar 30 Javascript
angularjs表格分页功能详解
Jan 21 Javascript
js制作网站首页图片轮播特效代码
Aug 30 Javascript
Node.js 数据加密传输浅析
Nov 16 Javascript
Vue.js 递归组件实现树形菜单(实例分享)
Dec 21 Javascript
setTimeout与setInterval的区别浅析
Mar 23 Javascript
Vue使用Proxy监听所有接口状态的方法实现
Jun 07 Javascript
微信小程序图片加载失败时替换为默认图片的方法
Dec 09 Javascript
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
《魔兽争霸3:重制版》更新 多项视觉效果调整
2020/05/04 魔兽争霸
php提示Call-time pass-by-reference has been deprecated in的解决方法[已测]
2012/05/06 PHP
ThinkPHP结合ajax、Mysql实现的客户端通信功能代码示例
2014/06/23 PHP
PHP针对常规模板引擎中与CSS/JSON冲突的解决方法
2014/08/19 PHP
jquery ui dialog里调用datepicker的问题
2009/08/06 Javascript
JavaScript 定义function的三种方式小结
2009/10/16 Javascript
in.js 一个轻量级的JavaScript颗粒化模块加载和依赖关系管理解决方案
2011/07/26 Javascript
javascript 常用功能总结
2012/03/18 Javascript
用jquery方法操作radio使其默认选项是否
2013/09/10 Javascript
jQuery的live()方法对hover事件的处理示例
2014/02/27 Javascript
js模拟C#中List的简单实例
2014/03/06 Javascript
跟我学习javascript的Date对象
2015/11/19 Javascript
jquery实现图片切换代码
2016/10/13 Javascript
jquery实现手机端单店铺购物车结算删除功能
2017/02/22 Javascript
Angularjs使用指令做表单校验的方法
2017/03/31 Javascript
五步轻松实现zTree的使用
2017/11/01 Javascript
Node.js静态服务器的实现方法
2018/02/28 Javascript
vue如何通过id从列表页跳转到对应的详情页
2018/05/01 Javascript
Next.js实现react服务器端渲染的方法示例
2019/01/06 Javascript
js设置鼠标悬停改变背景色实现详解
2019/06/26 Javascript
[01:17:47]TNC vs VGJ.S 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python中map和列表推导效率比较实例分析
2015/06/17 Python
详解在Python程序中自定义异常的方法
2015/10/16 Python
Python实现信用卡系统(支持购物、转账、存取钱)
2016/06/24 Python
利用selenium 3.7和python3添加cookie模拟登陆的实现
2017/11/20 Python
python pygame模块编写飞机大战
2018/11/20 Python
基于Python3.7.1无法导入Numpy的解决方式
2020/03/09 Python
Python中的None与 NULL(即空字符)的区别详解
2020/09/24 Python
Python3.9最新版下载与安装图文教程详解(Windows系统为例)
2020/11/28 Python
详解CSS3中使用gradient实现渐变效果的方法
2015/08/18 HTML / CSS
安全标准化汇报材料
2014/02/03 职场文书
广场舞大赛策划方案
2014/05/31 职场文书
保险公司反洗钱宣传活动总结
2015/05/08 职场文书
同意报考证明
2015/06/17 职场文书
golang中的空slice案例
2021/04/27 Golang
php双向队列实例讲解
2021/11/17 PHP