react-hot-loader热加载局部更新

最新推荐文章于 2024-08-10 07:31:55 发布

JJWanna

最新推荐文章于 2024-08-10 07:31:55 发布

阅读量367

点赞数 1

文章标签： webpack

本文链接：https://blog.csdn.net/JJWanna/article/details/107091232

版权

这篇博客探讨了react-hot-loader与webpack-dev-server热加载的区别。react-hot-loader在代码变动后无需整个页面刷新，仅替换修改部分，实现局部更新。配置react-hot-loader涉及安装依赖、调整webpack配置、设置devServer的hot选项、修改.babelrc和添加HotModuleReplacement插件等步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

webpack-dev-server 热加载与 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：

demo🌰

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.hot) {
    module.hot.accept('./greeter', () => {
        render(require('./greeter').default)
    })
}

or这样的

import React from 'react';
import ReactDOM from 'react-dom';
import App from './app';
import "./main.css";
 
ReactDOM.render(
    <App />,
    document.getElementById('root')
)
 
if (module.hot) {
    module.hot.accept()
}