react概覽
課程介紹
webpack
構建依賴圖->bundle
首屏渲染：
減少白屏等待時間
數據、結構、樣式都返回。需要服務器的支持
性能優化
***webpack干的事情
模塊化開發
優勢：
多人團隊協作開發
可復用
單例：全局沖突
閉包
模塊導入的順序
require.js
優點：自身處理了模塊依賴
缺點：前置導入，把所有的模塊先導入，才能把函數執行。期望一個模塊導入成功就可以做該模塊做的事情。
node.js中的common.js
什么時候用什么時候導入
ES6
導出方式
export語法：
必須先聲明再同時導出
或者導出一個對象，對象key的值是已經定義的變量；然后key與值命名相同。
export default語法
import語法
webpack配置啟動
npm install webpack
全局有沖突問題，一般推薦是本地安裝
打包原理
基礎配置&強緩存
零配置下，less編譯成css、圖片、es6轉es5都無法處理……
相對地址：./ 或 ../
絕對地址：用path模塊。你電腦上的地址
hash：打包后的文件創建hash名。利于強緩存機制下資源更新。
HTML打包編譯
還得把js導入進來
基礎配置：
如js自動導入，并且加上defer
多入口/出口配置
*devServer
打包編譯優化壓縮，自己本地啟動一個web服務，用本地服務先把開發東西預覽。
作用：
*proxy
以前綴區分
CSS全套處理方案
less預編譯成css，css兼容：css3加前綴-moz等，@import、url特殊語法導入外部資源，css打包單獨成文件或內嵌……
css-loader 處理@import 和url
style-loader 加到head里
postcss-loader 兼容前綴
全局的css在入口中基于模塊規范引入
*css兼容
- browserlist：配置瀏覽器的兼容列表。告訴他我們要兼容哪些瀏覽器
- postcss-loader做相關的配置
- 并且加入autoprefixer插件
合并壓縮打包
*抽離css
抽離css。替換style-loader：css代碼依然在js中，只是動態創建了style標簽。
JS兼容與優化
webpack自己處理合并壓縮打包，
我們要處理的是js的兼容性。
babel
- es6轉換成es6
presets: @babel/preset-env
- 內置api
如對promise進行重寫
include和exclude
圖片的處理
打包到dist目錄下
轉成base64。圖片需要先發網絡請求，圖片資源編碼，然后渲染。（不需要網絡請求也不需要編碼）
我們希望webpack能幫我們做這件事情：代碼里寫的還是圖片路徑，但是最后打包后的是base64。
如果未加入loader，則webpack不會處理圖片。
舉例是這2個場景
——高級WordCount)
