0

环境： 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] 以下模块无法热更新：（需要完全重新加载）这通常是因为已更改的模块（及其父模块）不知道如何自行热重新加载。有关更多详细信息，请参阅https://webpack.js.org/concepts/hot-module-replacement/。

但是当我删除A行时，热重载工作正常，警告提示也消失了。</p>

这是为什么？谢谢。

4

1 回答 1

0

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

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

请检查DefinePlugin

于 2018-03-30T04:10:17.537 回答