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