React项目中热加载

第一步

配置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)

完成！