做一个网站的价格,手机商城 手机网站建设多少钱,免费的短视频app大全下载,wordpress高级自适应主题下载文章目录 暴露webpack配置暴露前后的区别config文件夹#xff1a;scripts文件夹#xff1a;package.json 常见的配置修改1.把sass改为less2.配置别名3.修改域名和端口号4.修改浏览器兼容5.处理Proxy跨域 2023年最新珠峰React全家桶【react基础-进阶-项目-源码-淘系-面试题】 … 文章目录 暴露webpack配置暴露前后的区别config文件夹scripts文件夹package.json 常见的配置修改1.把sass改为less2.配置别名3.修改域名和端口号4.修改浏览器兼容5.处理Proxy跨域 2023年最新珠峰React全家桶【react基础-进阶-项目-源码-淘系-面试题】 暴露webpack配置
yarn eject暴露前后的区别
暴露成功后生成config、scripts文件夹
config文件夹 scripts文件夹 package.json dependences babel-preset-react-app 对babel/preset-env语法包的重写目的把ES6转为ES5 重写的目的让语法包可以识别React的语法实现代码转换。 create-react-app脚手架默认配置的是sass预编译语言项目中用的是sass无需再处理但是用的是less/stylus则还需要自己处理。 scripts babel
常见的配置修改
1.把sass改为less
yarn add less less-loader8
yarn remove sass-loadercreate-react-app脚手架默认webpack规则的修改直接去暴露的源码中改 所以需要具备一定的webpack能力.
2.配置别名 3.修改域名和端口号 如果想基于环境变量的方式来改安装cross-env依赖$ yarn add cross-env、修改package.json的scripts配置
4.修改浏览器兼容 5.处理Proxy跨域
在src目录中新建setupProxy.js 安装依赖$ yarn add http-proxy-middleware
http-proxy-middleware实现跨域代理的模块webpack-dev-server的跨域代理原理也是基于它完成的
setupProxy.js:
const { createProxyMiddleware } require(http-proxy-middleware);module.exports function (app) {app.use(createProxyMiddleware(/jian, {target: https://www.jianshu.com/,changeOrigin: true,ws: true,pathRewrite: { ^/jian: },}));app.use(createProxyMiddleware(/zhi, {target: https://news-at.www.zhihu.com/api/4,changeOrigin: true,ws: true,pathRewrite: { ^/zhi: },}));
};
