近期项目中使用的react-hot-loader版本为v3,其配置方式和v1版本有比较大的区别,其配置的过程可参考官网配置,下面是按照官网的步骤操作的:
-
首先你需要为你的项目安装上这个小可爱
npm install --save-dev react-hot-loader
-
在.babelrc(babel的配置文件)加上
{ plugins: ["react-hot-loader/babel"] }
- 确保项目开启了webpack-dev-server的HMR
(这里说明一下:因为react-hot-loader的热更新是依赖于webpack-dev-server,后者是在打包文件改变时更新打包文件或者reload刷新整个页面,而前者会根据stateNode节点的更新对比,只更新改变的reactDom节点,从而保留了未改变的state值,更适用于react的开发更新模式,感兴趣的可以看看你源码了解一下原理)。 -
(如果项目中已经配置了webpack的热更新,可以略过看下一步?)项目的wepack-dev-server采用inline方式配置的:
- 安装webpack-dev-server
-
启东时采用inline方式,通过npm命令开启项目
webpack-dev-server --config config/ webpack.dev.config.js --inline --progress --colors --host 127.0.0.1 --port 8081
-
在webpack配置devServer的相应参数,允许热更新:
devServer: { ... , hot: true, ..., }
-
plugins中加入HotModuleReplacementPlugin:
plugins: [ new webpack.HotModuleReplacementPlugin(),...]
-
在开发模式的webpack文件入口参数entry添加react-hot-loader/patch:
module.exports = { entry: [ 'babel-polyfill', 'react-hot-loader/patch', './main.js' ] }
-
入口文件(比如main.js中)引入react-hot-loader中的AppContainer组件,这个组件下的所有子组件都会在发生变化时,触发热更新,配置的代码如下(注意,这个组件下的子组件只能有唯一的一个?):
import React from 'react'; import { render } from 'react-dom'; import { AppContainer } from 'react-hot-loader'; import Upload from './components/Upload'; const renderCom = App => { render( <AppContainer> <App /> </AppContainer>, document.getElementById('app') ); } renderCom(Upload); if (module.hot) { module.hot.accept( './components/Upload',() => { const nextUpload = require('./components/Upload').default; // eslint-disable-line global-require renderCom(nextUpload); } ) }
好了,通过这些步骤,一路下来,就可以顺利的开启react-hot-loader了。有什么问题,欢迎大家一起讨论啦~~。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。