上次说到了创建react项目后，默认把webpack的配置项都隐藏到了node_modules中了，但是我们在实际开发中难免会遇到需要自己特殊配置一些webpack的情况，所以这时就用到了"eject"，运行eject就可以把webpack配置项暴露出来。
但是要先把代码提交到git，否则会报错
提交完后再来一次就可以了
此时可以看到，package多出来很多依赖项
同时项目里也多出来一些我们需要的文件夹
package中多出了许多依赖项，其中babel-preset-react-app 对 @babel/preset-env 语法包的重写「目的：把ES6转为ES5」
重写的目的：让语法包可以识别React的语法，实现代码转换
create-react-app脚手架，默认配置的是sass预编译语言，项目中用的是sass，则无需再处理了；但是用的是less/stylus，则还需要自己处理
1. 把sass改为less
$ yarn add less less-loader@8
$ yarn remove sass-loader
// less最高版本不支持webpack编译，故应安装@8版本
create-react-app脚手架默认webpack规则的修改：直接去暴露的源码中改！！
所以需要大家具备一定的webpack能力！！
先看看webpack.config.js
可以看到，webpack.config整体是导出一个函数，最后返回一个对象，这个对象里面就是一些相关的规则
- target--->目标浏览器
- mode----->生产/测试模式
- devtool-->工具
- entry---->入口
可以看到，入口是paths文件里的appIndexJs
而paths.appIndexJs对应的就是src文件夹的index.js
- output---->出口
output.path为paths.appBuild
还有下面的一些属性，这里就不一一赘述了
接下来就是把sass更换成less
如果想配置别名
修改域名和端口号
如果想基于修改环境变量的方式来改
$ yarn add cross-env
package.json
"start": "cross-env PORT=8080 node scripts/start.js"
修改浏览器兼容
方法一：
$ yarn add @babel/polyfill
在入口中： import '@babel/polyfill'
方法二：脚手架中不需要我们自己去安装：可以利用依赖中react-app-polyfill 「对@babel/polyfill的重写」
处理Proxy跨域
在平时工作中，肯定要处理跨域的问题，那么这个时候我们就需要自己去封装一些方法了。
首先来看在webpackDevServer.config中，
用到了paths.proxySetup
然后paths文件中需要我们在src下建立一个setupProxy.js这么一个文件
另外start.js在调用webpackDevServer.config文件的时候还用到了一处地方
可以看到这时又用到了paths文件中的appPackageJson
所以我们应该再安装一个依赖
$ yarn add http-proxy-middleware
然后我们在新建的setupProxy.js文件中封装方法
const { createProxyMiddleware } = require('http-proxy-middleware');
//这里我们用某两个网站的测试接口举例
module.exports = function (app) {
app.use(
createProxyMiddleware("/jian", {
target: "https://www.jianshu.com/asimov",
changeOrigin: true,
ws: true,
pathRewrite: { "^/jian": "" }
})
);
app.use(
createProxyMiddleware("/zhi", {
target: "https://news-at.zhihu.com/api/4",
changeOrigin: true,
ws: true,
pathRewrite: { "^/zhi": "" }
})
);
};
这时我们就可以在页面中调用跨域的接口了
fetch("jian/subscriptions/recommended_collections")
.then(res=>res.json())
.then(value=>{
console.log(value)
});
fetch("zhi/news/latest")
.then(res=>res.json())
.then(value=>{
console.log(value)
});
