使用webpack配置react-hot-loader熱加載局部更新
webpack配置react-hot-loader熱加載局部更新
有人會問 webpack-dev-server 已經(jīng)是熱加載了，能做到只要代碼修改了頁面也自動更新了，為什么在 react 項目還要安裝 react-hot-loader 呢？
其實這兩者的更新是有區(qū)別的，webpack-dev-server 的熱加載是開發(fā)人員修改了代碼，代碼經(jīng)過打包，重新刷新了整個頁面。
而 react-hot-loader 不會刷新整個頁面，它只替換了修改的代碼，做到了頁面的局部刷新。
但它需要依賴 webpack 的 HotModuleReplacement 熱加載插件。
下面來說說怎么來配置 react-hot-loader 。
步驟1
安裝 react-hot-loader
npm install --save-dev react-hot-loader
步驟2
在 webpack.config.js 的 entry 值里加上 react-hot-loader/patch，一定要寫在entry 的最前面，如果有 babel-polyfill 就寫在
babel-polyfill 的后面。
entry: [
'babel-polyfill',
'react-hot-loader/patch', //設置這里
__dirname + '/app/main.js'
]步驟3
在 webpack.config.js 中設置 devServer 的 hot 為 true
devServer: {
contentBase: './build',
port: '1188',
historyApiFallback: true,
inline: true,
hot: true, //設置這里
},步驟4
在 .babelrc 里添加 plugin
{
"presets": ['es2015', 'react'],
"plugins": ["react-hot-loader/babel"] //設置這里
}步驟5
在 webpack.config.js 的 plugins 里添加依賴的 HotModuleReplacement 插件
plugins: [
new HtmlWebpackPlugin({
template: __dirname + "/app/index.tmpl.html"
}),
new webpack.HotModuleReplacementPlugin() //設置這里
]步驟6
最后這個操作就是在項目的主入口，比如我的是 main.js 添加些代碼
import React from 'react';
import ReactDOM from 'react-dom';
import Greeter from './greeter';
import "./main.css";
import { AppContainer } from 'react-hot-loader'; //設置這里
const render = (App) => {
ReactDOM.render(
<AppContainer>
<App />
</AppContainer>,
document.getElementById('root')
)
}
render(Greeter)
// Hot Module Replacement API
if (module && module.hot) {
module.hot.accept('./greeter', () => {
render(require('./greeter').default)
})
}簡寫成這樣試了一下也能成功
import React from 'react';
import ReactDOM from 'react-dom';
import App from './app';
import "./main.css";
ReactDOM.render(
<App />,
document.getElementById('root')
)
if (module && module.hot) {
module.hot.accept()
}按順序做完上面6個步驟，恭喜你，React 的 react-hot-loader 已經(jīng)配置好了。
react-hot-loader熱加載不生效的可能問題
如果是下面這樣，就不會執(zhí)行熱加載
const AsyncLogin = asyncComponent(() => import("./Login")); //我不能熱加載
import home from './home' ?//我能熱加載
<Route exact path='/' component={home}/>
<Route ? path='/login' component={AsyncLogin}/>
<Route ? path='/home' component={home}/>也就是說需要同步引入組件才可以局部熱加載成功
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
AntDesign ,簡稱antd是基于 Ant Design 設計體系的 React UI 組件庫,主要用于研發(fā)企業(yè)級中后臺產(chǎn)品,這篇文章主要介紹了Ant Design組件庫的使用教程,需要的朋友可以參考下2023-12-12
這篇文章主要介紹了react中使用ant組件庫的modal彈窗報錯問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要為大家介紹了React?SSG實現(xiàn)Demo詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪<BR>2023-07-07
React項目配置axios和反向代理和process.env環(huán)境配置等問題
這篇文章主要介紹了React項目配置axios和反向代理和process.env環(huán)境配置等問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要介紹了深入淺析react native es6語法的相關(guān)資料,需要的朋友可以參考下2015-12-12
state狀態(tài)是組件實例對象身上的狀態(tài)，不是組件類本身身上的，是由這個類締造的實例身上的。這篇文章主要介紹了React 對state的理解,需要的朋友可以參考下2021-09-09
詳解在React項目中安裝并使用Less（用法總結(jié)）
這篇文章主要介紹了詳解在React項目中安裝并使用Less（用法總結(jié)），文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-03-03
在React中使用IndexedDB進行前端離線存儲,可以存儲大量數(shù)據(jù),支持復雜的數(shù)據(jù)類型和高性能查詢,通過示例展示了如何創(chuàng)建數(shù)據(jù)庫、添加數(shù)據(jù)、查詢數(shù)據(jù)和構(gòu)建一個簡單的待辦事項應用,感興趣的朋友跟隨小編一起看看吧2024-11-11
這篇文章主要為大家介紹了Component與PureComponent解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03
這篇文章主要為大家詳細介紹了react實現(xiàn)拖拽模態(tài)框，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08