Question

我刚刚开始使用webpack，我使用带有动态页面加载器的react路由器，并且想要动态导入我的文件，但是在webpack中收到此警告：

警告在./apps/pages/routes.js中 35：6-44关键依赖：依赖的请求是表达式

这是我的代码示例：

＆＃13;

const routes = {
  component: App,
  childRoutes: [
    {
      path: '/',
      getComponent (location, cb) {
        System.import('./Home')
          .then(loadRoute(cb))
          .catch(errorLoading)
      }
    },
    {
      path: 'about',
      getComponent (location, cb) {
        System.import('./About')
          .then(loadRoute(cb))
          .catch(errorLoading)
      }
    }
  ]
}

＆＃13;

这种方法很好，但是当我想用这样的变量来制作它时：

＆＃13;

const routersPaths = [
  {path: '/', filePath: './Home'},
  {path: 'about', filePath: './About'}
]

const childRoutes = routersPaths.map(childRoute => {
  return {
    path: childRoute.path,
    getComponent (location, cb) {
      System.import(childRoute.filePath)
        .then(loadRoute(cb))
        .catch(errorLoading)
    }
  }
})

const routes = {
  component: App,
  childRoutes: childRoutes
}

＆＃13;

失败了。我想知道有没有办法使这项工作？

Answer 1

无法使用变量作为参数进行导入。 Webpack需要知道在编译时要包含哪些模块，并且它不进行程序流分析，因此它无法知道要包含哪些模块。在您的情况下，它可能很容易确定，但它可以更进一步，因为您可以在运行时随意构建导入路径，因此webpack根本不允许这样做。

有一个例外，您可以使用连接字符串，但这会将所有模块添加到与表达式匹配的包中，即使它们未被使用，如{ {3}}（相同的规则适用于import和require）。但是应该避免这种方法。

顺便说一句，require with expression已被import()（函数）替换。

webpack 2无法导入带有反应路由器

1 个答案: