使用require（＆＃39; ...＆＃39;）使用变量与使用webpack中的字符串

Question

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

我映射了一个具有＆＃34;名称＆＃34;的对象数组。和一个＆＃34; href＆＃34;属性。

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

在循环内部我想要图像，但它会抛出错误＆＃34;。* $：11未捕获错误：找不到模块＆＃34;。

当我打印appleIcon.href的值并尝试将其直接放入require（＆＃39;＆＃39;）时，它可以正常工作。

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

那么你能解释一下为什么第二个例子有效并且第一个例子会抛出错误吗？如何将变量置于require（＆＃39;＆＃39;）？

之内

谢谢！

Answer 1

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

这个答案有助于： https://stackoverflow.com/a/33048000

（同样通过Webpack检查require.context。另一个例子是业力测试，here。）

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

Answer 2

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

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