webpack中的require如何使用动态文件路径？

Question

当我使用require手动请求文件时，它可以正常工作。但是，一旦我使用完全相同的请求，但更改字符串以便将其拆分为变量，则会失败。

这个很好地运行：

module.exports = (function() {
    var $svg = require('svg-inline!../../assets/svgs/global/connected.svg');
    console.log($svg);
}());

然而，如果我这样做：

module.exports = (function() {
    var $path = '../../assets/svgs/global/';
    var $svg = require('svg-inline!'+$path+'connected.svg');
    console.log($svg);
}());

它失败了，并在控制台内显示：

Uncaught Error: Cannot find module "."

我猜我的问题是为什么不能像我这里一样连接字符串？

- Shannon Hochkins

---

https://github.com/webpack/webpack/issues/118 - Amiram Korach

Answer 1

我认为你需要了解webpack的context。当你尝试引用某个包含表达式的内容时，webpack会创建一个上下文。这个表达式会被视为正则表达式，并且可能与您的预期不同。

- daniele bertella

Answer 2

尝试：

require(`svg-inline!${$path}connected.svg`)

如果你在动态路径中需要更多的变量，可以尝试使用split require：

function getIcon(name) {
 const [category, filename] = name.split(":");

 if (filename) {
  return require(`one_directory/icons/${category}/${filename}.svg`);
 } else {
  return require(`two_directory/icons/${name}.svg`);
 }
}

- padurets