将require('..'）与变量一起使用与在webpack中使用字符串相比

Using require('...') with a variable vs. using a string in webpack

本文关键字：webpack 字符串 变量 require 一起      更新时间：2023-09-26

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

我正在映射一个具有"name"answers"href"属性的对象数组。

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

在循环内部，我想需要图像，但它抛出了一个错误".*$：11未捕获错误：找不到模块"。

当我打印appleCon.href的值并尝试将其直接放入require（"）时，它就起作用了。

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

那么，你能解释一下为什么第二个例子有效，而第一个却出现错误吗？如何将变量放入require（''）中？

谢谢！

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

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

（也可以通过Webpack检查require.context。另一个例子是因果报应测试，在这里。）

或者，如果您知道高级文件名，最好添加另一个构建步骤，将它们作为字符串输出到文件中，这样Webpack就可以对它们进行绑定。

添加一个空字符串为我解决了这个问题

let appleIcons = _.map(appleIcons, appleIcon => {
  appleIcon.href = require('' + appleIcon.href);
  return appleIcon;
});
相关文章：