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

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

react是什么

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

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

與React齊名的Angular。

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

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

特點(diǎn)：

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

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

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

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

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

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

為什么使用React?

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

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

需要支持移動(dòng)端開(kāi)發(fā)

React的缺點(diǎn)：

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

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

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

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

• React沒(méi)有全家桶,只做UI

webpack是什么

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

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

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

webpack 構(gòu)建流程

Webpack 的運(yùn)行流程是一個(gè)串行的過(guò)程,從啟動(dòng)到結(jié)束會(huì)依次執(zhí)行以下流程 :

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

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

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

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

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

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

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

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

react和webpack的區(qū)別

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

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

webpack的作用

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

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

【