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')
    )
  })
}
複製代碼