react和webpack的區別有哪些

本文小編為大家詳細介紹“react和webpack的區別有哪些”，內容詳細，步驟清晰，細節處理妥當，希望這篇“react和webpack的區別有哪些”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

區別：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請求。

讀到這里，這篇“react和webpack的區別有哪些”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。