建站
咨詢
售后
建站咨詢
新聞中心
今天就跟大家聊聊有關(guān)webpack中熱刷新與熱加載的區(qū)別是什么，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。
從腳手架發(fā)現(xiàn)熱刷新、熱加載的差異
相信大部分的vue開發(fā)者都是從vue-cli開始的，很多初學(xué)者歡快的跑著vue項(xiàng)目卻不敢改隨意改變vue-cli的配置（畢竟webpack確實(shí)很復(fù)雜，vue-cli也做了很多工作來優(yōu)化初學(xué)者的體驗(yàn)）。
相比之下react沒有提供一個(gè)比較健壯的腳手架了(至少?zèng)]有明顯地被我找到，望賜教)。據(jù)我知一個(gè)是yeoman的 generator-react-webpack、react的create-react-app，還有一個(gè)不錯(cuò)的react-starter-kit (熱加載，而且集成了非常多代碼，參考性很高)。
在學(xué)習(xí)react時(shí)我就發(fā)現(xiàn)了上文提到的react前兩個(gè)腳手架提供的是熱刷新而非熱加載。
簡單的區(qū)分熱加載與熱刷新:
熱刷新：文件內(nèi)動(dòng)改動(dòng)后，整個(gè)頁面刷新，不保留任何狀態(tài)（比如輸入過內(nèi)容的Input表單），相當(dāng)于webpack幫你摁了F5刷新
熱加載：文件改動(dòng)后，以最小的代價(jià)改變被改變的區(qū)域。盡可能保留改動(dòng)文件前的狀態(tài)（對input輸入內(nèi)容后，修改其他標(biāo)簽的代碼）
這在雖然兩者相較于傳統(tǒng)開發(fā)（手動(dòng)F5）都提升了開發(fā)體驗(yàn)，但兩者之間的依舊很大，尤其是當(dāng)項(xiàng)目變得愈發(fā)復(fù)雜之后，我們必須一勞永逸的解決這個(gè)問題（留出更多的時(shí)間來開發(fā)bug）。
動(dòng)手修改
從頭配置就是另一個(gè)領(lǐng)域了，所以我們直接從vue-cli開始改動(dòng)。
下述步驟僅列出關(guān)鍵做啟發(fā)參考，詳細(xì)請參考最后github完整項(xiàng)目
刪除vue相關(guān)的依賴、文件等；整個(gè)scr內(nèi)的東西都可以刪掉
package.json依賴加入babel-loader webpack-dev-server react-hot-loader(最關(guān)鍵)
package.json命令行設(shè)置 "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js"
webpack.base.conf 添加.jsx文件需要經(jīng)過babel-loader處理，配置options:{plugins:['react-hot-loader/babel']}
.babelrc presets加入react，下方加入plugins:['react-hot-loader/babel']
src文件夾下創(chuàng)建main.js（起名要跟webpack配置的入口文件一致）
import 'core-js/fn/object/assign';
import React from 'react';
import ReactDOM from 'react-dom';
import { hot } from 'react-hot-loader';
import App from './pages/App'; // 自己寫吧
import './assets/css/reset.scss';
// Render the main component into the dom
ReactDOM.render(至此，我們就可以愉快地使用react體驗(yàn)熱加載的快♂感了~
問題所在
其實(shí)在簡單地修改vue-cli中的main.js文件為react相關(guān)代碼（別忘了配置babel處理jsx）并依舊是熱刷新。
經(jīng)過本地代碼觀察對比后，發(fā)現(xiàn)了一個(gè)吸引人的名字：
在webpack.dev.conf文件中：
new webpack.HotModuleReplacementPlugin()
網(wǎng)上查詢后得知這是實(shí)現(xiàn)熱加載的關(guān)鍵，它需要代碼本身具備模塊化的性質(zhì)（這意味著只要像三大框架這樣可編寫可復(fù)用組件的框架都能利用這個(gè)性質(zhì)），這樣才可以通過插♂拔代碼實(shí)現(xiàn)熱加載。
而react的jsx特效不是HotModuleReplacementPlugin能搞定的只能老老實(shí)實(shí)熱刷新了。
在這種情況下react-hot-loader呼之欲出。配合官方的使用方法，就能繼續(xù)使用熱加載了。
看完上述內(nèi)容，你們對webpack中熱刷新與熱加載的區(qū)別是什么有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道，感謝大家的支持。
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
網(wǎng)站標(biāo)題：webpack中熱刷新與熱加載的區(qū)別是什么-創(chuàng)新互聯(lián)
URL鏈接：http://www.dlmjj.cn/article/dpiddh.html
