Dynamic file path in require with webpack?

Question

This works fine when i manually request the file using require , however the moment i use the exact same request, but change the string so that it's split up with variables it fails.

This works great:

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

However if I was to do this:

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

It fails and says inside the console:

Uncaught Error: Cannot find module "."

I guess my question is why can't you concatenate strings like i have here?

Answer 1

I think you have to look into webpack context . Basically when you try to require something that contains an expression, webpack will create a context. That expression will be treated as a regular expression and it doesn't work as you may expect.

Answer 2

Try:

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

and if you need more variable in your dynamic path try 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`); } }