Webpack解析某些目录中的图像(Webpack resolve images in certain directory)

Webpack解析某些目录中的图像(Webpack resolve images in certain directory)

我在/assets/images有我的图像，在/src我的代码。

为了引用/src的图像，我现在必须这样做：

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

有没有一种方法可以简化这一点，以便我不需要指定图像路径？ 可能只是需要image!some-image.png ？

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?

最满意答案

你可以用路径和引用来设置一个变量。

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

或使用ES6模板字符串

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

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.