第一步
配置webpack-dev-server
config.devServer = {
contentBase: path.resolve(__dirname, '../../dist'),
host: 'localhost',
port: '1111',
hot: true
}
config.plugins.push(new webpack.HotModuleReplacementPlugin())
重点是hot开启true,
然后引入webpack,添加webpack里的HMR插件
第二步
安装"react-hot-loader": "^4.6.3"
添加进.babelrc
{
"presets": ["@babel/preset-env", "@babel/preset-react"],
"plugins": ["react-hot-loader/babel"]
}
写react根组件,一般命名为App.jsx
import React from 'react'
import Child from './cmp/Child'
import {hot} from 'react-hot-loader/root'
class App extends React.Component {
render() {
return (<div>
Hello world!!
<Child />
</div>)
}
}
export default hot(App)
完成!