Webpack是否需要动态文件路径？

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 "."

我想我的问题是，为什么不能像我在这里那样连接字符串？

Answer 1

我认为您必须研究webpack 上下文 。 基本上，当您尝试要求包含表达式的内容时，webpack会创建一个上下文。 该表达式将被视为正则表达式，并且无法正常运行。

Answer 2

尝试：

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

如果您需要在动态路径中添加更多变量，请尝试分割要求：

 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`); } }