在webpack中，使用变量和字符串来调用require('...')有什么区别？

Question

我有一个问题对我来说不太有意义。

我正在映射一个对象数组，这些对象具有“名称”和“href”属性。

let appleIcons = _.map(appleIcons, appleIcon => {
  appleIcon.href = require(appleIcon.href);
  return appleIcon;
}); 

在循环内部，我想要引入这张图片，但是它会抛出一个错误：“.*$:11 Uncaught Error: Cannot find module”。

当我打印appleIcon.href的值并尝试将其直接放入require('')中时，它可以正常工作。

appleIcons = _.map(appleIcons, appleIcon => {
  appleIcon.href = require('./../../mobile-config/apple-icon-57x57.png');
  return appleIcon;
});

所以您能解释一下为什么第二个示例可以工作，而第一个示例会引发错误吗？我该如何在 require('') 中放置变量？

谢谢！

- Kitze

Answer 1

由于Webpack在构建时运行，当名称是动态变量时，它无法确定要捆绑哪些模块。您可以通过指定路径的一部分来给它提示（例如，如果您知道所有模块都在一个目录中）。

以下答案可能有所帮助：https://dev59.com/X43da4cB1Zd3GeqP1IV9#33048000

（此外，还可以通过Webpack的require.context来检查。另一个例子是karma测试，这里。）

或者 - 如果您事先知道文件名，则最好添加另一个构建步骤，将它们输出为字符串到文件中，这样Webpack就可以将它们捆绑在一起。

- lyosef

Answer 2

对我来说，添加一个空字符串解决了问题。因此，下面的代码应该可以工作：

let appleIcons = _.map(appleIcons, appleIcon => {
  appleIcon.href = require('' + appleIcon.href);
  return appleIcon;
});

- Deepak