Question

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

"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]错误：因为中止而中止   ./client/containers/SearchBox.jsx不被接受

  更新传播：
  ./client/containers/SearchBox.jsx
- ＆gt; ./client/components/HomePage.jsx
- ＆GT; ./client/components/App/index.jsx
- ＆gt; ./client/index.jsx

为什么吗

如果我不进行development检查，一切正常。

此外，我是否需要检查HMR？如果我在不取出HMR块的情况下创建生产构建，是否会导致问题？

Answer 1

如果您在病情发生之前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') } } })中，将以下插件添加到插件列表中：

webpack

这会告诉process.env.NODE_ENV将客户端代码中的JSON.stringify替换为适当的值。不要忘记将其包装在localhost:XXXX/pay.html?firstname='himanshu'&txnid='1'中，如上例所示。有关详细信息，请参阅此doc link。

NODE_ENV检查怎么能使热负载成为页面刷新？

1 个答案: