使用require('...')变量与使用webpack中的字符串

Question

我有一个对我没有多大意义的问题.

我正在映射具有"name"和"href"属性的对象数组.

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

在循环内部我想要图像,但它会抛出错误".*$:11未捕获错误:找不到模块".

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

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

所以你能解释一下为什么第二个例子有效并且第一个例子会抛出错误吗？如何将变量放在require('')中？

谢谢!

Answer 1

由于Webpack在构建时运行,因此当名称是动态变量时,它无法确定要捆绑的模块.您可以通过指定路径的一部分来提供提示(例如,如果您知道所有模块都在一个目录中).

这个答案可以提供帮助:https: //stackoverflow.com/a/33048000

(另请参阅Webpack的require.context.另一个例子是业力测试,这里.)

或者 - 如果您知道高级文件名,最好添加另一个构建步骤以向文件输出字符串,这样Webpack就可以捆绑它们.

Answer 2

添加一个空字符串为我解决了这个问题。所以，下面的代码应该可以工作：

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