组件未重新加载反应热装载器

Question

https://github.com/James2516/hot-reload

我正在尝试将hot loader添加到现有的webpack项目中。

检测到文件更改但未重新加载组件。

重现：

1. yarn && yarn start
2. 更改src/App.js内容

Answer 1

示例来自https://gaearon.github.io/react-hot-loader/getstarted/#step-2-of-3-using-hmr-to-replace-the-root-component，尽管您似乎已经遵循了本指南。

第一个问题是[HMR] Waiting for update signal from WDS...被打印到控制台两次，并且任何尝试重新编译也会出现两次。这是由entry ./config/webpack/Dev.js中的entry: [ 'webpack-dev-server/client?http://localhost:4545/', 'webpack/hot/only-dev-server', 'react-hot-loader/patch', './client.js', ] 引起的：

[
  'webpack-dev-server/client?http://0.0.0.0:3000', // WebpackDevServer host and port
  'webpack/hot/only-dev-server', // 'only' prevents reload on syntax errors
  './scripts/index' // Your app's entry point
]

本指南的前几个步骤的入口点为：

entry

步骤3 步骤3（共3条）：添加React Hot Loader以保留组件状态指示您修改webpack.config.js [ 'react-hot-loader/patch', // RHL patch './scripts/index' // Your app's entry point ] 看起来像：

react-hot-loader

'react-hot-loader/patch'处理这两个条目之前的操作，因此可以将其替换为[ 'react-hot-loader/patch', './client.js' ] 。

所以你的新入口点应该是：

if (module.hot) {
  module.hot.accept('./containers/rootContainer.js', () => {
    const NextRootContainer = require('./containers/rootContainer').default;
    render(NextRootContainer);
  });
}

接下来，同一部分中的步骤3b 有一个类似于以下内容的代码段：

module.hot

将if (module.hot) { module.hot.accept('./App', () => { const newApp = require('./App').default; render(newApp); } } 块更改为：

if (module.hot) {
  module.hot.accept('./containers/rootContainer', () => { 
   render(RootContainer) });
}

正确地重新加载组件，因此在步骤3c 打破HMR后没有任何意义。

  

℃。 Webpack 2内置了对ES2015模块的支持，您无需在module.hot.accept中重新使用您的应用程序根目录。上面的例子变成：

"presets": [["es2015", { "modules": false }]]

     

注意：要完成这项工作，您需要通过将Babel ES2015预设更改为

来退出Babel转换ES2015模块      

.babelrc

您在./config/webpack/Base.js中正确执行了哪些操作。唯一的问题是loader: 'babel-loader', query: { presets: ['es2015', 'react', 'stage-2'] } 你有：

babel-loader

这会导致.babelrc使用这些预设而不是query中定义的预设。删除此规则中的presets并将.babelrc中的"presets": [["es2015", { "modules": false }], "react", "stage-2" 更改为：

module.hot

使用if (module.hot) { module.hot.accept('./App', () => { render(App); }); } 块正确启用HMR：

    ClientCache cache = (ClientCache) EcnSpringContext.getBean("gemfireCache");

    Region<String, RUserEntity> userRegion = (Region<String, RUserEntity>) EcnSpringContext.getBean("r_user");

    CacheTransactionManager txmgr = cache.getCacheTransactionManager();
    EcnGeodeTemplate ecnGeodeTemplate = (EcnGeodeTemplate) EcnSpringContext.getBean("rUserTemplate");

    String username = "forrest";
    System.out.println("Transaction begin.");
    txmgr.begin();

    System.out.println("checking username[" + username + "] before added.");
    RUserEntity found = (RUserEntity) userRegion.selectValue("SELECT * FROM /r_user WHERE username = '" + username + "'");
    if (found == null)
        System.out.println("rUserEntity NOT found");
    else
        System.out.println("rUserEntity  found");


    RUserEntity rUserEntity = new RUserEntity();
    rUserEntity.setUsername("forrest");
    rUserEntity.setId(username);
    userRegion.put(username, rUserEntity);

    System.out.println("checking username[" + username + "] after added.");
    found = (RUserEntity) userRegion.selectValue("SELECT * FROM /r_user WHERE username = '" + username + "'");
    if (found == null)
        System.out.println("rUserEntity NOT found");
    else
        System.out.println("rUserEntity  found");


    txmgr.commit();
    System.out.println("Transaction end.");

    System.out.println("checking username[" + username + "] after transaction.");
    found = (RUserEntity) userRegion.selectValue("SELECT * FROM /r_user WHERE username = '" + username + "'");
    if (found == null)
        System.out.println("rUserEntity NOT found");
    else
        System.out.println("rUserEntity  found");