代码之家 › 专栏 › 技术社区 › Albert Gao

NODE\u ENV check如何导致热加载成为页面刷新?

react-hot-loader webpack-hmr reactjs

1

Albert Gao · 技术社区 · 7 年前

最近我有一个热模块重新加载的项目设置,

"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]无法应用更新。需要完全重新加载!

[HMR]错误:已中止,因为

更新传播:

->/客户端/组件/主页。jsx公司
->/客户端/组件/应用程序/索引。jsx公司
->/客户/索引。jsx公司

如果我不这么做 development 检查,一切正常。

此外,我做HMR需要检查吗?如果我在不删除HMR块的情况下创建生产构建,会导致问题吗?

1 回复 | 直到 7 年前

1

GProst 7 年前

如果你愿意 console.log(process.env.NODE_ENV) 就在你的病情之前,你可能会 undefined . 这就是为什么你的应用程序无法捕捉模块更新。

NODE_ENV=development 对于 nodejs webpack 在您的 webpack.config.js

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

这会告诉我们 网页包 替换 process.env.NODE_ENV JSON.stringify 如上例所示。看到这个了吗 doc link