webpack熱刷新與熱加載使用詳解

這次帶給大家webpack熱刷新與熱加載使用詳解，webpack熱刷新與熱加載使用的注意事項有哪些，下面就是實戰案例，一起來看一下。

webpack非常的強大，合理的鷹架可以為我們的工作省去眾多繁瑣無意義的工作。其中熱刷新、熱加載相較於傳統開發大大提高了開發節奏。

從鷹架發現熱刷新、熱載入的差異

相信大部分的vue開發者都是從vue-cli開始的，很多初學者歡快的跑著vue專案卻不敢改隨意改變vue-cli的設定（畢竟webpack確實很複雜，vue-cli也做了很多工作來優化初學者的體驗）。

相較之下react並沒有提供一個比較健壯的鷹架了(至少沒有明顯地被我找到，望賜教)。據我知一個是yeoman的 generator-react-webpack、react的create-react-app，還有一個不錯的react-starter-kit (熱加載，而且集成了非常多代碼，參考性很高)。
在學習react時我就發現了上文提到的react前兩個腳手架提供的是熱刷新而非熱加載。

簡單的區分熱載入與熱刷新:

熱刷新：檔案內動改變後，整個頁面刷新，不保留任何狀態（例如輸入過內容的Input表單），相當於webpack幫你摁了F5刷新
熱載入：檔案改動後，以最小的代價改變被改變的區域。盡可能保留改動檔案前的狀態（對input輸入內容後，修改其他標籤的程式碼）

這在雖然兩者相較於傳統開發（手動F5）都提升了開發體驗，但兩者之間的依舊很大，尤其是當專案變得愈發複雜之後，我們必須一勞永逸的解決這個問題（留出更多的時間來開發bug）。

動手修改

從頭設定就是另一個領域了，所以我們直接從vue-cli開始改變。

下述步驟只列出關鍵做啟發參考，詳細請參考最後github完整項目

1. #刪除vue相關的依賴、檔案等；整個scr內的東西都可以刪除

2. package.json依賴加入babel-loader webpack-dev-server react-hot-loader(最關鍵)

3. package.json命令列設定"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js"

4. webpack.base.conf 新增.jsx檔案需要經過babel-loader處理，設定options:{plugins:['react-hot-loader/babel']}

5. . babelrc presets加入react，下方加入plugins:['react-hot-loader/babel']

6. src資料夾下建立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(<app></app>, document.getElementById('app'));
export default hot(module)(App); // 热加载的关键

至此，我們就可以愉快地使用react體驗熱載入的快♂感了~

問題所在

其實在簡單地修改vue-cli中的main.js檔案為react相關程式碼（別忘了設定babel處理jsx）並依舊是熱刷新。

經過本地程式碼觀察比較後，發現了一個吸引人的名字：

在webpack.dev.conf檔案中：

new webpack.HotModuleReplacementPlugin()

網路上查詢後得知這是實現熱加載的關鍵，它需要程式碼本身俱備模組化的性質（這意味著只要像三大框架這樣可編寫可重複使用組件的框架都能利用這個性質），這樣才可以透過插♂拔程式碼來實現熱載入。

而react的jsx特效不是HotModuleReplacementPlugin能搞定的只能老實熱刷新了。

在這種情況下react-hot-loader呼之欲出。配合官方的使用方法，就能繼續使用熱載了。

ps: 只做參考，react的很多程式碼我也處於探索與學習中

配置好的專案位址：gayhub

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

vue-cli多模組包裝使用詳解

node token實作驗證

以上是webpack熱刷新與熱加載使用詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！