为什么在WebPack条目文件中使用窗口会伴随React Hot ReloDAD

Question

env： React@16.2.0 + React-Router@3.2.1 + Redux@5.0.7 + webpack@3.5.6

输入文件：index.js

const MOUNT_NODE = document.getElementById('root');
// Line A
const __DEV__ = window.__DEV__;

let render = () => {
  const App = require('./components/App').default;
  const routes = require('./pages/router').default(store);
  ReactDOM.render(
    <App store={store} routes={routes} />,
    MOUNT_NODE
  );
};
// Development Tools
// ------------------------------------
if (__DEV__) {
  if (module.hot) {
    const renderApp = render;
    const renderError = (error) => {
      const RedBox = require('redbox-react').default;
      ReactDOM.render(<RedBox error={error} />, MOUNT_NODE);
    };
    render = () => {
      try {
        renderApp();
      } catch (e) {
        renderError(e);
      }
    };
    // Setup hot module replacement
    module.hot.accept([
      './components/App',
      './pages/router',
    ], () =>
      setImmediate(() => {
        ReactDOM.unmountComponentAtNode(MOUNT_NODE);
        render();
      })
    );
    module.hot.accept();
  }
}

__DEV__在WebPack配置文件中定义：

new webpack.DefinePlugin(Object.assign({
  __DEV__: project.env === 'development',
}, project.globals))

然后我启动本地开发服务器。

但是，当我更改JSX时，热重载不起作用，警告提示：

process-update.js？e13e：95 [hmr]以下模块无法进行热门更新：(需要完整的重新加载( 这通常是因为已经改变(及其父母(的模块不知道如何加热自己。有关更多详细信息

但是，当我删除行a 时，热重加载正常工作，警告提示也会消失。

这就是为什么？谢谢。

Answer 1

应该是字符串。您需要使用JSON.stringify将Boolean转换为String。应该是

new webpack.DefinePlugin(Object.assign({
  __DEV__: JSON.stringify(project.env === 'development'),
}, project.globals))

请检查DefinePlugin