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 context。基本上，当您尝试要求包含表达式的内容时，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`);
	}
}

带有webpack的require中的动态文件路径？

2 个答案: