HMR

Webpack HMR 原理解析

HMR的配置方式

1. webpack.config.js配置

devServer: {
    hot: true,
    // hotOnly: true // 当模块改动不支持热更新，只能从新刷新时，hotOnly不会更新，hot会更新
    ...
  },
  plugins: [
    ...,
    new webpack.HotModuleReplacementPlugin(),
    ...,
  ]
复制代码

2. package.json配置

"scripts": {
    "start": "webpack-dev-server --hot --open"
  },
复制代码

模块重载方式

当模块改变可能会发生两种状况

1. 热重载，好比改变了一个样式，这种只须要重载样式模块，页面自己不须要刷新，只是从新渲染
2. 热刷新，好比react中内容改变了，页面不能支持局部重载模块，只能经过刷新，也能够经过下面配置，从新render页面避免刷新页面

if (module.hot) {
  module.hot.accept('./App.jsx', function() {
    ReactDOM.render(
      <Provider store={store}>
        <App />
      </Provider>,
      document.getElementById('root')
    )
  })
}
复制代码