从 react-router getComponent 抽象 require.ensure 样板不起作用答案

【问题标题】：Abstracting require.ensure boilerplate from react-router getComponent doesn't work从 react-router getComponent 抽象 require.ensure 样板不起作用
【发布时间】：2017-02-08 06:49:28
【问题描述】：

我在 webpack 中使用 react-router 代码拆分并异步加载组件我这样做：

<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”。

为什么这不起作用？

【问题讨论】：

标签： webpack react-router

【解决方案1】：

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

【讨论】：