區(qū)別：1、React是一個JavaScript框架，而webpack是一個JavaScript應(yīng)用程序的靜態(tài)模塊打包器；2、React主要用于構(gòu)建用戶界面，而webpack可以進行重新加載編譯，可將所有的靜態(tài)資源都合并，進而減少io請求。

本教程操作環(huán)境：Windows7系統(tǒng)、react17.0.1版、Dell G3電腦。

react是什么

React是用于構(gòu)建用戶界面的JavaScript框架。

框架：可以被復(fù)用的代碼。用的人多了，就出名了，越有人越有價值。（笑）

與React齊名的Angular。

React是用于渲染UI的JS庫，定位在與實現(xiàn)UI

React Web App解決方案，衍生的React Native是跨屏App解決方案

特點：

• 聲明式設(shè)計：聲明范式

• 高效：使用VDOM，減少DOM的交互

• 靈活：與已知的庫或框架完好配合

• JSX：一種獨立的語言，試圖解決很多JS的缺陷，ES6包含了幾乎所有JSX的特性

• 組件：代碼復(fù)用

• 單向響應(yīng)數(shù)據(jù)流：比雙向綁定更簡單，更快。

為什么使用React?

傳統(tǒng)方法頻繁操作DOM，性能無法達到要求；React使用VDOM，性能高

傳統(tǒng)JS代碼維護成本高，React基于組件開發(fā)

需要支持移動端開發(fā)

React的缺點：

• 對于一直使用JS，jQuery的傳統(tǒng)前端，React非常不友好

• React強調(diào)組件和狀態(tài)管理，其世界觀是面向程序語言的

• Vue.js強調(diào)視圖的自動同步，其世界觀是面向UI腳本的

• React的學(xué)習(xí)成本較Vue.js高。

• React沒有全家桶,只做UI

webpack是什么

本質(zhì)上，webpack 是一個現(xiàn)代 JavaScript 應(yīng)用程序的靜態(tài)模塊打包器(module bundler)。當(dāng) webpack 處理應(yīng)用程序時,它會遞歸地構(gòu)建一個依賴關(guān)系圖(dependency graph),其中包含應(yīng)用程序需要的每個模塊,然后將所有這些模塊打包成一個或多個 bundle。

webpack 就像一條生產(chǎn)線,要經(jīng)過一系列處理流程后才能將源文件轉(zhuǎn)換成輸出結(jié)果。 這條生產(chǎn)線上的每個處理流程的職責(zé)都是單一的,多個流程之間有存在依賴關(guān)系,只有完成當(dāng)前處理后才能交給下一個流程去處理。 插件就像是一個插入到生產(chǎn)線中的一個功能,在特定的時機對生產(chǎn)線上的資源做處理。

webpack 通過 Tapable 來組織這條復(fù)雜的生產(chǎn)線。 webpack 在運行過程中會廣播事件,插件只需要監(jiān)聽它所關(guān)心的事件,就能加入到這條生產(chǎn)線中,去改變生產(chǎn)線的運作。 webpack 的事件流機制保證了插件的有序性,使得整個系統(tǒng)擴展性很好。

webpack 構(gòu)建流程

Webpack 的運行流程是一個串行的過程,從啟動到結(jié)束會依次執(zhí)行以下流程 :

• 初始化參數(shù)：從配置文件和 Shell 語句中讀取與合并參數(shù),得出最終的參數(shù)。

• 開始編譯：用上一步得到的參數(shù)初始化 Compiler 對象,加載所有配置的插件,執(zhí)行對象的 run 方法開始執(zhí)行編譯。

• 確定入口：根據(jù)配置中的 entry 找出所有的入口文件。

• 編譯模塊：從入口文件出發(fā),調(diào)用所有配置的 Loader 對模塊進行翻譯,再找出該模塊依賴的模塊,再遞歸本步驟直到所有入口依賴的文件都經(jīng)過了本步驟的處理。

• 完成模塊編譯：在經(jīng)過第 4 步使用 Loader 翻譯完所有模塊后,得到了每個模塊被翻譯后的最終內(nèi)容以及它們之間的依賴關(guān)系。

• 輸出資源：根據(jù)入口和模塊之間的依賴關(guān)系,組裝成一個個包含多個模塊的 Chunk,再把每個 Chunk 轉(zhuǎn)換成一個單獨的文件加入到輸出列表,這步是可以修改輸出內(nèi)容的最后機會。

• 輸出完成：在確定好輸出內(nèi)容后,根據(jù)配置確定輸出的路徑和文件名,把文件內(nèi)容寫入到文件系統(tǒng)。

在以上過程中,Webpack 會在特定的時間點廣播出特定的事件,插件在監(jiān)聽到感興趣的事件后會執(zhí)行特定的邏輯,并且插件可以調(diào)用 Webpack 提供的 API 改變 Webpack 的運行結(jié)果。

react和webpack的區(qū)別

React是一個JavaScript框架，是用于渲染UI的JS庫，用于構(gòu)建用戶界面。

而webpack是一個打包器（bundler），它能將多個js文件打包成一個文件（其實不止能打包js文件，也能打包其他類型的文件，比如css文件，json文件等）。

webpack的作用

• 進行重新加載編譯。實際就是將瀏覽器不認(rèn)識的語法編譯成瀏覽器認(rèn)識的語法。比如less編譯成css，ES6 語法 轉(zhuǎn)成 ES5等等。

• 減少io請求。通常我們在請求后，會返回一個html到瀏覽器。這時，我們?nèi)绻蜷_控制臺，就會發(fā)現(xiàn)在html頁面通過script,link等標(biāo)簽引用的靜態(tài)資源， 瀏覽器會再次發(fā)出請求去獲取這些資源。但是webpack的打包，將所有的靜態(tài)資源都合并好了，減少了io請求。

【