Webpack解析特定目录中的图像

Question

I have my images in /assets/images , and my code in /src .

To reference the images from /src , I have to currently do this:

require("../assets/images/some-image.png");

Is there a way that I can simplify this so that I don't need to specify the image path? Potentially just requiring image!some-image.png ?

Answer 1

You could set a variable with the path and reference that.

var imagePath = '../assets/images/';
require(imagePath + 'some-image.png');

or with ES6 template strings

const imagePath = '../assets/images/';
require(`#{imagePath}some-image.png`);

Answer 2

I managed to achieve this by using resolve.alias :

resolve: {
    alias:{
        "~images": path.resolve("./assets/images")
    },
    extensions: [ '', '.js', '.jpg' ]
}

I can then use require("~images/test.jpg"); to get me ./assets/images/test.jpg .