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.