NODE_ENV 检查怎么会导致热加载是页面刷新？

Question

最近我有一个热模块重新加载的项目设置，我使用这个脚本通过 webpack-dev-server 启动开发：

"NODE_ENV=development ./node_modules/.bin/webpack-dev-server --progress --config webpack.dev.js"

热模块重新加载有效。直到我改变

if (module.hot) {
    module.hot.accept('./components/App', () => {
        renderWrapper(App);
    });
}

到

if (process.env.NODE_ENV === 'development'){
    // Original HMR code
}

然后我每次改东西，就变成了整页重新加载。我在Chrome的控制台中发现了如下日志：

[HMR] Cannot apply update. Need to do a full reload!

[HMR] Error: Aborted because ./client/containers/SearchBox.jsx is not accepted

Update propagation:
./client/containers/SearchBox.jsx
-> ./client/components/HomePage.jsx
-> ./client/components/App/index.jsx
-> ./client/index.jsx

为什么？

如果我不这样做 development 检查，一切正常。

此外，我需要检查一下才能进行 HMR 吗？如果我在不取出 HMR 块的情况下创建生产版本，会不会导致问题？

Answer 1

如果你在你的病情发生之前console.log(process.env.NODE_ENV)，你可能会得到undefined。这就是您的应用无法捕获模块更新的原因。

问题是您为 nodejs 的环境设置了 NODE_ENV=development，但没有为 webpack 的环境设置。在您的 webpack.config.js 中，将以下插件添加到插件列表中：

new webpack.DefinePlugin({
  process: {
    env: {
      NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'development')
    }
  }
})

这将告诉 webpack 将客户端代码中的 process.env.NODE_ENV 替换为适当的值。不要忘记将其包装在 JSON.stringify 中，如上例所示。有关详细信息，请参阅此 doc link。

NODE_ENV 检查怎么会导致热加载是页面刷新？

How could the NODE_ENV check cause the hot loading to be a page refreshing?

reactjs

react-hot-loader

webpack-hmr