IT技术 - 在 webpack 中使用 require('...') 和一个变量对比使用一个字符串 - 吾爱随笔录

IT技术 javascript webpack

2021-03-15 20:09:13

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

我正在映射具有“名称”和“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('') 中放置一个变量？

谢谢！

2个回答

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

（还可以通过 Webpack检查require.context。另一个例子是业力测试，这里。）

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

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

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

其它你可能感兴趣的问题