Webpack 解析特定目录中的图像

Question

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

要引用来自 /src 的图像，我目前必须这样做：

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

有什么方法可以简化这个，这样我就不需要指定图像路径了吗？可能只需要 image!some-image.png?

Answer 1

您可以设置一个带有路径的变量并引用它。

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

或使用 ES6 模板字符串

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

Answer 2

我通过使用 resolve.alias:

设法实现了这一点

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

然后我可以使用 require("~images/test.jpg"); 得到我 ./assets/images/test.jpg。

Webpack resolve images in certain directory