从react-router getComponent中提取require.ensure样板不起作用

Question

我正在webpack中使用react-router进行代码拆分并加载组件async我这样做：

<Route
  path="somePath"
  getComponent={(next, cb) => {
    require.ensure([], (require) => {
      cb(null, require('../components/Example.jsx'));
    });
  }
}
/>

现在退房后Henley Edition's article我尝试做这样的事情，以避免使用bundle-loader并仍然减少样板。

const loadLazy = (component) => {
  return (next, cb) => {
    require.ensure([], (require) => {
      cb(null, require(component));
    });
  };
};

...

<Route
  path="somePath"
  getComponent={lazyLoad('../components/Example.jsx')}
/>

但这会在控制台中抛出错误，说无法找到模块'../components/Example.jsx'。

为什么这不起作用？

Answer 1

require(component)无法使用动态模块路径（例如您的BigCase），这就是您引用的文章使用Webpack's bundle-loader来解决此限制的原因。