这篇文章主要讲解了“如何使用webpack配置react-hot-loader热加载局部更新”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“如何使用webpack配置react-hot-loader热加载局部更新”吧！
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}/>也就是说需要同步引入组件才可以局部热加载成功。
感谢各位的阅读，以上就是“如何使用webpack配置react-hot-loader热加载局部更新”的内容了，经过本文的学习后，相信大家对如何使用webpack配置react-hot-loader热加载局部更新这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！
