webpack需要动态文件路径？

Posted 2023-02-24

【中文标题】webpack需要动态文件路径？

【英文标题】：Dynamic file path in require with webpack?

【发布时间】：2017-01-20 16:00:49

【问题描述】：

当我使用 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 "."

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

【问题讨论】：

github.com/webpack/webpack/issues/118

【参考方案1】：

试试：

require(`svg-inline!$$pathconnected.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`);
	

【参考方案2】：

我认为您必须查看 webpack context。基本上，当您尝试要求包含表达式的内容时，webpack 将创建一个上下文。 该表达式将被视为正则表达式，它不会像您预期的那样工作。