學習視頻：學習視頻

2節：webpack工程化創建項目

2.1.webpack工程化工具：vite/rollup/turbopak;

+實現組件的合并、壓縮、打包等；
+代碼編譯、兼容、校驗等；

2.2.React工程化/組件開發

我們可以基于webpack自己去搭建一套工程化打包的架子，但是這樣非常的麻煩、復雜；React官方，為我們提供了一個腳手架：
+腳手架：基于它創建項目，默認就把webpack的打包規則已經處理好了，把一些項目需要的基本文件也都創建好了

2.3.create-react-app基于運用

• 安裝腳手架：npm跑項目改為yarn跑項目：把node_modules和package-lock.json刪掉，用yarn跑就行了
  $ npm i create-react-app -g
  檢查安裝情況
  $ create-react-app --version
• 基于腳手架創建React工程化的項目
  $ create-react-app 項目名稱 (項目名稱要遵循npm命名規則，數字、小寫字母、_ 命名)

項目目錄：
|-node_modules: 項目依賴
|-src: 所有后續編寫的代碼，幾乎都放在src下，[打包的時候一般只對這個目錄下的代碼進行處理]|-index.js ----入口文件
|-public:放頁面模板|-index.html
|-package.json

2.4.React項目中，默認會安裝：

react: React框架的核心
react-dom: React視圖渲染的核心[基于React構建webApp(HTML頁面)]
react-natvie: 構建和渲染APP的
react-scripts: 腳手架為了讓項目目錄看起來干凈一些，把webpack打包的規則及相關的插件/LOADER等都隱藏到了node_modules目錄下，react-sctipts就是
腳手架中自己對打包命令的一種封裝，基于它打包，會調用node_modules中的webpack等進行處理
web-vitals: 性能檢測工具

2.5.package.json文件

eslint配置：

瀏覽器兼容配置：

src文件夾：

3節：腳手架的進階應用

3.1 yarn eject / npm run eject的使用

命令執行后會生成兩個文件夾：config和scripts


package.json文件的更改：

babel-preset-react-app包是對@babel/preset-env語法包的重寫[目的：把es6轉為es5],重寫的目的：讓語法包可以識別React的語法，實現代碼轉換

3.2.常見的配置修改

• 把sass改為less

yarn add less less-loader@8 // 使用第八個版本，用新版本有些配置規則會匹配不上
yarn remove sass-loader

• create-react-app腳手架默認webpack規則的修改：直接去暴露的源碼中改：(在webpack.config.js文件中改)
  所以需要大家具備一定的webpack能力

• 配置別名：
  

• 修改端口號和域名：
  

如果想基于修改環境變量的方式來改：

yarn add cross-env

• 修改瀏覽器兼容
  
  
  
• 跨域代理：處理Proxy跨域
  

1. 在src目錄中新建setupProxy.js文件(config/paths.js文件 中setupProxy.js作為跨域入口文件)

yarn add http-proxy-middleware

http-proxy-middleware:實現跨域代理的模塊[webpack-dev-serve的跨域代理原理，也是基于它完成的]

測試使用：