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)

完成！