站長資訊網
區別：1、React是一個JavaScript框架，而webpack是一個JavaScript應用程序的靜態模塊打包器；2、React主要用于構建用戶界面，而webpack可以進行重新加載編譯，可將所有的靜態資源都合并，進而減少io請求。
本教程操作環境：Windows7系統、react17.0.1版、Dell G3電腦。
react是什么
React是用于構建用戶界面的JavaScript框架。
框架：可以被復用的代碼。用的人多了，就出名了，越有人越有價值。（笑）
與React齊名的Angular。
React是用于渲染UI的JS庫，定位在與實現UI
React Web App解決方案，衍生的React Native是跨屏App解決方案
特點：
-
聲明式設計：聲明范式
-
高效：使用VDOM，減少DOM的交互
-
靈活：與已知的庫或框架完好配合
-
JSX：一種獨立的語言，試圖解決很多JS的缺陷，ES6包含了幾乎所有JSX的特性
-
組件：代碼復用
-
單向響應數據流：比雙向綁定更簡單，更快。
為什么使用React?
傳統方法頻繁操作DOM，性能無法達到要求；React使用VDOM，性能高
傳統JS代碼維護成本高，React基于組件開發
需要支持移動端開發
React的缺點：
-
對于一直使用JS，jQuery的傳統前端，React非常不友好
-
React強調組件和狀態管理，其世界觀是面向程序語言的
-
Vue.js強調視圖的自動同步，其世界觀是面向UI腳本的
-
React的學習成本較Vue.js高。
-
React沒有全家桶,只做UI
webpack是什么
本質上，webpack 是一個現代 JavaScript 應用程序的靜態模塊打包器(module bundler)。當 webpack 處理應用程序時,它會遞歸地構建一個依賴關系圖(dependency graph),其中包含應用程序需要的每個模塊,然后將所有這些模塊打包成一個或多個 bundle。
webpack 就像一條生產線,要經過一系列處理流程后才能將源文件轉換成輸出結果。 這條生產線上的每個處理流程的職責都是單一的,多個流程之間有存在依賴關系,只有完成當前處理后才能交給下一個流程去處理。 插件就像是一個插入到生產線中的一個功能,在特定的時機對生產線上的資源做處理。
webpack 通過 Tapable 來組織這條復雜的生產線。 webpack 在運行過程中會廣播事件,插件只需要監聽它所關心的事件,就能加入到這條生產線中,去改變生產線的運作。 webpack 的事件流機制保證了插件的有序性,使得整個系統擴展性很好。
webpack 構建流程
Webpack 的運行流程是一個串行的過程,從啟動到結束會依次執行以下流程 :
-
初始化參數：從配置文件和 Shell 語句中讀取與合并參數,得出最終的參數。
-
開始編譯：用上一步得到的參數初始化 Compiler 對象,加載所有配置的插件,執行對象的 run 方法開始執行編譯。
-
確定入口：根據配置中的 entry 找出所有的入口文件。
-
編譯模塊：從入口文件出發,調用所有配置的 Loader 對模塊進行翻譯,再找出該模塊依賴的模塊,再遞歸本步驟直到所有入口依賴的文件都經過了本步驟的處理。
-
完成模塊編譯：在經過第 4 步使用 Loader 翻譯完所有模塊后,得到了每個模塊被翻譯后的最終內容以及它們之間的依賴關系。
-
輸出資源：根據入口和模塊之間的依賴關系,組裝成一個個包含多個模塊的 Chunk,再把每個 Chunk 轉換成一個單獨的文件加入到輸出列表,這步是可以修改輸出內容的最后機會。
-
輸出完成：在確定好輸出內容后,根據配置確定輸出的路徑和文件名,把文件內容寫入到文件系統。
在以上過程中,Webpack 會在特定的時間點廣播出特定的事件,插件在監聽到感興趣的事件后會執行特定的邏輯,并且插件可以調用 Webpack 提供的 API 改變 Webpack 的運行結果。
react和webpack的區別
React是一個JavaScript框架，是用于渲染UI的JS庫，用于構建用戶界面。
而webpack是一個打包器（bundler），它能將多個js文件打包成一個文件（其實不止能打包js文件，也能打包其他類型的文件，比如css文件，json文件等）。
webpack的作用
-
進行重新加載編譯。實際就是將瀏覽器不認識的語法編譯成瀏覽器認識的語法。比如less編譯成css，ES6 語法 轉成 ES5等等。
-
減少io請求。通常我們在請求后，會返回一個html到瀏覽器。這時，我們如果打開控制臺，就會發現在html頁面通過script,link等標簽引用的靜態資源， 瀏覽器會再次發出請求去獲取這些資源。但是webpack的打包，將所有的靜態資源都合并好了，減少了io請求。
【
