日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

使用webpack配置react-hot-loader熱加載局部更新_React

作者：huangpb0624 ? 更新時間： 2023-03-13 編程語言

webpack配置react-hot-loader熱加載局部更新

有人會問 webpack-dev-server 已經是熱加載了，能做到只要代碼修改了頁面也自動更新了，為什么在 react 項目還要安裝 react-hot-loader 呢？

其實這兩者的更新是有區別的，webpack-dev-server 的熱加載是開發人員修改了代碼，代碼經過打包，重新刷新了整個頁面。

而?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 已經配置好了。

react-hot-loader熱加載不生效的可能問題

如果是下面這樣，就不會執行熱加載

const AsyncLogin = asyncComponent(() => import("./Login")); //我不能熱加載
import home from './home' ?//我能熱加載
<Route exact path='/' component={home}/>
<Route ? path='/login' component={AsyncLogin}/>
<Route ? path='/home' component={home}/>

也就是說需要同步引入組件才可以局部熱加載成功

總結

原文鏈接：https://blog.csdn.net/huangpb123/article/details/78556652

欄目分類
最近更新