同样的修改使用 hmr 可以 hot update 而 webpack-hmr 不可以

[clarkhan]

修改的内容类似

<A /><B/>

改为

<A />test<B/>

然后 Console 会出现如下内容，页面被 Full reload。

[HMR] The following modules couldn't be hot updated: (Full reload needed)
This is usually because the modules which have changed (and their parents) do not know how to hot reload themselves. See http://webpack.github.io/docs/hot-module-replacement-with-webpack.html for more details.

目前还是用着 hmr，不知道这个是不是和其他的什么配置有关。

顺便说一句，dora-js/dora-plugin-hmr#1 的问题在这边也有。我上面的结果是在 hashHistory 的情况下出现，不是因为 hot-update.json 404 的问题。

[sorrycc]

由于没有加 babel plugin 来做代码转换，webpack-hmr 需要自己在代码里处理热替换，可参考 react-redux-boilerplate 的实现。

if (module.hot) {
  module.hot.accept('../reducers', () => {
    const reducers = require('../reducers');
    const combinedReducers = combineReducers({...reducers, routing});
    store.replaceReducer(combinedReducers);
  });
}

以及

let render = () => {
  const Routes = require('../routes/index');
  ReactDOM.render(
    <Provider store={store}>
      <Routes history={history} />
    </Provider>
  , document.getElementById('root'));
};

if (module.hot) {
  const renderNormally = render;
  const renderException = (error) => {
    const RedBox = require('redbox-react');
    ReactDOM.render(<RedBox error={error}/>, document.getElementById('root'));
  };
  render = () => {
    try {
      renderNormally();
    } catch (error) {
      console.error('error', error);
      renderException(error);
    }
  };
  module.hot.accept('../routes/index', () => {
    render()
  });
}

render();

然后 reducers/components/containers/routes 目录的修改就可以热替换了，而其他目录的修改则会 Full Reload。

[clarkhan]

@sorrycc 谢谢，搞定。

另外，dora-js/dora-plugin-hmr#1 hot-update.json 404 的问题,通过给配置 webpackConfig.output.publicPath 可以搞定。

    // webpack hot load path
    webpackConfig.output = Object.assign({}, webpackConfig.output, {
      publicPath: '/'
    });