react-hot-loader
what?
react 提供了 react-hot-loader 插件来帮助 webpack 配置下 react 实现热替换
use?
命令行运行以下命令进行安装:
npm install react-hot-loader --save-dev
创建.babelrc并进行如下配置:(或者也可以在webpack配置文件中配置,提取到该文件只是为了降低webpack配置文件代码量,便于阅读)
{
"presets": ["env", "react", "stage-2"],
"plugins": ["react-hot-loader/babel"]
}
修改组件文件源代码,如:
import React from 'react';
import Tip from '../../commons/components/tip/tip.js';
import {hot} from 'react-hot-loader';
class App extends React.Component {
render() {
return (
<div>
<h1>Hello,this is page1!</h1>
<hr/>
<div className='app'>
这里是测试页面One!<Tip />
</div>
</div>
);
}
}
export default hot(module)(App);
另外,还需要修改dev命令,添加上–hot,完成后我们运行npm run dev进行测试,发现更改源代码而页面会自动替换并且不会刷新页面,说明React热替换已实现
我们可以查阅npm官网查看对react-hot-loader的说明和使用方法等等,加深理解。本次学习和试验到这里告一段落~~~