2023年最新珠峰React全家桶【react基礎(chǔ)-進階-項目-源碼-淘系-面試題】

暴露webpack配置

yarn eject

暴露前后的區(qū)別

暴露成功后生成config、scripts文件夾

config文件夾：

scripts文件夾：

package.json

• dependences
  
  babel-preset-react-app
  對@babel/preset-env語法包的重寫（目的：把ES6轉(zhuǎn)為ES5）
  重寫的目的：讓語法包可以識別React的語法，實現(xiàn)代碼轉(zhuǎn)換。

  create-react-app腳手架，默認配置的是sass預(yù)編譯語言，項目中用的是sass，無需再處理；但是用的是less/stylus，則還需要自己處理。

• scripts
  

• babel
  

常見的配置修改

1.把sass改為less

yarn add less less-loader@8
yarn remove sass-loader

create-react-app腳手架默認webpack規(guī)則的修改：直接去暴露的源碼中改！
所以需要具備一定的webpack能力.

2.配置別名

3.修改域名和端口號

如果想基于環(huán)境變量的方式來改：安裝cross-env依賴$ yarn add cross-env、修改package.json的scripts配置

4.修改瀏覽器兼容

5.處理Proxy跨域

在src目錄中，新建setupProxy.js，
安裝依賴$ yarn add http-proxy-middleware，

http-proxy-middleware：實現(xiàn)跨域代理的模塊（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": "" },}));
};